*, ::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 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, InterVariable, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, 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: Geist Mono, monospace; /* 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::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

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;
}
  /*
   * The `hidden` attribute must beat every display utility (#1231).
   *
   * Tailwind's preflight ships `[hidden]:where(:not([hidden="until-found"]))`,
   * whose `:where()` deliberately zeroes its own specificity — leaving it at
   * (0,1,0), exactly tied with `.flex`, `.grid`, `.block`, and every other
   * display utility. Ties are broken by source order, and utilities are
   * emitted ~2,000 lines later, so ANY element carrying both `hidden` and a
   * display utility is silently never hidden.
   *
   * That shipped a full prod outage: the #1228 session-privacy cover was
   * `hidden` + `flex`, so it painted over every page and its JS dismiss path
   * (`cover.hidden = true`) could not remove it either. `!important` wins
   * regardless of layer or source order and closes the whole bug class.
   * `scripts/check_hidden_attribute_display.py` guards the template side.
   */
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    /* Primary — warm teal/green */
    --color-primary-50: 240 253 250;
    --color-primary-100: 204 251 241;
    --color-primary-200: 153 246 228;
    --color-primary-300: 94 234 212;
    --color-primary-400: 45 212 191;
    --color-primary-500: 20 184 166;
    /* 600 intentionally == 700 (WCAG AA retarget, FTR-WCAG-002): the old
       primary-600 (#0d9488) was ~3.74:1 against white, failing 4.5:1 for
       normal text. Do not re-lighten 600 — see .btn-primary-on-dark below
       for the fallout of the two shades no longer being distinct. */
    --color-primary-600: 15 118 110;
    --color-primary-700: 15 118 110;
    --color-primary-800: 17 94 89;
    --color-primary-900: 19 78 74;
    --color-primary-950: 4 47 46;

    /* Accent — warm terracotta/clay (distinct from warning's amber; brand
       secondary, Tailwind orange-derived so it stays warm but reads apart
       from the amber "caution" UI state). */
    --color-accent-50: 255 247 237;
    --color-accent-100: 255 237 213;
    --color-accent-200: 254 215 170;
    --color-accent-300: 253 186 116;
    --color-accent-400: 251 146 60;
    --color-accent-500: 249 115 22;
    --color-accent-600: 234 88 12;
    --color-accent-700: 194 65 12;
    --color-accent-800: 154 52 18;
    --color-accent-900: 124 45 18;

    /* Surface — neutral warm gray */
    --color-surface-50: 250 250 249;
    --color-surface-100: 245 245 244;
    --color-surface-200: 231 229 228;
    --color-surface-300: 214 211 209;
    --color-surface-400: 168 162 158;
    --color-surface-500: 120 113 108;
    --color-surface-600: 87 83 78;
    --color-surface-700: 68 64 60;
    --color-surface-800: 41 37 36;
    --color-surface-900: 28 25 23;

    /* Side-menu section tones (#3506). Wayfinding only: they tell her which part of the menu she is
       in and never mean a status (docs/reference/ux-standard.md rule 20). Each has a stripe shade
       and a dark "ink" shade for the section name (6.5:1 or better on surface-100). */
    --color-menu-slate: 141 160 186;
    --color-menu-slate-ink: 63 84 112;
    --color-menu-clay: 198 159 138;
    --color-menu-clay-ink: 124 74 53;
    --color-menu-heather: 171 154 189;
    --color-menu-heather-ink: 93 74 110;
    --color-menu-sand: 194 170 114;
    --color-menu-sand-ink: 107 86 39;
    /* The stripe above Transactions (#3521): the logo's teal, softened. Header, search, Favorites
       and the Dashboard link. Its ink (6.7:1 on surface-100) colours the Dashboard icon. */
    --color-menu-teal: 115 165 158;
    --color-menu-teal-ink: 36 95 90;
    --color-menu-stone: 168 162 158;

    /* Semantic — success (Tailwind green) */
    --color-success-50: 240 253 244;
    --color-success-100: 220 252 231;
    --color-success-200: 187 247 208;
    --color-success-300: 134 239 172;
    --color-success-400: 74 222 128;
    --color-success-500: 34 197 94;
    --color-success-600: 22 163 74;
    --color-success-700: 21 128 61;
    --color-success-800: 22 101 52;
    --color-success-900: 20 83 45;

    /* Semantic — warning (Tailwind amber) */
    --color-warning-50: 255 251 235;
    --color-warning-100: 254 243 199;
    --color-warning-200: 253 230 138;
    --color-warning-300: 252 211 77;
    --color-warning-400: 251 191 36;
    --color-warning-500: 245 158 11;
    --color-warning-600: 217 119 6;
    --color-warning-700: 180 83 9;
    --color-warning-800: 146 64 14;
    --color-warning-900: 120 53 15;

    /* Semantic — error (Tailwind red) */
    --color-error-50: 254 242 242;
    --color-error-100: 254 226 226;
    --color-error-200: 254 202 202;
    --color-error-300: 252 165 165;
    --color-error-400: 248 113 113;
    --color-error-500: 239 68 68;
    --color-error-600: 220 38 38;
    --color-error-700: 185 28 28;
    --color-error-800: 153 27 27;
    --color-error-900: 127 29 29;

    /* Semantic — info (Tailwind blue) */
    --color-info-50: 239 246 255;
    --color-info-100: 219 234 254;
    --color-info-200: 191 219 254;
    --color-info-300: 147 197 253;
    --color-info-400: 96 165 250;
    --color-info-500: 59 130 246;
    --color-info-600: 37 99 235;
    --color-info-700: 29 78 216;
    --color-info-800: 30 64 175;
    --color-info-900: 30 58 138;

    /* Transaction polarity — inflow (chromatic, brand-teal-leaning green;
       money in reads as the brand being glad about it, distinct from the
       generic alert-green of `success`) / outflow (achromatic, reuses
       surface ink; a payment isn't bad, so it gets no hue at all). */
    --color-inflow-50: 236 253 245;
    --color-inflow-100: 209 250 229;
    --color-inflow-200: 167 243 208;
    --color-inflow-300: 110 231 183;
    --color-inflow-400: 52 211 153;
    --color-inflow-500: 16 185 129;
    --color-inflow-600: 5 150 105;
    --color-inflow-700: 4 120 87;
    --color-inflow-800: 6 95 70;
    --color-inflow-900: 6 78 59;

    /* outflow deliberately reuses surface (achromatic) — see accounting/utils/transaction_kinds.py */
    --color-outflow-50: var(--color-surface-50);
    --color-outflow-100: var(--color-surface-100);
    --color-outflow-200: var(--color-surface-200);
    --color-outflow-300: var(--color-surface-300);
    --color-outflow-400: var(--color-surface-400);
    --color-outflow-500: var(--color-surface-500);
    --color-outflow-600: var(--color-surface-600);
    --color-outflow-700: var(--color-surface-700);
    --color-outflow-800: var(--color-surface-800);
    --color-outflow-900: var(--color-surface-900);

    /* Help — Tailwind violet. The one colour of the app helping her: the frame of a
       "Walk me through it" panel and the ring on what it points at, and AI Help's
       sparkle and panel title (Owner, #3322 walk, 2026-10-28). A frame and a mark,
       never a button: the main button stays primary teal (ux-standard rule 12). */
    --color-help-50: 245 243 255;
    --color-help-100: 237 233 254;
    --color-help-200: 221 214 254;
    --color-help-300: 196 181 253;
    --color-help-400: 167 139 250;
    --color-help-500: 139 92 246;
    --color-help-600: 124 58 237;
    --color-help-700: 109 40 217;
    --color-help-800: 91 33 182;
    --color-help-900: 76 29 149;
  }

  /* Inter font — self-hosted */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/inter/Inter-Variable.38c66b729e06.woff2") format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/inter/Inter-Variable-Italic.b052bcca5d64.woff2") format('woff2');
  }

  /* Geist Mono — self-hosted (FTR-VISFAM-001 Decision 5). Coordinated
     monospace sibling to Inter, used for monetary figures (font-mono
     tabular-nums) and identifiers (account/routing numbers, correlation
     IDs) so both existing patterns get a non-OS-dependent look. */
  @font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/geist-mono/GeistMono-Variable.308360d8a547.woff2") format('woff2');
  }

  @font-face {
    font-family: 'Geist Mono';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/geist-mono/GeistMono-Variable-Italic.dd34cc417603.woff2") format('woff2');
  }

  /* Global base styles */
  html {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  /* WCAG 2.1 AA — focus-visible indicator for inline links and buttons.
   * Form controls (input/select/textarea) already use Tailwind focus:ring-*
   * so they are excluded to avoid double indicators. */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid rgb(var(--color-primary-600));
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Tabular figures for financial data */
  .font-tabular {
    font-variant-numeric: tabular-nums;
  }

  /*
   * Default padding for form controls (#1281, FTR-UI-004).
   *
   * Tailwind's preflight sets `padding: 0` on `input`, `select` and
   * `textarea` (node_modules/tailwindcss/src/css/preflight.css), on the
   * assumption that something puts it back. Normally `@tailwindcss/forms`
   * does — but it is loaded here with `strategy: 'class'`
   * (tailwind.config.js), which emits NO base styles at all and instead
   * expects every control to opt in with `form-input` / `form-select` /
   * `form-textarea`. No template in this repo has ever used those classes.
   *
   * So the ONLY padding a control ever received was whatever `px-*` / `py-*`
   * utilities its own template happened to spell out, and ~180 controls
   * across ~50 templates omitted them — rendering their text, placeholder
   * and `<option>` list flush against the left border. Reported on
   * `/bills/<pk>/pay/` (the `#id_bank_account` select) and present app-wide.
   *
   * These declarations restore the app-wide standard (`px-3 py-1.5` — the
   * padding 162 of the already-correct controls use) as the DEFAULT, so a
   * control only needs a padding utility when it wants something different.
   *
   * Specificity is deliberately held at (0,0,1): every condition is wrapped
   * in `:where()`, which contributes nothing. A Tailwind padding utility is
   * a class, (0,1,0), so `px-2`, `pl-9`, `p-0` and `sr-only` all still beat
   * this rule. It can only fill a gap — it can never override a deliberate
   * per-control choice. Keep it that way: dropping the `:where()` would
   * silently re-pad every control that opted out.
   *
   * Input types are an ALLOW-list, not a deny-list. checkbox, radio, file,
   * range, color, submit, button and image are box-sized or button-shaped
   * controls that this padding would visibly distort, and a future input
   * type should have to be added here consciously rather than inherit text
   * padding by accident.
   */
  select:where(:not([multiple])),
  textarea,
  input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='week'],
    [type='time']
  ) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 420px) {

  .\!container {
    max-width: 420px !important;
  }

  .container {
    max-width: 420px;
  }
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 870px) {

  .\!container {
    max-width: 870px !important;
  }

  .container {
    max-width: 870px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.\!prose {
  color: var(--tw-prose-body) !important;
  max-width: 65ch !important;
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.\!prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.\!prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead) !important;
  font-size: 1.25em !important;
  line-height: 1.6 !important;
  margin-top: 1.2em !important;
  margin-bottom: 1.2em !important;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.\!prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.\!prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold) !important;
  font-weight: 600 !important;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.\!prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal !important;
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
  padding-inline-start: 1.625em !important;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.\!prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha !important;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.\!prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha !important;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.\!prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha !important;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.\!prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha !important;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.\!prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman !important;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.\!prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman !important;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.\!prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman !important;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.\!prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman !important;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.\!prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal !important;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.\!prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc !important;
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
  padding-inline-start: 1.625em !important;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.\!prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400 !important;
  color: var(--tw-prose-counters) !important;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.\!prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets) !important;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.\!prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 600 !important;
  margin-top: 1.25em !important;
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.\!prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr) !important;
  border-top-width: 1px !important;
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.\!prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--tw-prose-quotes) !important;
  border-inline-start-width: 0.25rem !important;
  border-inline-start-color: var(--tw-prose-quote-borders) !important;
  quotes: "\201C""\201D""\2018""\2019" !important;
  margin-top: 1.6em !important;
  margin-bottom: 1.6em !important;
  padding-inline-start: 1em !important;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.\!prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote !important;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.\!prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote !important;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.\!prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 800 !important;
  font-size: 2.25em !important;
  margin-top: 0 !important;
  margin-bottom: 0.8888889em !important;
  line-height: 1.1111111 !important;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.\!prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900 !important;
  color: inherit !important;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.\!prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 700 !important;
  font-size: 1.5em !important;
  margin-top: 2em !important;
  margin-bottom: 1em !important;
  line-height: 1.3333333 !important;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.\!prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800 !important;
  color: inherit !important;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.\!prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 600 !important;
  font-size: 1.25em !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.6em !important;
  line-height: 1.6 !important;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.\!prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700 !important;
  color: inherit !important;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.\!prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 600 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.5 !important;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.\!prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700 !important;
  color: inherit !important;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.\!prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.\!prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block !important;
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.\!prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.\!prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--tw-prose-kbd) !important;
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows) !important;
  font-size: 0.875em !important;
  border-radius: 0.3125rem !important;
  padding-top: 0.1875em !important;
  padding-inline-end: 0.375em !important;
  padding-bottom: 0.1875em !important;
  padding-inline-start: 0.375em !important;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.\!prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code) !important;
  font-weight: 600 !important;
  font-size: 0.875em !important;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.\!prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`" !important;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.\!prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`" !important;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.\!prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
  font-size: 0.875em !important;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.\!prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
  font-size: 0.9em !important;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.\!prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit !important;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.\!prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code) !important;
  background-color: var(--tw-prose-pre-bg) !important;
  overflow-x: auto !important;
  font-weight: 400 !important;
  font-size: 0.875em !important;
  line-height: 1.7142857 !important;
  margin-top: 1.7142857em !important;
  margin-bottom: 1.7142857em !important;
  border-radius: 0.375rem !important;
  padding-top: 0.8571429em !important;
  padding-inline-end: 1.1428571em !important;
  padding-bottom: 0.8571429em !important;
  padding-inline-start: 1.1428571em !important;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.\!prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.\!prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none !important;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.\!prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none !important;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.\!prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100% !important;
  table-layout: auto !important;
  margin-top: 2em !important;
  margin-bottom: 2em !important;
  font-size: 0.875em !important;
  line-height: 1.7142857 !important;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.\!prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px !important;
  border-bottom-color: var(--tw-prose-th-borders) !important;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.\!prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings) !important;
  font-weight: 600 !important;
  vertical-align: bottom !important;
  padding-inline-end: 0.5714286em !important;
  padding-bottom: 0.5714286em !important;
  padding-inline-start: 0.5714286em !important;
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.\!prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px !important;
  border-bottom-color: var(--tw-prose-td-borders) !important;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.\!prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0 !important;
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.\!prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline !important;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.\!prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px !important;
  border-top-color: var(--tw-prose-th-borders) !important;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.\!prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top !important;
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.\!prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start !important;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}
.\!prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.\!prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions) !important;
  font-size: 0.875em !important;
  line-height: 1.4285714 !important;
  margin-top: 0.8571429em !important;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.\!prose {
  --tw-prose-body: #374151 !important;
  --tw-prose-headings: #111827 !important;
  --tw-prose-lead: #4b5563 !important;
  --tw-prose-links: #111827 !important;
  --tw-prose-bold: #111827 !important;
  --tw-prose-counters: #6b7280 !important;
  --tw-prose-bullets: #d1d5db !important;
  --tw-prose-hr: #e5e7eb !important;
  --tw-prose-quotes: #111827 !important;
  --tw-prose-quote-borders: #e5e7eb !important;
  --tw-prose-captions: #6b7280 !important;
  --tw-prose-kbd: #111827 !important;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%) !important;
  --tw-prose-code: #111827 !important;
  --tw-prose-pre-code: #e5e7eb !important;
  --tw-prose-pre-bg: #1f2937 !important;
  --tw-prose-th-borders: #d1d5db !important;
  --tw-prose-td-borders: #e5e7eb !important;
  --tw-prose-invert-body: #d1d5db !important;
  --tw-prose-invert-headings: #fff !important;
  --tw-prose-invert-lead: #9ca3af !important;
  --tw-prose-invert-links: #fff !important;
  --tw-prose-invert-bold: #fff !important;
  --tw-prose-invert-counters: #9ca3af !important;
  --tw-prose-invert-bullets: #4b5563 !important;
  --tw-prose-invert-hr: #374151 !important;
  --tw-prose-invert-quotes: #f3f4f6 !important;
  --tw-prose-invert-quote-borders: #374151 !important;
  --tw-prose-invert-captions: #9ca3af !important;
  --tw-prose-invert-kbd: #fff !important;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%) !important;
  --tw-prose-invert-code: #fff !important;
  --tw-prose-invert-pre-code: #d1d5db !important;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%) !important;
  --tw-prose-invert-th-borders: #4b5563 !important;
  --tw-prose-invert-td-borders: #374151 !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.\!prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.\!prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.\!prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em !important;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.\!prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em !important;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.\!prose :where(.\!prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.\!prose :where(.\!prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}
.\!prose :where(.\!prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.\!prose :where(.\!prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
}
.\!prose :where(.\!prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em !important;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.\!prose :where(.\!prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em !important;
}
.\!prose :where(.\!prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.\!prose :where(.\!prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
}
.\!prose :where(.\!prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em !important;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.\!prose :where(.\!prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em !important;
}
.\!prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.\!prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.\!prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em !important;
  padding-inline-start: 1.625em !important;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.\!prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.\!prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.\!prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.\!prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.\!prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0 !important;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.\!prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0 !important;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.\!prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em !important;
  padding-inline-end: 0.5714286em !important;
  padding-bottom: 0.5714286em !important;
  padding-inline-start: 0.5714286em !important;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.\!prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0 !important;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.\!prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0 !important;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.\!prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.\!prose :where(.\!prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.\!prose :where(.\!prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0 !important;
}
.\!prose :where(.\!prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0 !important;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.\!prose :where(.\!prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0 !important;
}
.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}
.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}
.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}
.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}
.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}
.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}
.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}
.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}
.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}
.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}
.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}
.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}
.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}
.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}
.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}
.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}
.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
/*
   * Table reflow (#2909) — the one answer to "this table is wider than a phone".
   *
   * Add `table-reflow` to the <table>. Below md (768px) every row becomes a card: the first
   * cell (or the one marked `reflow-title`) is the card title, the other cells sit in a
   * two-column grid, each under its column header text; a cell with colspan, or `reflow-full`,
   * takes the whole width; `reflow-skip` drops a cell that only exists for the wide layout. A
   * cell the page hides below a breakpoint (`hidden sm:table-cell`) keeps that rule. A table that
   * already builds its own phone layout (`block md:table-row`, `md:hidden` labels) does not take
   * this class: it would show every label twice.
   * From md up nothing changes. A wide table's wrapper takes `reflow-wrap`: it scrolls
   * sideways from md up only (768px+, a desktop fallback), never on a phone.
   * static/js/table_reflow.js copies each header's text onto its cells as `data-label`
   * (an explicit `data-label` on a cell wins; `data-label=""` shows no label). The values
   * live in ONE copy of the markup, so a card can never miss a value the table shows.
   * Screen only: print and the PDF render keep the plain table.
   */
@media screen and (min-width: 768px) {
    .reflow-wrap {
      overflow-x: auto;
      overflow-y: hidden;
    }
  }
@media screen and (max-width: 767.98px) {
    table.table-reflow,
    table.table-reflow > tbody,
    table.table-reflow > tfoot {
      display: block;
      width: 100%;
      min-width: 0;
    }
    table.table-reflow > thead {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    table.table-reflow > tbody > tr,
    table.table-reflow > tfoot > tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.5rem 1rem;
      width: 100%;
      padding: 0.75rem 1rem;
      border-top: 1px solid rgb(var(--color-surface-200));
    }
    table.table-reflow > tbody > tr:first-child {
      border-top-width: 0;
    }
    table.table-reflow > tbody > tr > td,
    table.table-reflow > tbody > tr > th,
    table.table-reflow > tfoot > tr > td,
    table.table-reflow > tfoot > tr > th {
      min-width: 0;
      max-width: none !important; /* beats an inline `max-width: 0` (the table "truncate" trick) */
      padding: 0;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      text-align: left;
      white-space: normal;
      border: 0;
    }
    table.table-reflow > tbody > tr > [colspan],
    table.table-reflow > tfoot > tr > [colspan],
    table.table-reflow > tbody > tr > .reflow-full,
    table.table-reflow > tfoot > tr > .reflow-full,
    table.table-reflow > tbody > tr > [data-reflow-title],
    table.table-reflow > tfoot > tr > [data-reflow-title] {
      grid-column: 1 / -1;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    table.table-reflow > tbody > tr > .reflow-end,
    table.table-reflow > tfoot > tr > .reflow-end {
      text-align: right;
    }
    table.table-reflow > tbody > tr > [data-reflow-title],
    table.table-reflow > tfoot > tr > [data-reflow-title] {
      order: -1;
      font-weight: 600;
      color: rgb(var(--color-surface-900));
    }
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    table.table-reflow.reflow-actions-inline > tbody > tr > .reflow-full:not([colspan]):not([data-reflow-title]) {
      grid-column: auto;
      align-self: end;
    }
    table.table-reflow > tbody > tr > td[data-label]:not([data-label=""])::before,
    table.table-reflow > tbody > tr > th[data-label]:not([data-label=""])::before,
    table.table-reflow > tfoot > tr > td[data-label]:not([data-label=""])::before,
    table.table-reflow > tfoot > tr > th[data-label]:not([data-label=""])::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.125rem;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1rem;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-surface-500));
    }
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    table.table-reflow > tbody > tr > .reflow-inline {
      display: flex;
      align-items: baseline;
      gap: 0.375rem;
    }
    table.table-reflow > tbody > tr > .reflow-inline[data-label]:not([data-label=""])::before {
      margin-bottom: 0;
    }
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    table.table-reflow.reflow-cols-1-2 > tbody > tr {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    table.table-reflow [hidden],
    table.table-reflow tr.hidden,
    table.table-reflow tbody.hidden,
    table.table-reflow > tbody > tr[data-reflow-empty],
    table.table-reflow > tfoot > tr[data-reflow-empty],
    table.table-reflow > tbody > tr > .reflow-skip,
    table.table-reflow > tfoot > tr > .reflow-skip,
    table.table-reflow > tbody > tr > [data-reflow-empty],
    table.table-reflow > tfoot > tr > [data-reflow-empty] {
      display: none;
    }
    table.table-reflow td > input:not([type="checkbox"]):not([type="radio"]),
    table.table-reflow td > select {
      width: 100%;
    }
  }
/*
   * `reflow-until-xl` on the <table> (with `table-reflow`): the same card layout, held up to 1279px
   * instead of 767px. For a table with a column that needs real width to be usable (a Notes box,
   * #3301): collapse to cards rather than hide the column or let the page scroll sideways. Below md
   * the rules above already apply, so this covers md..xl only. Keep it identical to the block above.
   */
@media screen and (min-width: 768px) and (max-width: 1279.98px) {
    table.table-reflow.reflow-until-xl,
    table.table-reflow.reflow-until-xl > tbody,
    table.table-reflow.reflow-until-xl > tfoot {
      display: block;
      width: 100%;
      min-width: 0;
    }
    table.table-reflow.reflow-until-xl > thead {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    table.table-reflow.reflow-until-xl > tbody > tr,
    table.table-reflow.reflow-until-xl > tfoot > tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.5rem 1rem;
      width: 100%;
      padding: 0.75rem 1rem;
      border-top: 1px solid rgb(var(--color-surface-200));
    }
    table.table-reflow.reflow-until-xl > tbody > tr:first-child {
      border-top-width: 0;
    }
    table.table-reflow.reflow-until-xl > tbody > tr > td,
    table.table-reflow.reflow-until-xl > tbody > tr > th,
    table.table-reflow.reflow-until-xl > tfoot > tr > td,
    table.table-reflow.reflow-until-xl > tfoot > tr > th {
      min-width: 0;
      max-width: none !important; /* beats an inline `max-width: 0` (the table "truncate" trick) */
      padding: 0;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      text-align: left;
      white-space: normal;
      border: 0;
    }
    table.table-reflow.reflow-until-xl > tbody > tr > [colspan],
    table.table-reflow.reflow-until-xl > tfoot > tr > [colspan],
    table.table-reflow.reflow-until-xl > tbody > tr > .reflow-full,
    table.table-reflow.reflow-until-xl > tfoot > tr > .reflow-full,
    table.table-reflow.reflow-until-xl > tbody > tr > [data-reflow-title],
    table.table-reflow.reflow-until-xl > tfoot > tr > [data-reflow-title] {
      grid-column: 1 / -1;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    table.table-reflow.reflow-until-xl > tbody > tr > .reflow-end,
    table.table-reflow.reflow-until-xl > tfoot > tr > .reflow-end {
      text-align: right;
    }
    table.table-reflow.reflow-until-xl > tbody > tr > [data-reflow-title],
    table.table-reflow.reflow-until-xl > tfoot > tr > [data-reflow-title] {
      order: -1;
      font-weight: 600;
      color: rgb(var(--color-surface-900));
    }
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    table.table-reflow.reflow-until-xl.reflow-actions-inline > tbody > tr > .reflow-full:not([colspan]):not([data-reflow-title]) {
      grid-column: auto;
      align-self: end;
    }
    table.table-reflow.reflow-until-xl > tbody > tr > td[data-label]:not([data-label=""])::before,
    table.table-reflow.reflow-until-xl > tbody > tr > th[data-label]:not([data-label=""])::before,
    table.table-reflow.reflow-until-xl > tfoot > tr > td[data-label]:not([data-label=""])::before,
    table.table-reflow.reflow-until-xl > tfoot > tr > th[data-label]:not([data-label=""])::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.125rem;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1rem;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-surface-500));
    }
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    table.table-reflow.reflow-until-xl > tbody > tr > .reflow-inline {
      display: flex;
      align-items: baseline;
      gap: 0.375rem;
    }
    table.table-reflow.reflow-until-xl > tbody > tr > .reflow-inline[data-label]:not([data-label=""])::before {
      margin-bottom: 0;
    }
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    table.table-reflow.reflow-until-xl.reflow-cols-1-2 > tbody > tr {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    table.table-reflow.reflow-until-xl [hidden],
    table.table-reflow.reflow-until-xl tr.hidden,
    table.table-reflow.reflow-until-xl tbody.hidden,
    table.table-reflow.reflow-until-xl > tbody > tr[data-reflow-empty],
    table.table-reflow.reflow-until-xl > tfoot > tr[data-reflow-empty],
    table.table-reflow.reflow-until-xl > tbody > tr > .reflow-skip,
    table.table-reflow.reflow-until-xl > tfoot > tr > .reflow-skip,
    table.table-reflow.reflow-until-xl > tbody > tr > [data-reflow-empty],
    table.table-reflow.reflow-until-xl > tfoot > tr > [data-reflow-empty] {
      display: none;
    }
    table.table-reflow.reflow-until-xl td > input:not([type="checkbox"]):not([type="radio"]),
    table.table-reflow.reflow-until-xl td > select {
      width: 100%;
    }
  }
/* --- Application control hierarchy (FTR-UI-002) --- */
/* #3450: the toolbar is a size container. Everything inside it lays out by the CARD's width,
     never the window's: the 256px sidebar (from 1024) makes the card ~704px at both a 768 and a
     1024 window, so a window breakpoint cannot tell the two apart. */
.app-toolbar {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem; container-type: inline-size;
}
/* Narrow card: Search shares a row with Columns (or Filters) and wraps only when it cannot
     keep 12rem. From 480px it is a fixed 16rem. */
.app-toolbar-search {
  min-width: 12rem;
  flex: 1 1 0%;
}
@container (min-width: 480px) {
    .app-toolbar-search { flex: 0 0 16rem; min-width: 0; }
  }
.app-toolbar-filter {
  min-width: 12rem;
  flex: 1 1 0%;
}
/* Closed, Filters rides in the row beside Columns and Search and adds no height. Open, the
     panel needs width, so it takes its own full row. */
.app-toolbar-filter[open] { flex-basis: 100%; }
/* No `order-*` here on purpose: Columns renders first in the DOM, so visual and
     focus order already agree. Reordering it with flex `order` would split them. */
.app-toolbar-columns {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.toolbar-control {
  display: block;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.toolbar-control::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}
.toolbar-control::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}
.toolbar-control: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);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}
.toolbar-search-input {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.toolbar-disclosure-summary {
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700) / var(--tw-text-opacity, 1));
}
/* --- Filter panels (#3450) ---------------------------------------------------------
     .filter-panel   the opened body of a Filters disclosure
     .filter-grid    the list pages' cells (Transactions, Bills, Ready to bill): as many columns as fit
       .fg-span-narrow  a whole row on a card too narrow for three columns, else one cell
       .fg-tail         Filter + Clear (.fg-actions), with Tags beside them when the org has tags, so the
                        buttons never take a row of their own (Owner walk 2026-11-01, #2654)
     .filter-row     every other panel: as many 8.5rem+ columns as fit, bottom-aligned so a
                     label that wraps cannot push its field out of line.
     Every control is 2.375rem tall (base.html's global rule, the Tom Select skin): a panel
     keeps that, and its buttons stand as tall so a row's bottoms line up. */
.filter-panel {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
/* As many 8.5rem+ columns as the card has room for, the same rule the report bars use. A fixed 2/4/6/7 step
     left a full last row with room for one more column, and Filter/Clear then took a row of their own
     (Owner walk 2026-11-03, #3627). */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.filter-grid > * { min-width: 0; }
.filter-grid > .fg-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.75rem;
}
.fg-tail > .fg-tags {
  min-width: 12rem;
  flex: 1 1 0%;
}
/* A tail with no Tags is just Filter and Clear: one cell that follows the last field, so the buttons ride
     in the last row whenever a cell is free there and only take a row of their own when the row is full.
     With Tags it takes three columns (Tags, then Filter and Clear), a whole row on a narrow card. */
.filter-grid > .fg-tail:not(:has(.fg-tags)) { flex-wrap: nowrap; justify-content: flex-start; }
.filter-grid > .fg-tail:has(.fg-tags) { grid-column: span 3; }
.fg-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* On a card too narrow for three columns the cells that need more than one take the whole row; "1 / -1" is a
     whole row at one column or two, where "span 2" would add a column at one. */
@container (max-width: 29rem) {
    .filter-grid > .fg-span-narrow, .filter-grid > .fg-tail:has(.fg-tags) { grid-column: 1 / -1; }
  }
/* The Period list is two cells wide: its longest name ("This fiscal year to date") needs about 150px of text
     room, and a closed select clips silently (#3627). Below 360px a .filter-row has one column, so it stays one. */
.filter-grid > .fg-span-period, .filter-row > .fg-span-period { grid-column: span 2; }
@media (max-width: 359px) { .filter-row > .fg-span-period { grid-column: auto; } }
@container (max-width: 19.7rem) { .filter-grid > .fg-span-period { grid-column: auto; } }
.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem 1rem; align-items: end; }
.filter-row > * { min-width: 0; }
/* A native select drew grey beside the white Tom Select pickers and date inputs. */
.filter-panel select:not([multiple]), .filter-row select:not([multiple]) { background-color: #fff; }
.filter-panel button[type="submit"], .filter-panel .fg-actions > a { min-height: 2.375rem; }
.filter-panel .fg-actions > a {
  display: inline-flex;
  align-items: center;
}
/* The report look (#3584): the same fields and buttons with no disclosure, so a report's filters
     are always on the page. The card is the bar; .filter-row lays out the fields inside it. */
.filter-bar {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.filter-bar select:not([multiple]) { background-color: #fff; }
.filter-bar button[type="submit"], .filter-bar .fg-actions > a { min-height: 2.375rem; }
.filter-bar .fg-actions > a {
  display: inline-flex;
  align-items: center;
}
.filter-bar .fg-actions {
  justify-content: flex-start;
}
/* base.html gives every <input> a 2.375rem height; the typing input inside a Tom Select multi-select
     (Tags) caught it, so an empty Tags field stood 52px tall beside 38px fields (#3450). */
.filter-panel .ts-wrapper.multi .ts-control > input { height: auto !important; min-height: 0 !important; }
/* --- Worktable collapsible child row (#2352) --- */
/* A worktable "Show these rows" child <tr>, toggled by JS setting the
     `hidden` attribute (see static/js/contact_questions.js, preview.html's
     group chevrons). Same reasoning as .session-cover just below: the
     element's responsive display (stacked block at mobile, a real table row
     at md:) has to live in a component class, never as `block md:table-row`
     utilities on the element itself, or the `hidden` attribute loses the
     specificity tie to `.md\:table-row` and the row can never actually
     collapse — scripts/check_hidden_attribute_display.py fails the deploy
     if you put a display utility back on an element that also carries
     `hidden`. */
.npl-worktable-child-row {
    display: block;
  }
@media (min-width: 768px) {
    .npl-worktable-child-row {
      display: table-row;
    }
  }
/* --- Session privacy cover (#1231) --- */
/* Carries the cover's own `display`, so the template needs NO display
     utility. That is the point: the element's visibility is driven solely by
     its `hidden` attribute, which the base-layer `!important` guard above
     always wins. Do not add `flex`/`grid` to this element in a template —
     scripts/check_hidden_attribute_display.py fails the deploy if you do. */
.session-cover {
  position: fixed;
  inset: 0px;
  z-index: 100;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  text-align: center;
    display: flex;
}
/* --- Buttons --- */
.btn-accent {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-700) / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
}
.btn-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-800) / var(--tw-bg-opacity, 1));
}
.btn-primary {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
}
.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-800) / var(--tw-bg-opacity, 1));
}
/* Secondary CTA for use on a bg-primary-700 band — .btn-primary's bg-primary-600
     now shares primary-700's exact RGB value (WCAG AA retarget), so it would
     blend into any bg-primary-700 container. Use this instead in that context. */
.btn-primary-on-dark {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
}
.btn-primary-on-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity, 1));
}
/* --- Inline links --- */
/* Shared color/hover treatment for the "arrow link" / inline text-link
     pattern repeated across marketing and app templates (text-primary-700
     default, hover:text-primary-800 — the darker shade restoring a visible
     hover delta now that primary-600 == primary-700). Layout/size utilities
     (text-sm, font-semibold, whitespace-nowrap, …) stay on the element. */
.link-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
  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;
}
.link-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity, 1));
}
/* --- Cards --- */
.card-marketing {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.card-switch {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.card-switch:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card-switch-panel {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
}
@media (min-width: 640px) {

  .card-switch-panel {
    aspect-ratio: 16 / 9;
  }
}
.proof-shell {
  position: relative;
  display: flex;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
  padding: 0.75rem;
}
@media (min-width: 640px) {

  .proof-shell {
    padding: 1rem;
  }
}
.proof-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 1.1rem;
  border-width: 1px;
  --tw-shadow: 0 24px 48px rgba(15,23,42,0.08);
  --tw-shadow-colored: 0 24px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.proof-screenshot {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.hero-band {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg,#f8f4ec 0%,#fcfaf6 38%,#ffffff 100%);
}
.hero-band::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 1px;
    background-image: linear-gradient(90deg,transparent 0%,rgb(var(--color-surface-300)) 18%,rgb(var(--color-primary-200)) 50%,rgb(var(--color-surface-300)) 82%,transparent 100%);
  }
.hero-band::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 6rem;
    background-image: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.82) 60%,rgba(255,255,255,1) 100%);
  }
.hero-atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  border-radius: 9999px;
  --tw-blur: blur(64px);
  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);
}
.hero-orb-left {
  left: -8rem;
  top: 5rem;
  height: 16rem;
  width: 16rem;
  background-image: radial-gradient(circle,rgba(210,190,149,0.24) 0%,rgba(210,190,149,0.08) 38%,rgba(210,190,149,0) 72%);
}
@media (min-width: 640px) {

  .hero-orb-left {
    height: 20rem;
    width: 20rem;
  }
}
@media (min-width: 1024px) {

  .hero-orb-left {
    left: -3rem;
    top: 7rem;
    height: 28rem;
    width: 28rem;
  }
}
.hero-orb-center {
  left: 50%;
  top: 2.5rem;
  height: 12rem;
  width: 12rem;
  --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));
  background-image: radial-gradient(circle,rgba(158,191,180,0.18) 0%,rgba(158,191,180,0.07) 42%,rgba(158,191,180,0) 76%);
}
@media (min-width: 640px) {

  .hero-orb-center {
    height: 18rem;
    width: 18rem;
  }
}
@media (min-width: 1024px) {

  .hero-orb-center {
    top: 2rem;
    height: 24rem;
    width: 24rem;
  }
}
.hero-orb-right {
  right: -7rem;
  top: 6rem;
  height: 18rem;
  width: 18rem;
  background-image: radial-gradient(circle,rgba(164,177,207,0.22) 0%,rgba(164,177,207,0.08) 40%,rgba(164,177,207,0) 74%);
}
@media (min-width: 640px) {

  .hero-orb-right {
    height: 24rem;
    width: 24rem;
  }
}
@media (min-width: 1024px) {

  .hero-orb-right {
    right: -2rem;
    top: 5rem;
    height: 30rem;
    width: 30rem;
  }
}
.feature-hero-grid {
  position: relative;
}
.feature-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  transition-property: color,border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.feature-jump-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.feature-jump-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
}
.feature-chapter {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) {

  .feature-chapter {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.feature-chapter::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 1px;
    background-image: linear-gradient(90deg,transparent 0%,rgb(var(--color-surface-300)) 12%,rgb(var(--color-primary-200)) 50%,rgb(var(--color-surface-300)) 88%,transparent 100%);
  }
.feature-chapter-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {

  .feature-chapter-grid {
    grid-template-columns: minmax(0,1.05fr) minmax(22rem,0.95fr);
    align-items: flex-start;
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}
.feature-chapter-copy {
  position: relative;
  max-width: 42rem;
}
.feature-chapter-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}
.feature-chapter-kicker::after {
    content: "";
    height: 1px;
    flex: 1 1 0%;
    background-image: linear-gradient(90deg,rgb(var(--color-surface-300)) 0%,transparent 100%);
  }
.feature-chapter-number {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}
.feature-chapter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}
.feature-chapter-accent {
  margin-top: 2rem;
  height: 1px;
  width: 6rem;
  background-image: linear-gradient(90deg,rgb(var(--color-primary-400)) 0%,rgb(var(--color-primary-200)) 100%);
}
.feature-chapter-panel {
  position: relative;
}
@media (min-width: 1024px) {

  .feature-chapter-panel {
    padding-top: 1rem;
  }
}
.feature-chapter-panel::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 0px;
    height: 6rem;
    border-radius: 9999px;
    opacity: 0.8;
    --tw-blur: blur(64px);
    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);
  }
.chapter-tint-fund::before {
  background-image: radial-gradient(circle,rgba(149,191,163,0.35) 0%,rgba(149,191,163,0) 72%);
}
.chapter-tint-guided::before {
  background-image: radial-gradient(circle,rgba(160,183,194,0.32) 0%,rgba(160,183,194,0) 72%);
}
.chapter-tint-modern::before {
  background-image: radial-gradient(circle,rgba(157,171,207,0.32) 0%,rgba(157,171,207,0) 72%);
}
.chapter-tint-990::before {
  background-image: radial-gradient(circle,rgba(214,183,126,0.3) 0%,rgba(214,183,126,0) 72%);
}
.chapter-tint-migration::before {
  background-image: radial-gradient(circle,rgba(190,178,157,0.28) 0%,rgba(190,178,157,0) 72%);
}
.card-platform {
  border-radius: 0.75rem;
  border-left-width: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.card-platform-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-platform-icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --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);
}
/* Per-card accents — border + icon bg/ring/color */
.card-accent-blue {
  --tw-border-opacity: 1;
  border-left-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.card-accent-blue .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(191 219 254 / 0.6);
}
.card-accent-teal {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-primary-400) / var(--tw-border-opacity, 1));
}
.card-accent-teal .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(var(--color-primary-200) / 0.6);
}
.card-accent-amber {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.card-accent-amber .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(253 230 138 / 0.6);
}
.card-accent-indigo {
  --tw-border-opacity: 1;
  border-left-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.card-accent-indigo .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(199 210 254 / 0.6);
}
.card-accent-violet {
  --tw-border-opacity: 1;
  border-left-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.card-accent-violet .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(221 214 254 / 0.6);
}
.card-accent-slate {
  --tw-border-opacity: 1;
  border-left-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.card-accent-slate .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(226 232 240 / 0.6);
}
.card-accent-rose {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.card-accent-rose .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(254 205 211 / 0.6);
}
.card-accent-emerald {
  --tw-border-opacity: 1;
  border-left-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.card-accent-emerald .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(167 243 208 / 0.6);
}
.card-accent-sky {
  --tw-border-opacity: 1;
  border-left-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}
.card-accent-sky .card-platform-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(186 230 253 / 0.6);
}
.card-problem {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity, 1));
  padding: 2rem;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
/* --- Pricing tier cards --- */
.pricing-card-starter {
  background-color: rgb(var(--color-info-50) / 0.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(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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-200) / var(--tw-ring-opacity, 1));
}
.pricing-card-standard {
  background-color: rgb(var(--color-primary-50) / 0.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(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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}
.pricing-card-professional {
  background-color: rgb(var(--color-accent-50) / 0.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(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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent-700) / var(--tw-ring-opacity, 1));
}
/* --- Pricing tier headers --- */
.pricing-header-starter {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-700) / var(--tw-bg-opacity, 1));
}
.pricing-header-standard {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity, 1));
}
.pricing-header-professional {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-700) / var(--tw-bg-opacity, 1));
}
/* --- Pricing tier CTAs --- */
.pricing-cta-starter {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-cta-starter:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-500) / var(--tw-bg-opacity, 1));
}
.pricing-cta-standard {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-cta-standard:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity, 1));
}
.pricing-cta-professional {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-cta-professional:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-800) / var(--tw-bg-opacity, 1));
}
/* --- Pricing tier icon colors --- */
.pricing-icon-starter {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-700) / var(--tw-text-opacity, 1));
}
.pricing-icon-standard {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
}
.pricing-icon-professional {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-700) / var(--tw-text-opacity, 1));
}
/* --- Text utilities --- */
.text-balance {
    text-wrap: balance;
  }
/* --- Guide and docs prose: tables and code blocks at body size ----------
     Tailwind's prose-sm shrinks tables and code blocks to 0.857em, which put
     the table text and the connector address below the page's own copy (#3078
     walk). Both read at the body size instead. */
.prose-sm table,
  .prose-sm pre {
    font-size: 1em;
  }
/* --- Docs how-to steps -------------------------------------------------
     Renders an ordered list inside a PUBLIC docs article as a numbered "step
     sequence" — a primary badge per step on a continuous left rail — so the
     how-to / nav instructions (markdown "## Steps" numbered lists) read as a
     distinct kind of content from the explanatory prose around them. Scoped to
     .docs-article (public docs detail pages only): the in-app guide and the
     docs index are untouched. Only the article's own <ol> is treated; nested
     unordered sub-points stay normal bullets. */
.docs-article ol {
    list-style: none;
    position: relative;
    margin-left: 0;
    padding-left: 0;
    counter-reset: docs-step;
  }
.docs-article ol::before {
    content: "";
    position: absolute;
    left: 0.75rem;            /* center of the 1.5rem badge */
    top: 0.55rem;
    bottom: 0.55rem;
    width: 1.5px;
    background: rgb(var(--color-surface-200));
  }
.docs-article ol > li {
    counter-increment: docs-step;
    position: relative;
    padding-left: 2.25rem;
    min-height: 1.5rem;
  }
.docs-article ol > li::before {
    content: counter(docs-step);
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 9999px;
    background: rgb(var(--color-surface-100));
    color: rgb(var(--color-surface-600));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    /* thin ring + white halo (page bg) so the rail reads as continuous behind badges */
    box-shadow: 0 0 0 1px rgb(var(--color-surface-200)), 0 0 0 4px #fff;
  }
.docs-article ol ul {
    list-style: disc;
  }
/* --- Tier indicator pills ----------------------------------------------
     Extracted from the page-local <style> in faq.html (FTR-DOCS-005) so the
     pills are a single global component reusable on both /docs and the FAQ —
     "Standard / Professional feature" at a glance. Used as literal classes in
     templates, so no safelist entry is needed. */
.tier-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
  }
.tier-pill-all {
    background-color: rgb(var(--color-surface-100));
    color: rgb(var(--color-surface-600));
    outline: 1px solid rgb(var(--color-surface-200));
  }
.tier-pill-standard {
    background-color: rgb(var(--color-primary-50));
    color: rgb(var(--color-primary-700));
    outline: 1px solid rgb(var(--color-primary-200) / 0.6);
  }
.tier-pill-professional {
    background-color: rgb(var(--color-accent-50));
    color: rgb(var(--color-accent-700));
    outline: 1px solid rgb(var(--color-accent-200) / 0.6);
  }
/* --- Callouts / admonitions --------------------------------------------
     In-brand Note / Tip / Warning boxes authored in guide markdown via the
     markdown-it container plugin (`:::note … :::`) and rendered to
     <div class="callout callout-{note,tip,warning}"> by sync_guide_content
     (FTR-DOCS-005). Lower intensity than marketing — these reassure and stay
     scannable. Action-green is reserved for buttons + the how-to step rail,
     so callouts use info (Note), primary (Tip), and warning/amber (Warning).
     (FTR-VISFAM-001: previously borrowed `accent`, which happened to be
     amber-identical to `warning` — now that the accent/warning collision is
     fixed, this uses the token that actually means "warning".)
     The class names live ONLY in DB-rendered body_html (never in scanned
     templates), so they are safelisted in tailwind.config.js to survive
     content-scan purging. */
.callout {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    border-left: 3px solid;
    padding: 0.875rem 1rem;
  }
.callout > :first-child {
    margin-top: 0;
  }
.callout > :last-child {
    margin-bottom: 0;
  }
.callout-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
.callout-title svg {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
  }
.callout-note {
    background-color: rgb(var(--color-info-50));
    border-left-color: rgb(var(--color-info-400));
  }
.callout-note .callout-title {
    color: rgb(var(--color-info-700));
  }
.callout-tip {
    background-color: rgb(var(--color-primary-50));
    border-left-color: rgb(var(--color-primary-400));
  }
.callout-tip .callout-title {
    color: rgb(var(--color-primary-700));
  }
.callout-warning {
    background-color: rgb(var(--color-warning-50));
    border-left-color: rgb(var(--color-warning-400));
  }
.callout-warning .callout-title {
    color: rgb(var(--color-warning-700));
  }
/* --- Modal shell ---------------------------------------------------------
     Shared chrome for branded modals/popups so hand-rolled dialogs stop
     drifting on backdrop tint (was bg-black/30 vs bg-surface-900/50 vs
     bg-surface-500/75), panel ring, and header/body/footer padding. The
     canonical reference is components/confirm_modal.html; pair with the
     window.NplModal helper (base.html) for focus-trap / Esc / focus-restore.

     Compose by structure:
       • Centered modal whose root IS the scrim:
           <div class="hidden npl-modal-overlay">  (NplModal toggles `hidden`)
             <div class="npl-modal-panel max-w-md"> … </div>
       • Modal with a separate click-to-close scrim behind the panel:
           <div class="hidden fixed inset-0 z-50">
             <div class="npl-modal-backdrop" onclick="…"></div>
             <div class="fixed inset-0 flex items-center justify-center p-4">
               <div class="npl-modal-panel max-w-md"> … </div>
     Width is intentionally left to a max-w-* utility per modal. Sectioned
     modals use -header / -title / -body / -footer; simple ones just pad the
     panel directly (e.g. add `p-6`). */
.npl-modal-overlay {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-surface-900) / 0.5);
  padding: 1rem;
}
.npl-modal-backdrop {
  position: fixed;
  inset: 0px;
  background-color: rgb(var(--color-surface-900) / 0.5);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.npl-modal-panel {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.npl-modal-header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.npl-modal-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
}
.npl-modal-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.npl-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.banner-stack {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1px;
       column-gap: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity, 1));
}
.banner-slot { display: contents; }
.\!banner {
  flex-grow: 1;
  border-bottom-width: 1px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.banner {
  flex-grow: 1;
  border-bottom-width: 1px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.banner-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 640px) {

  .banner-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {

  .banner-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.banner-icon {
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}
.banner-action {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
  --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);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-300) / var(--tw-ring-opacity, 1));
}
.banner-action:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity, 1));
}
.banner-action:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: rgb(var(--color-primary-600) / 1);
}
.banner-x {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
  margin-right: -0.375rem;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 0.375rem;
  padding: 0.375rem;
}
.banner-x:hover {
  background-color: rgb(0 0 0 / 0.05);
}
.banner-x:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-color: rgb(var(--color-primary-600) / 1);
}
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .page-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    letter-spacing: -0.025em;
  }
}
.summary-strip {
    --ss-v: 20px;
    --ss-l: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 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);
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
  }
@media (min-width: 640px) {
    .summary-strip { grid-template-columns: repeat(var(--ss-cols), minmax(0, 1fr)); }
  }
/* Below the 14px floor the script sets data-two-col: two columns, and an odd last cell spans both. */
.summary-strip[data-two-col] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-strip > .summary-cell:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 640px) {
    .summary-strip:not([data-two-col]) > .summary-cell:last-child:nth-child(odd) { grid-column: auto; }
  }
/* Inside a card the page already has: the card supplies the ring and the shadow. */
.summary-strip--flat {
  border-radius: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --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(0px + 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);
}
/* A one-figure headline: the box hugs its figure instead of running full width. */
.summary-strip--hug {
  display: inline-grid;
  max-width: 100%; grid-template-columns: auto;
}
.summary-strip--hug > .summary-cell:last-child:nth-child(odd) { grid-column: auto; }
.summary-cell {
  grid-row: span 3 / span 3;
  display: grid;
  min-width: 0px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; grid-template-rows: subgrid;
}
.summary-label {
  align-self: flex-end;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
    font-size: var(--ss-l);
    line-height: 1.35;
}
.summary-value {
  margin-top: 0.25rem;
  white-space: nowrap;
  font-family: Geist Mono, monospace;
  font-weight: 600;
  --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);
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
    font-size: var(--ss-v);
    line-height: 1.4;
}
.summary-foot {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}
.summary-sub {
  display: block;
}
/* Status cells: the only colour a summary carries (Overdue, Difference). */
.summary-cell--error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-50) / var(--tw-bg-opacity, 1));
}
.summary-cell--error .summary-label,
  .summary-cell--error .summary-value,
  .summary-cell--error .summary-foot {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-700) / var(--tw-text-opacity, 1));
}
.summary-cell--warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-50) / var(--tw-bg-opacity, 1));
}
.summary-cell--warning .summary-label,
  .summary-cell--warning .summary-value,
  .summary-cell--warning .summary-foot {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-800) / var(--tw-text-opacity, 1));
}
.summary-cell--success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-50) / var(--tw-bg-opacity, 1));
}
.summary-cell--success .summary-label,
  .summary-cell--success .summary-value,
  .summary-cell--success .summary-foot {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-700) / var(--tw-text-opacity, 1));
}
/* An inline editor that takes the value's place (statement balance on a reconciliation). */
.summary-edit { display: none; }
.summary-cell.is-editing .summary-view { display: none; }
.summary-cell.is-editing .summary-edit { display: block; }
.txn-list { container-type: inline-size; }
.txn-cards { display: none; flex-direction: column; gap: 0.5rem; }
.txn-table {
    --txn-gap: clamp(6px, 1.4cqw, 14px);
    --txn-py: clamp(6px, 0.9cqw, 9px);
    --txn-dw: 62px;
    --txn-f: minmax(0, 1.05fr);
    --txn-r: 78px;
    --txn-d: minmax(0, 2fr);
    --txn-n: minmax(0, 1.15fr);
    font-size: 13px;
    line-height: 18px;
  }
.txn-head, .txn-row {
    display: grid;
    align-items: start;
    -moz-column-gap: var(--txn-gap);
         column-gap: var(--txn-gap);
    padding-inline: var(--txn-gap);
  }
.txn-head { padding-block: 9px; }
/* Each cell's first line shares one baseline, so a date, a badge and an amount sit level
     (Owner walk 2026-11-01, #2654); a wrapped second line is free to fall where it falls. */
.txn-row { padding-block: var(--txn-py); align-items: baseline; }
/* The fund move's tick box sits left of the date; the Date column grows to hold it. */
.txn-pick { margin-right: 6px; vertical-align: -3px; }
.txn-table.txn-has-pick { --txn-dw: 84px; }
.txn-has-pick .txn-head .txn-date, .txn-has-pick .txn-head .txn-h-dt { padding-left: 22px; }
.txn-head-med { display: none; }
.txn-c { min-width: 0; }
.txn-pair { display: contents; }
.txn-date { order: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.txn-type { order: 2; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
/* A badge never wraps (badge.html is whitespace-nowrap), so a long one - an In-Kind
     category - is cut with an ellipsis instead of painting over the next column. */
.txn-type > span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.txn-type-cat > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.txn-fund { order: 3; font-size: 12px; line-height: 16px; }
.txn-ref { order: 4; font-size: 12px; line-height: 16px; white-space: nowrap; }
.txn-desc { order: 5; }
.txn-name { order: 6; font-size: 12px; line-height: 16px; }
.txn-amt { order: 7; text-align: right; white-space: nowrap; }
.txn-by-name .txn-c { order: 0; }
.txn-by-name .txn-ref { overflow: hidden; text-overflow: ellipsis; }
.txn-date-full { display: none; }
.txn-clamp, .txn-clamp-1, .txn-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
.txn-clamp-2 { -webkit-line-clamp: 2; }
.txn-clamp-1 { -webkit-line-clamp: 1; }
.txn-row:focus-visible { outline: 2px solid rgb(var(--color-primary-600)); outline-offset: -2px; }
/* >= 880px: one line per transaction. Eight combinations of the optional
     columns (Fund, Reference, Name) each get their own track list. */
@container (min-width: 880px) {
    .txn-head, .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-d) 112px; }
    .txn-table.txn-has-fund .txn-head, .txn-table.txn-has-fund .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-f) var(--txn-d) 112px; }
    .txn-table.txn-has-ref .txn-head, .txn-table.txn-has-ref .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-d) 112px; }
    .txn-table.txn-has-name .txn-head, .txn-table.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-d) var(--txn-n) 112px; }
    .txn-table.txn-has-fund.txn-has-ref .txn-head, .txn-table.txn-has-fund.txn-has-ref .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-f) var(--txn-r) var(--txn-d) 112px; }
    .txn-table.txn-has-fund.txn-has-name .txn-head, .txn-table.txn-has-fund.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-f) var(--txn-d) var(--txn-n) 112px; }
    .txn-table.txn-has-ref.txn-has-name .txn-head, .txn-table.txn-has-ref.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-d) var(--txn-n) 112px; }
    .txn-table.txn-has-fund.txn-has-ref.txn-has-name .txn-head, .txn-table.txn-has-fund.txn-has-ref.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-f) var(--txn-r) var(--txn-d) var(--txn-n) 112px; }
  }
/* The Transactions list (#3446): Date Type [Ref] [Name] Description [Fund] Amount. The track
     widths are the same ones as above, only moved, so the no-sideways-scroll budget (#2929) is
     unchanged. One more class than the rules above, so these win. */
@container (min-width: 880px) {
    .txn-table.txn-by-name .txn-head, .txn-table.txn-by-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-d) 112px; }
    .txn-table.txn-by-name.txn-has-fund .txn-head, .txn-table.txn-by-name.txn-has-fund .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-d) var(--txn-f) 112px; }
    .txn-table.txn-by-name.txn-has-ref .txn-head, .txn-table.txn-by-name.txn-has-ref .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-d) 112px; }
    .txn-table.txn-by-name.txn-has-name .txn-head, .txn-table.txn-by-name.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-n) var(--txn-d) 112px; }
    .txn-table.txn-by-name.txn-has-fund.txn-has-ref .txn-head, .txn-table.txn-by-name.txn-has-fund.txn-has-ref .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-d) var(--txn-f) 112px; }
    .txn-table.txn-by-name.txn-has-fund.txn-has-name .txn-head, .txn-table.txn-by-name.txn-has-fund.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-n) var(--txn-d) var(--txn-f) 112px; }
    .txn-table.txn-by-name.txn-has-ref.txn-has-name .txn-head, .txn-table.txn-by-name.txn-has-ref.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-n) var(--txn-d) 112px; }
    .txn-table.txn-by-name.txn-has-fund.txn-has-ref.txn-has-name .txn-head, .txn-table.txn-by-name.txn-has-fund.txn-has-ref.txn-has-name .txn-row { grid-template-columns: var(--txn-dw) 124px var(--txn-r) var(--txn-n) var(--txn-d) var(--txn-f) 112px; }
  }
/* >= 1000px: room for the full date. */
@container (min-width: 1000px) {
    .txn-table { --txn-dw: 92px; }
    .txn-table.txn-has-pick { --txn-dw: 114px; }
    .txn-date-short { display: none; }
    .txn-date-full { display: inline; }
  }
/* 960px and up: Fund and Name match Date, Description and Amount (13px). */
@container (min-width: 960px) {
    .txn-fund, .txn-name { font-size: 13px; line-height: 18px; }
  }
/* 720-879px: stacked pairs, four tracks. */
@container (max-width: 879.98px) {
    .txn-head-wide { display: none; }
    .txn-head-med { display: grid; }
    .txn-head, .txn-row { grid-template-columns: 150px minmax(0, 1.5fr) minmax(0, 1fr) 112px; }
    .txn-table.txn-no-pair-fn .txn-head, .txn-table.txn-no-pair-fn .txn-row { grid-template-columns: 150px minmax(0, 1fr) 112px; }
    .txn-pair { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .txn-pair-fn { gap: 1px; }
    .txn-pair-fn .txn-clamp { -webkit-line-clamp: 2; }
    .txn-head-med .txn-h-dt, .txn-head-med .txn-h-fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .txn-pair-fn .txn-ref { order: 9; }
    .txn-pair-dt, .txn-head-med .txn-h-dt { grid-column: 1; grid-row: 1; }
    .txn-desc, .txn-head-med .txn-h-desc { grid-column: 2; grid-row: 1; }
    .txn-pair-fn, .txn-head-med .txn-h-fn { grid-column: 3; grid-row: 1; }
    .txn-amt, .txn-head-med .txn-h-amt { grid-column: 4; grid-row: 1; }
    .txn-table.txn-no-pair-fn .txn-amt, .txn-table.txn-no-pair-fn .txn-head-med .txn-h-amt { grid-column: 3; }
    /* The Transactions list (#3446): Date/Type(/Ref) | Name over Description | Fund | Amount. */
    .txn-table.txn-by-name .txn-head, .txn-table.txn-by-name .txn-row { grid-template-columns: 150px minmax(0, 1.5fr) minmax(0, 1fr) 112px; }
    .txn-table.txn-by-name.txn-no-fund .txn-head, .txn-table.txn-by-name.txn-no-fund .txn-row { grid-template-columns: 150px minmax(0, 1fr) 112px; }
    .txn-by-name .txn-pair-nd, .txn-by-name .txn-head-med .txn-h-desc { grid-column: 2; grid-row: 1; }
    .txn-by-name .txn-fund { grid-column: 3; grid-row: 1; }
    .txn-by-name.txn-no-fund .txn-amt, .txn-by-name.txn-no-fund .txn-head-med .txn-h-amt { grid-column: 3; }
    .txn-by-name .txn-pair-nd .txn-name .txn-clamp { -webkit-line-clamp: 1; }
    .txn-by-name .txn-name-empty { display: none; }
    .txn-by-name .txn-fund .txn-clamp { -webkit-line-clamp: 2; }
  }
/* < 720px: the card list replaces the table. */
@container (max-width: 719.98px) {
    .txn-table-wrap { display: none; }
    .txn-cards { display: flex; }
  }
.txn-card-meta { display: flex; align-items: flex-start; font-size: 12px; line-height: 16px; }
.txn-card-meta .txn-card-fund { flex: 0 1 auto; max-width: 60%; min-width: 0; }
.txn-card-meta .txn-card-name { flex: 1 1 0; min-width: 0; }
.txn-card-meta .txn-card-dot { flex: none; margin-inline: 5px; }
/* The Bills list (#3399) uses these rows with its own columns: Date Vendor Bill# Due Amount
     Balance. One line from 720px of container up (the cards below that); no stacked pairs. */
.txn-table.bill-table .txn-head, .txn-table.bill-table .txn-row {
    grid-template-columns: var(--txn-dw) minmax(0, 1.6fr) minmax(0, 1fr) var(--txn-dw) 96px 96px;
  }
/* The vendor's own number wraps over up to 3 lines (.txn-clamp on the cell) instead of being cut to one: it is what she searches by. */
.bill-table .bill-money { text-align: right; white-space: nowrap; }
/* Bills have fewer columns than Transactions, so the full date fits sooner: a 1280px window
     (a 960px content area) keeps "Oct 10, 2026". */
@container (min-width: 900px) {
    .txn-table.bill-table { --txn-dw: 92px; }
    .bill-table .txn-date-short { display: none; }
    .bill-table .txn-date-full { display: inline; }
  }
.walk-grid {
    --walk-grid-gap: 1.25rem;
    display: grid;
    gap: var(--walk-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 2 * var(--walk-grid-gap)) / 3)), 1fr));
  }
.nav-sec {
    margin-inline: calc(var(--nav-px, 1.5rem) * -1);
    padding: 0 var(--nav-px, 1.5rem) .875rem calc(var(--nav-px, 1.5rem) - 3px);
    border-top: 1px solid rgb(var(--color-surface-200));
    border-left: 3px solid var(--nav-rail, transparent);
  }
.nav-tone-slate { --nav-rail: rgb(var(--color-menu-slate)); --nav-ink: rgb(var(--color-menu-slate-ink)); }
.nav-tone-clay { --nav-rail: rgb(var(--color-menu-clay)); --nav-ink: rgb(var(--color-menu-clay-ink)); }
.nav-tone-heather { --nav-rail: rgb(var(--color-menu-heather)); --nav-ink: rgb(var(--color-menu-heather-ink)); }
.nav-tone-sand { --nav-rail: rgb(var(--color-menu-sand)); --nav-ink: rgb(var(--color-menu-sand-ink)); }
.nav-tone-teal { --nav-rail: rgb(var(--color-menu-teal)); --nav-ink: rgb(var(--color-menu-teal-ink)); }
/* Link icons take their group's ink (#3521): the same dark shade as the section name, 6.5:1 or
     better. The stripe shades are only 2.3-2.7:1, under the 3:1 icons need. Quick Entry's icon used
     to carry its own text-surface-900; a utility class on an icon would win over this rule. Favorites
     keep their amber star: only .nav-sec and the Dashboard row are covered. */
.nav-sec a > svg:first-child,
  .nav-lead-link a > svg:first-child { color: var(--nav-ink); }
/* The teal stripe above Transactions (#3521). .nav-lead-top holds search, Favorites and Recent and
     reaches up through the menu box's pt-4 so the stripe starts flush under the app bar; its 1rem
     bottom padding and gap are the spacing the box's gap-y-4 and each child's mt-4 used to give.
     .nav-lead-link is the Dashboard row, padded to the 18px it used to leave below it. */
.nav-lead {
    margin-inline: calc(var(--nav-px, 1.5rem) * -1);
    padding-inline: calc(var(--nav-px, 1.5rem) - 3px) var(--nav-px, 1.5rem);
    border-left: 3px solid var(--nav-rail, transparent);
  }
.nav-lead-top { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
.nav-lead-top:first-child { margin-top: -1rem; padding-top: 1rem; }
.nav-lead-top:not(:first-child) { margin-top: 1rem; }
.nav-lead-link { padding-bottom: 18px; }
/* The app bar's share of the stripe: a border, so forced-colours mode keeps it. It covers the bar's
     2px top line and 1px bottom line at the left corner. Large screens only, where the menu is. */
.app-bar-stripe { display: none; }
@media (min-width: 1024px) {
    .app-bar-stripe {
      display: block;
      position: absolute;
      left: 0;
      top: -2px;
      bottom: -1px;
      border-left: 3px solid rgb(var(--color-menu-teal));
    }
  }
/* top: -1rem cancels the menu box's own pt-4: a sticky element measures from inside that padding,
     so without it links would show above a pinned name. If either box's top padding changes, change
     this too. */
.nav-sec-head {
    position: sticky;
    top: -1rem;
    z-index: 3;
    margin-inline: calc((var(--nav-px, 1.5rem) - 3px) * -1) calc(var(--nav-px, 1.5rem) * -1);
    padding: .5rem var(--nav-px, 1.5rem) .3125rem calc(var(--nav-px, 1.5rem) - 3px);
    background: rgb(var(--color-surface-100));
  }
.nav-sec-head.is-stuck { box-shadow: 0 1px 0 rgb(var(--color-surface-200)); }
.nav-sec-title {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nav-ink, rgb(var(--color-surface-700)));
  }
.nav-foot {
    margin-inline: calc(var(--nav-px, 1.5rem) * -1);
    padding: .875rem var(--nav-px, 1.5rem) 0 calc(var(--nav-px, 1.5rem) - 3px);
    border-top: 1px solid rgb(var(--color-surface-200));
    border-left: 3px solid rgb(var(--color-menu-stone));
  }
/* A link that belongs to the one above it (Budget Amendments under Budgets): indented, no icon.
     Rail mode shows the icon again, since a link with no label and no icon would be invisible. */
.nav-sublink { padding-left: 2.5rem; font-size: .8125rem; }
.nav-sub-icon { display: none; }
/* Faint 8px shadows at the menu's top and bottom edges: the top one while scrolled down, the
     bottom one while there is more below. The script sets .is-on. */
.nav-edge {
    position: absolute;
    left: 0;
    right: 1px;
    height: .5rem;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }
.nav-edge.is-on { opacity: 1; }
.nav-edge-top { top: 0; background: linear-gradient(to bottom, rgb(var(--color-surface-800) / .10), rgb(var(--color-surface-800) / 0)); }
.nav-edge-bottom { bottom: 0; background: linear-gradient(to top, rgb(var(--color-surface-800) / .10), rgb(var(--color-surface-800) / 0)); }
/* The phone drawer is itself the scroll box, so its edges sit over it instead of inside it. */
/* Same width as the drawer (#3689): the whole phone, 360px from 640px up. */
.nav-edge-drawer { position: fixed; left: 0; right: auto; width: 100%; }
@media (min-width: 640px) { .nav-edge-drawer { width: 22.5rem; } }
.nav-edge-drawer.nav-edge-top { top: 3.5rem; }
.nav-edge-drawer.nav-edge-bottom { bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .nav-edge { transition: none; }
  }
.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-1 {
  inset: -0.25rem;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.inset-y-6 {
  top: 1.5rem;
  bottom: 1.5rem;
}
.-left-\[7px\] {
  left: -7px;
}
.-left-\[9px\] {
  left: -9px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.right-0 {
  right: 0px;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-24 {
  top: 6rem;
}
.top-28 {
  top: 7rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-\[3\.75rem\] {
  top: 3.75rem;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.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-\[100\] {
  z-index: 100;
}
.z-\[60\] {
  z-index: 60;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-first {
  order: -9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
.clear-both {
  clear: both;
}
.-m-1\.5 {
  margin: -0.375rem;
}
.-m-2\.5 {
  margin: -0.625rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}
.-my-6 {
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}
.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-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-0\.5 {
  margin-left: -0.125rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.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-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-7 {
  margin-left: 1.75rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-9 {
  margin-left: 2.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.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-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.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-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.flow-root {
  display: flow-root;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[2\/1\] {
  aspect-ratio: 2/1;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.\!h-\[1\.875rem\] {
  height: 1.875rem !important;
}
.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-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[2\.375rem\] {
  height: 2.375rem;
}
.h-\[38px\] {
  height: 38px;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-36 {
  max-height: 9rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[50vh\] {
  max-height: 50vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[calc\(100vh-9rem\)\] {
  max-height: calc(100vh - 9rem);
}
.max-h-\[min\(21rem\2c calc\(100vh-14rem\)\)\] {
  max-height: min(21rem, calc(100vh - 14rem));
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-6 {
  min-height: 1.5rem;
}
.min-h-\[18rem\] {
  min-height: 18rem;
}
.min-h-\[2\.375rem\] {
  min-height: 2.375rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[80vh\] {
  min-height: 80vh;
}
.min-h-\[calc\(100vh-5rem\)\] {
  min-height: calc(100vh - 5rem);
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/4 {
  width: 25%;
}
.w-1\/6 {
  width: 16.666667%;
}
.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-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[18px\] {
  width: 18px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-6 {
  min-width: 1.5rem;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[2\.25rem\] {
  min-width: 2.25rem;
}
.min-w-\[22rem\] {
  min-width: 22rem;
}
.min-w-full {
  min-width: 100%;
}
.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-7xl {
  max-width: 80rem;
}
.max-w-\[\.\.\.\] {
  max-width: ...;
}
.max-w-\[10rem\] {
  max-width: 10rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[16ch\] {
  max-width: 16ch;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[24rem\] {
  max-width: 24rem;
}
.max-w-\[26rem\] {
  max-width: 26rem;
}
.max-w-\[34rem\] {
  max-width: 34rem;
}
.max-w-\[42rem\] {
  max-width: 42rem;
}
.max-w-\[80vw\] {
  max-width: 80vw;
}
.max-w-\[8rem\] {
  max-width: 8rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.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-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.basis-1\/2 {
  flex-basis: 50%;
}
.basis-full {
  flex-basis: 100%;
}
.table-auto {
  table-layout: auto;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.-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-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-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-3\.5 {
  --tw-translate-x: 0.875rem;
  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\.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));
}
.-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));
}
.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 ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@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-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-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;
}
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: 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-\[6\.5rem_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 6.5rem minmax(0,1fr);
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-cols-\[minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(0,1fr);
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.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\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.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-8 {
  gap: 2rem;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.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-6 {
  row-gap: 1.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * 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-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * 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));
}
.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-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-amber-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-divide-opacity, 1));
}
.divide-error-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-error-200) / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-primary-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-primary-100) / var(--tw-divide-opacity, 1));
}
.divide-primary-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-primary-200) / var(--tw-divide-opacity, 1));
}
.divide-surface-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-surface-100) / var(--tw-divide-opacity, 1));
}
.divide-surface-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-divide-opacity, 1));
}
.divide-warning-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-warning-100) / var(--tw-divide-opacity, 1));
}
.divide-warning-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-warning-50) / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.justify-self-start {
  justify-self: start;
}
.overflow-auto {
  overflow: auto;
}
.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-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[1\.1rem\] {
  border-radius: 1.1rem;
}
.rounded-\[1\.35rem\] {
  border-radius: 1.35rem;
}
.rounded-\[1\.75rem\] {
  border-radius: 1.75rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-2xl {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-r-2xl {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-\[3px\] {
  border-bottom-width: 3px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-double {
  border-style: double;
}
.border-\[\#d6dfd9\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 223 217 / var(--tw-border-opacity, 1));
}
.border-\[\#d7dde6\] {
  --tw-border-opacity: 1;
  border-color: rgb(215 221 230 / var(--tw-border-opacity, 1));
}
.border-\[\#d7dfe3\] {
  --tw-border-opacity: 1;
  border-color: rgb(215 223 227 / var(--tw-border-opacity, 1));
}
.border-\[\#d7e1e3\] {
  --tw-border-opacity: 1;
  border-color: rgb(215 225 227 / var(--tw-border-opacity, 1));
}
.border-\[\#d8e0e2\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 224 226 / var(--tw-border-opacity, 1));
}
.border-\[\#d8e1e4\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 225 228 / var(--tw-border-opacity, 1));
}
.border-\[\#d8e4dd\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 228 221 / var(--tw-border-opacity, 1));
}
.border-\[\#d9e1ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 225 239 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe4dd\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 228 221 / var(--tw-border-opacity, 1));
}
.border-\[\#dccdb9\] {
  --tw-border-opacity: 1;
  border-color: rgb(220 205 185 / var(--tw-border-opacity, 1));
}
.border-\[\#ddd8cf\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 216 207 / var(--tw-border-opacity, 1));
}
.border-\[\#e2dbd1\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 219 209 / var(--tw-border-opacity, 1));
}
.border-\[\#e4dac8\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 218 200 / var(--tw-border-opacity, 1));
}
.border-\[\#e6dcc8\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 220 200 / var(--tw-border-opacity, 1));
}
.border-\[\#eadfce\] {
  --tw-border-opacity: 1;
  border-color: rgb(234 223 206 / var(--tw-border-opacity, 1));
}
.border-accent-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-200) / var(--tw-border-opacity, 1));
}
.border-accent-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-300) / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-error-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-200) / var(--tw-border-opacity, 1));
}
.border-error-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-300) / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-help-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-help-200) / var(--tw-border-opacity, 1));
}
.border-info-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-200) / var(--tw-border-opacity, 1));
}
.border-info-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-300) / var(--tw-border-opacity, 1));
}
.border-primary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-100) / var(--tw-border-opacity, 1));
}
.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-200) / var(--tw-border-opacity, 1));
}
.border-primary-200\/60 {
  border-color: rgb(var(--color-primary-200) / 0.6);
}
.border-primary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-300) / var(--tw-border-opacity, 1));
}
.border-primary-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-400) / var(--tw-border-opacity, 1));
}
.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity, 1));
}
.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-600) / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-success-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-200) / var(--tw-border-opacity, 1));
}
.border-success-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-300) / var(--tw-border-opacity, 1));
}
.border-surface-100 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-100) / var(--tw-border-opacity, 1));
}
.border-surface-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
}
.border-surface-200\/80 {
  border-color: rgb(var(--color-surface-200) / 0.8);
}
.border-surface-200\/90 {
  border-color: rgb(var(--color-surface-200) / 0.9);
}
.border-surface-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-300) / var(--tw-border-opacity, 1));
}
.border-surface-300\/40 {
  border-color: rgb(var(--color-surface-300) / 0.4);
}
.border-surface-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-400) / var(--tw-border-opacity, 1));
}
.border-surface-400\/50 {
  border-color: rgb(var(--color-surface-400) / 0.5);
}
.border-transparent {
  border-color: transparent;
}
.border-warning-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-200) / var(--tw-border-opacity, 1));
}
.border-warning-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-300) / var(--tw-border-opacity, 1));
}
.border-warning-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-400) / var(--tw-border-opacity, 1));
}
.border-warning-600 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-600) / var(--tw-border-opacity, 1));
}
.border-white\/80 {
  border-color: rgb(255 255 255 / 0.8);
}
.border-b-surface-200 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--color-surface-200) / var(--tw-border-opacity, 1));
}
.border-b-surface-500 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--color-surface-500) / var(--tw-border-opacity, 1));
}
.border-l-amber-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-l-primary-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-primary-400) / var(--tw-border-opacity, 1));
}
.border-l-primary-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-primary-600) / var(--tw-border-opacity, 1));
}
.border-l-surface-300 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-300) / var(--tw-border-opacity, 1));
}
.border-l-warning-300 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-300) / var(--tw-border-opacity, 1));
}
.border-l-warning-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-400) / var(--tw-border-opacity, 1));
}
.border-l-white\/40 {
  border-left-color: rgb(255 255 255 / 0.4);
}
.border-t-primary-300 {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--color-primary-300) / var(--tw-border-opacity, 1));
}
.border-t-surface-100 {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--color-surface-100) / var(--tw-border-opacity, 1));
}
.border-t-white\/40 {
  border-top-color: rgb(255 255 255 / 0.4);
}
.bg-\[\#edf2f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#edf3f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 243 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#edf4ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 244 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef2f0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef2f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef3f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef4f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 244 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eff5f1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 245 241 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f1f6f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 246 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3eee7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 238 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3f7f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 247 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4efe7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 239 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f3ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 243 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f8f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f8f1e6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 241 230 / var(--tw-bg-opacity, 1));
}
.bg-\[\#faf4ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 244 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbf3e7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 243 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffdfa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 253 250 / var(--tw-bg-opacity, 1));
}
.bg-accent-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-50) / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/30 {
  background-color: rgb(255 251 235 / 0.3);
}
.bg-amber-50\/40 {
  background-color: rgb(255 251 235 / 0.4);
}
.bg-amber-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-error-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-100) / var(--tw-bg-opacity, 1));
}
.bg-error-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-400) / var(--tw-bg-opacity, 1));
}
.bg-error-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-50) / var(--tw-bg-opacity, 1));
}
.bg-error-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity, 1));
}
.bg-error-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-600) / var(--tw-bg-opacity, 1));
}
.bg-error-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-700) / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-help-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-help-50) / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-inflow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-inflow-100) / var(--tw-bg-opacity, 1));
}
.bg-inflow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-inflow-50) / var(--tw-bg-opacity, 1));
}
.bg-inflow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-inflow-500) / var(--tw-bg-opacity, 1));
}
.bg-info-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-100) / var(--tw-bg-opacity, 1));
}
.bg-info-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-50) / var(--tw-bg-opacity, 1));
}
.bg-outflow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-outflow-100) / var(--tw-bg-opacity, 1));
}
.bg-outflow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-outflow-200) / var(--tw-bg-opacity, 1));
}
.bg-outflow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-outflow-600) / var(--tw-bg-opacity, 1));
}
.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-100) / var(--tw-bg-opacity, 1));
}
.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity, 1));
}
.bg-primary-50\/40 {
  background-color: rgb(var(--color-primary-50) / 0.4);
}
.bg-primary-50\/50 {
  background-color: rgb(var(--color-primary-50) / 0.5);
}
.bg-primary-50\/60 {
  background-color: rgb(var(--color-primary-50) / 0.6);
}
.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity, 1));
}
.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity, 1));
}
.bg-primary-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-700) / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-success-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-100) / var(--tw-bg-opacity, 1));
}
.bg-success-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-50) / var(--tw-bg-opacity, 1));
}
.bg-success-50\/50 {
  background-color: rgb(var(--color-success-50) / 0.5);
}
.bg-success-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity, 1));
}
.bg-surface-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity, 1));
}
.bg-surface-100\/90 {
  background-color: rgb(var(--color-surface-100) / 0.9);
}
.bg-surface-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity, 1));
}
.bg-surface-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300) / var(--tw-bg-opacity, 1));
}
.bg-surface-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity, 1));
}
.bg-surface-50\/50 {
  background-color: rgb(var(--color-surface-50) / 0.5);
}
.bg-surface-50\/60 {
  background-color: rgb(var(--color-surface-50) / 0.6);
}
.bg-surface-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-700) / var(--tw-bg-opacity, 1));
}
.bg-surface-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-800) / var(--tw-bg-opacity, 1));
}
.bg-surface-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity, 1));
}
.bg-surface-900\/50 {
  background-color: rgb(var(--color-surface-900) / 0.5);
}
.bg-surface-900\/75 {
  background-color: rgb(var(--color-surface-900) / 0.75);
}
.bg-surface-900\/80 {
  background-color: rgb(var(--color-surface-900) / 0.8);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-warning-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-100) / var(--tw-bg-opacity, 1));
}
.bg-warning-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-400) / var(--tw-bg-opacity, 1));
}
.bg-warning-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-50) / var(--tw-bg-opacity, 1));
}
.bg-warning-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-600) / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-\[linear-gradient\(180deg\2c \#edf1f7_0\%\2c \#fafbfd_100\%\)\] {
  background-image: linear-gradient(180deg,#edf1f7 0%,#fafbfd 100%);
}
.bg-\[linear-gradient\(180deg\2c \#eef5f0_0\%\2c \#f7faf8_100\%\)\] {
  background-image: linear-gradient(180deg,#eef5f0 0%,#f7faf8 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f0f5f7_0\%\2c \#fafcfc_100\%\)\] {
  background-image: linear-gradient(180deg,#f0f5f7 0%,#fafcfc 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f3eadb_0\%\2c \#f8f2e8_38\%\2c \#fdfbf8_72\%\2c \#ffffff_100\%\)\] {
  background-image: linear-gradient(180deg,#f3eadb 0%,#f8f2e8 38%,#fdfbf8 72%,#ffffff 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f3efe9_0\%\2c \#fbfaf8_100\%\)\] {
  background-image: linear-gradient(180deg,#f3efe9 0%,#fbfaf8 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f4f6f7_0\%\2c \#fbfcfc_100\%\)\] {
  background-image: linear-gradient(180deg,#f4f6f7 0%,#fbfcfc 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f6efe2_0\%\2c \#fcfaf6_100\%\)\] {
  background-image: linear-gradient(180deg,#f6efe2 0%,#fcfaf6 100%);
}
.bg-\[linear-gradient\(180deg\2c \#faf3e8_0\%\2c \#fdfbf8_100\%\)\] {
  background-image: linear-gradient(180deg,#faf3e8 0%,#fdfbf8 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(232\2c 239\2c 236\2c 0\.94\)_0\%\2c rgba\(238\2c 242\2c 240\2c 1\)_100\%\)\] {
  background-image: linear-gradient(180deg,rgba(232,239,236,0.94) 0%,rgba(238,242,240,1) 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(241\2c 245\2c 244\2c 0\.92\)_0\%\2c rgba\(247\2c 248\2c 248\2c 1\)_100\%\)\] {
  background-image: linear-gradient(180deg,rgba(241,245,244,0.92) 0%,rgba(247,248,248,1) 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(246\2c 240\2c 230\2c 0\.94\)_0\%\2c rgba\(247\2c 243\2c 234\2c 1\)_100\%\)\] {
  background-image: linear-gradient(180deg,rgba(246,240,230,0.94) 0%,rgba(247,243,234,1) 100%);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#edf3f2\]\/85 {
  --tw-gradient-from: rgb(237 243 242 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(237 243 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#edf4f4\]\/85 {
  --tw-gradient-from: rgb(237 244 244 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(237 244 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#f5efe6\]\/80 {
  --tw-gradient-from: rgb(245 239 230 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 239 230 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#f5f0e6\]\/85 {
  --tw-gradient-from: rgb(245 240 230 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 240 230 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-100 {
  --tw-gradient-from: rgb(var(--color-accent-100) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-accent-100) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-inflow-50 {
  --tw-gradient-from: rgb(var(--color-inflow-50) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-inflow-50) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-100 {
  --tw-gradient-from: rgb(var(--color-primary-100) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary-100) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --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);
}
.from-50\% {
  --tw-gradient-from-position: 50%;
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-outflow-100 {
  --tw-gradient-to: rgb(var(--color-outflow-100) / 1) var(--tw-gradient-to-position);
}
.to-primary-300 {
  --tw-gradient-to: rgb(var(--color-primary-300) / 1) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-50\% {
  --tw-gradient-to-position: 50%;
}
.\!object-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.\!object-top {
  -o-object-position: top !important;
     object-position: top !important;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.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-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.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;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-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-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[5\.25rem\] {
  padding-left: 5.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.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-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.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;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.align-\[-1px\] {
  vertical-align: -1px;
}
.font-mono {
  font-family: Geist Mono, monospace;
}
.font-sans {
  font-family: Inter, InterVariable, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.\!text-\[13px\] {
  font-size: 13px !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.68rem\] {
  font-size: 0.68rem;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}
.text-\[0\.95rem\] {
  font-size: 0.95rem;
}
.text-\[1\.95rem\] {
  font-size: 1.95rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.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;
}
.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 !important;
}
.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-9 {
  line-height: 2.25rem;
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-\[1\.2\] {
  line-height: 1.2;
}
.leading-\[18px\] {
  line-height: 18px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#4d6a58\] {
  --tw-text-opacity: 1;
  color: rgb(77 106 88 / var(--tw-text-opacity, 1));
}
.text-\[\#5f7680\] {
  --tw-text-opacity: 1;
  color: rgb(95 118 128 / var(--tw-text-opacity, 1));
}
.text-\[\#5f7f6b\] {
  --tw-text-opacity: 1;
  color: rgb(95 127 107 / var(--tw-text-opacity, 1));
}
.text-\[\#60708c\] {
  --tw-text-opacity: 1;
  color: rgb(96 112 140 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5f3e\] {
  --tw-text-opacity: 1;
  color: rgb(122 95 62 / var(--tw-text-opacity, 1));
}
.text-\[\#7c7265\] {
  --tw-text-opacity: 1;
  color: rgb(124 114 101 / var(--tw-text-opacity, 1));
}
.text-\[\#8d7350\] {
  --tw-text-opacity: 1;
  color: rgb(141 115 80 / var(--tw-text-opacity, 1));
}
.text-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-600) / var(--tw-text-opacity, 1));
}
.text-accent-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-700) / var(--tw-text-opacity, 1));
}
.text-accent-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-800) / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-error-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-400) / var(--tw-text-opacity, 1));
}
.text-error-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-500) / var(--tw-text-opacity, 1));
}
.text-error-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-600) / var(--tw-text-opacity, 1));
}
.text-error-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-700) / var(--tw-text-opacity, 1));
}
.text-error-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-800) / var(--tw-text-opacity, 1));
}
.text-error-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-900) / 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-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-help-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-500) / var(--tw-text-opacity, 1));
}
.text-help-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-600) / var(--tw-text-opacity, 1));
}
.text-help-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-700) / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-inflow-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-inflow-700) / var(--tw-text-opacity, 1));
}
.text-info-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-500) / var(--tw-text-opacity, 1));
}
.text-info-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-600) / var(--tw-text-opacity, 1));
}
.text-info-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-700) / var(--tw-text-opacity, 1));
}
.text-info-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-800) / var(--tw-text-opacity, 1));
}
.text-info-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-900) / var(--tw-text-opacity, 1));
}
.text-outflow-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-outflow-700) / var(--tw-text-opacity, 1));
}
.text-outflow-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-outflow-800) / var(--tw-text-opacity, 1));
}
.text-outflow-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-outflow-900) / var(--tw-text-opacity, 1));
}
.text-primary-100 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-100) / var(--tw-text-opacity, 1));
}
.text-primary-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-200) / var(--tw-text-opacity, 1));
}
.text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-500) / var(--tw-text-opacity, 1));
}
.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
}
.text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}
.text-primary-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity, 1));
}
.text-primary-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-900) / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-success-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-500) / var(--tw-text-opacity, 1));
}
.text-success-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-600) / var(--tw-text-opacity, 1));
}
.text-success-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-700) / var(--tw-text-opacity, 1));
}
.text-success-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-800) / var(--tw-text-opacity, 1));
}
.text-success-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-900) / var(--tw-text-opacity, 1));
}
.text-surface-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-300) / var(--tw-text-opacity, 1));
}
.text-surface-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}
.text-surface-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}
.text-surface-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600) / var(--tw-text-opacity, 1));
}
.text-surface-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700) / var(--tw-text-opacity, 1));
}
.text-surface-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800) / var(--tw-text-opacity, 1));
}
.text-surface-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-warning-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-500) / var(--tw-text-opacity, 1));
}
.text-warning-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-600) / var(--tw-text-opacity, 1));
}
.text-warning-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-700) / var(--tw-text-opacity, 1));
}
.text-warning-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-800) / var(--tw-text-opacity, 1));
}
.text-warning-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-900) / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.decoration-primary-200 {
  text-decoration-color: rgb(var(--color-primary-200) / 1);
}
.decoration-primary-300 {
  text-decoration-color: rgb(var(--color-primary-300) / 1);
}
.decoration-warning-300 {
  text-decoration-color: rgb(var(--color-warning-300) / 1);
}
.decoration-white\/25 {
  text-decoration-color: rgb(255 255 255 / 0.25);
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-\[0_18px_38px_rgba\(91\2c 74\2c 43\2c 0\.10\)\] {
  --tw-shadow: 0 18px 38px rgba(91,74,43,0.10);
  --tw-shadow-colored: 0 18px 38px 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-\[0_20px_40px_rgba\(28\2c 25\2c 23\2c 0\.08\)\] {
  --tw-shadow: 0 20px 40px rgba(28,25,23,0.08);
  --tw-shadow-colored: 0 20px 40px 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-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.8\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  --tw-shadow-colored: inset 0 1px 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);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-\[\#edf3f3\]\/70 {
  --tw-shadow-color: rgb(237 243 243 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[\#eef3ef\]\/60 {
  --tw-shadow-color: rgb(238 243 239 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[\#f5eee4\]\/70 {
  --tw-shadow-color: rgb(245 238 228 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-600\/50 {
  --tw-shadow-color: rgb(var(--color-primary-600) / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.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-0 {
  --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(0px + 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-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);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-accent-200\/60 {
  --tw-ring-color: rgb(var(--color-accent-200) / 0.6);
}
.ring-accent-600\/20 {
  --tw-ring-color: rgb(var(--color-accent-600) / 0.2);
}
.ring-amber-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
}
.ring-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}
.ring-amber-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}
.ring-amber-600\/20 {
  --tw-ring-color: rgb(217 119 6 / 0.2);
}
.ring-amber-600\/30 {
  --tw-ring-color: rgb(217 119 6 / 0.3);
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-blue-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-blue-600\/20 {
  --tw-ring-color: rgb(37 99 235 / 0.2);
}
.ring-error-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-200) / var(--tw-ring-opacity, 1));
}
.ring-error-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-300) / var(--tw-ring-opacity, 1));
}
.ring-error-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-500) / var(--tw-ring-opacity, 1));
}
.ring-error-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-600) / var(--tw-ring-opacity, 1));
}
.ring-error-600\/20 {
  --tw-ring-color: rgb(var(--color-error-600) / 0.2);
}
.ring-error-700\/20 {
  --tw-ring-color: rgb(var(--color-error-700) / 0.2);
}
.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-gray-900\/10 {
  --tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-green-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity, 1));
}
.ring-green-600\/20 {
  --tw-ring-color: rgb(22 163 74 / 0.2);
}
.ring-inflow-700\/20 {
  --tw-ring-color: rgb(var(--color-inflow-700) / 0.2);
}
.ring-info-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-100) / var(--tw-ring-opacity, 1));
}
.ring-info-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-200) / var(--tw-ring-opacity, 1));
}
.ring-info-200\/60 {
  --tw-ring-color: rgb(var(--color-info-200) / 0.6);
}
.ring-info-500\/20 {
  --tw-ring-color: rgb(var(--color-info-500) / 0.2);
}
.ring-info-600\/20 {
  --tw-ring-color: rgb(var(--color-info-600) / 0.2);
}
.ring-info-700\/20 {
  --tw-ring-color: rgb(var(--color-info-700) / 0.2);
}
.ring-outflow-500\/20 {
  --tw-ring-color: rgb(var(--color-outflow-500) / 0.2);
}
.ring-primary-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-100) / var(--tw-ring-opacity, 1));
}
.ring-primary-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-200) / var(--tw-ring-opacity, 1));
}
.ring-primary-200\/60 {
  --tw-ring-color: rgb(var(--color-primary-200) / 0.6);
}
.ring-primary-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-300) / var(--tw-ring-opacity, 1));
}
.ring-primary-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-400) / var(--tw-ring-opacity, 1));
}
.ring-primary-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-500) / var(--tw-ring-opacity, 1));
}
.ring-primary-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}
.ring-primary-600\/20 {
  --tw-ring-color: rgb(var(--color-primary-600) / 0.2);
}
.ring-primary-700\/20 {
  --tw-ring-color: rgb(var(--color-primary-700) / 0.2);
}
.ring-red-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1));
}
.ring-red-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.ring-red-600\/20 {
  --tw-ring-color: rgb(220 38 38 / 0.2);
}
.ring-success-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-success-100) / var(--tw-ring-opacity, 1));
}
.ring-success-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-success-200) / var(--tw-ring-opacity, 1));
}
.ring-success-600\/20 {
  --tw-ring-color: rgb(var(--color-success-600) / 0.2);
}
.ring-success-700\/20 {
  --tw-ring-color: rgb(var(--color-success-700) / 0.2);
}
.ring-surface-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
}
.ring-surface-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-300) / var(--tw-ring-opacity, 1));
}
.ring-surface-500\/20 {
  --tw-ring-color: rgb(var(--color-surface-500) / 0.2);
}
.ring-surface-600\/20 {
  --tw-ring-color: rgb(var(--color-surface-600) / 0.2);
}
.ring-violet-700\/20 {
  --tw-ring-color: rgb(109 40 217 / 0.2);
}
.ring-warning-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-100) / var(--tw-ring-opacity, 1));
}
.ring-warning-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-200) / var(--tw-ring-opacity, 1));
}
.ring-warning-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-300) / var(--tw-ring-opacity, 1));
}
.ring-warning-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-600) / var(--tw-ring-opacity, 1));
}
.ring-warning-600\/20 {
  --tw-ring-color: rgb(var(--color-warning-600) / 0.2);
}
.ring-warning-700\/20 {
  --tw-ring-color: rgb(var(--color-warning-700) / 0.2);
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.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);
}
.blur-2xl {
  --tw-blur: blur(40px);
  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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.invert {
  --tw-invert: invert(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-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-shadow {
  transition-property: box-shadow;
  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-100 {
  transition-duration: 100ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/*
   * Horizontal overflow is for compact TAB ROWS and code samples only. It is NOT the
   * recipe for a wide table or list: Owner rule (#2909) — nothing may scroll or clip
   * sideways at 320-430px; a table reflows instead (`table-reflow`, below). Tailwind's
   * `overflow-x-auto` leaves the other axis as `auto`, which lets a one-pixel decoration
   * overflow turn into a browser-native vertical scrollbar. These containers are not
   * vertically constrained, so keep their normal vertical flow while making the
   * fallback explicitly horizontal-only.
   */
.overflow-x-auto {
    overflow-y: hidden;
  }
.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}
.\[start\:end\] {
  start: end;
}

/* Shared delayed HTMX loading indicator (FTR-SPIN-001). */
.npl-loading-spinner {
  position: fixed;
  z-index: 30;
  display: flex;
  width: 1.875rem;
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.npl-loading-spinner[hidden] {
  display: none;
}

.npl-loading-spinner__ring {
  width: 100%;
  height: 100%;
  border: 2px solid rgb(var(--color-surface-200));
  border-top-color: rgb(var(--color-surface-500));
  border-radius: 9999px;
  animation: npl-loading-spinner-rotation 800ms linear infinite;
}

@keyframes npl-loading-spinner-rotation {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .npl-loading-spinner__ring { animation: none; }
}

/*
 * NP Ledger — Design Tokens
 *
 * All colors are defined as CSS custom properties using space-separated
 * RGB channels (e.g., "240 253 250") so Tailwind's opacity modifier
 * syntax (e.g., bg-primary-50/40) works correctly.
 *
 * In inline styles or custom CSS, wrap with rgb():
 *   background-color: rgb(var(--color-primary-600));
 *
 * Palette: warm teal/green primary, amber/gold accent.
 */

/*
 * NP Ledger — Marketing Component Classes
 *
 * Shared, deterministic classes for public marketing pages.
 * These compile reliably because they are literal in this CSS file.
 */

/* --- Sticky action bar (driven by static/js/sticky_action_bar.js, #2828) ---
   Carries an opted-in form's own primary button while that button is off-screen. */
.sticky-action-bar {
  background-color: #fff;
  border-top: 1px solid rgb(var(--color-surface-200));
  box-shadow: 0 -4px 12px -2px rgb(0 0 0 / 0.08);
  /* Respect the iOS home-indicator safe area so buttons aren't clipped. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* WCAG 2.2 SC 2.4.11 (technique C43): a focused field must never sit under the bar. The script
   sets --sticky-bar-h to the bar's measured height while it is showing, and 0px otherwise, so
   scrollIntoView-on-focus leaves exactly the bar's height clear at the bottom. */
html {
  scroll-padding-bottom: var(--sticky-bar-h, 0px);
  /* The sticky app bar (components/app_bar.html, h-14) covers the top 56px; a revealed error
     (static/js/reveal_first_error.js, #3417) or a focused field must never land under it. */
  scroll-padding-top: 3.5rem;
}
/* A page holding an opted-in form reserves the room up front: the bar is not showing yet when the
   first Tab moves to a field below the fold, and 0 there would land the field under the bar. */
html:has(form[data-sticky-action-bar]) {
  scroll-padding-bottom: var(--sticky-bar-h, 4.5rem);
}

/* While the bar is open, lift the bottom-corner FABs (AI Help, Beta feedback) clear of it. */
[data-bottom-fab] {
  transition: bottom 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-bottom-fab] {
    transition: none;
  }
}
body.sticky-bar-open [data-bottom-fab] {
  bottom: calc(1.5rem + var(--sticky-bar-h, 4.5rem));
}

/* The other bottom-right popups would otherwise sit on the bar's Save button: the htmx error
   toast (z-50, bottom-4 right-4) and Klaro's cookie notice (z-index 999, bottom 20px right 20px,
   only rendered when GA4 is configured). Last ~bar-height of the page
   gets room in <main> so the end of a form is never hidden behind the bar. */
body.sticky-bar-open #htmx-error-toast-container {
  bottom: calc(1rem + var(--sticky-bar-h, 4.5rem));
}
body.sticky-bar-open .klaro .cookie-notice:not(.cookie-modal-notice) {
  bottom: var(--sticky-bar-h, 4.5rem);   /* below 1024px Klaro pins a full-width banner at 0 */
}
@media (min-width: 1024px) {
  body.sticky-bar-open .klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: calc(20px + var(--sticky-bar-h, 4.5rem));
  }
}
body.sticky-bar-open #main-content {
  padding-bottom: var(--sticky-bar-h, 4.5rem);
}

/* Room at the bottom of every page for the bottom-corner FABs (#3033). They are position:fixed
   (AI Help bottom-6 right-6, Beta feedback bottom-left), so at full scroll they sit over whatever
   is last. The page ends in the footer, so the footer's bottom padding is the FAB's height plus
   its gap: bottom-6 (1.5rem) + the chip (py-3, a 1.25rem line, two 1px borders = 2.875rem),
   rounded up. The element selector beats the footer's own `py-4` utility. While the sticky bar is
   open the FABs lift by the bar's height and #main-content already reserves the same amount. */
body:has([data-bottom-fab]) footer[data-page-end] {
  padding-bottom: 4.5rem;
}
/* While the sticky bar is open the FABs sit that much higher (above), so the footer's last lines
   would end up under them at full scroll: add the bar's height to the reserve (#3282). */
body.sticky-bar-open:has([data-bottom-fab]) footer[data-page-end] {
  padding-bottom: calc(4.5rem + var(--sticky-bar-h, 4.5rem));
}

/* Forced colours (Windows High Contrast) drops box-shadow and repaints every background, so what
   marked the bar's edge is gone but its 1px border. Save has no border of its own either, so it
   would read as loose text. Give both a plain system-colour edge (#2904 section G). */
@media (forced-colors: active) {
  .sticky-action-bar {
    border-top: 2px solid CanvasText;
  }
  #sticky-action-submit {
    border: 2px solid ButtonText;
  }
}

/* 400% zoom turns a 1280x720 window into 320x180 CSS pixels, where the 52px bar is over a quarter
   of the screen. Tighten the padding there (the button stays above WCAG 2.5.8's 24px target); a
   landscape phone is just as short and gets the same slim bar. Normal heights are untouched. */
@media (max-height: 320px) {
  .sticky-action-bar > div {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
  #sticky-action-submit,
  #sticky-action-cancel {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

/* --- Wizard CTA validity state (driven by static/js/wizard_cta_state.js) ---
   The onboarding wizard's primary buttons render teal from the server and stay
   that way with JS off; this rule is the ONLY thing that dims one, and it is
   applied by the script when the step's `required` fields aren't satisfied yet.
   So the button's colour answers "will this work if I click it?" (#1716).

   Deliberately plain CSS rather than @layer components: these must beat the
   `bg-primary-600` / `text-white` / `hover:bg-primary-500` utilities sitting on
   the same element, and a components-layer rule loses to a utility. Two class
   selectors win on specificity; the :hover rule matches the utility's
   specificity and wins on source order (it is emitted after @tailwind utilities). */
.btn-cta.is-invalid {
  background-color: rgb(var(--color-surface-100));
  color: rgb(var(--color-surface-600));
  box-shadow: inset 0 0 0 1px rgb(var(--color-surface-300));
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-cta.is-invalid:hover {
  background-color: rgb(var(--color-surface-200));
  color: rgb(var(--color-surface-700));
}

/* --- To Record's pickers: amber until she answers (static/js/to_record.js, #3096 PR B) ---
   TomSelect draws its own box over each select, and its `.ts-control` border beat the
   `border-warning-600` the script puts on that box, so the amber never showed (Owner walk:
   a pre-fill left unconfirmed was too easy to miss). It must out-rank the `!important`
   grey border in components/_tomselect_assets.html, which loads after this file; a
   focused picker keeps its teal ring. Scoped to To Record: the onboarding worktables
   were walked as they draw now. */
[data-to-record] .ts-wrapper.single:not(.focus) .ts-control.border-warning-600 {
  border-color: rgb(var(--color-warning-600)) !important;
}

/* --- Reduced motion (FTR-WCAG-001 Phase 3, WCAG 2.3.3) ---
   Collapse all CSS transitions/animations to near-zero duration for users
   who've set the OS-level "reduce motion" preference, instead of hunting
   down every transition-* / animate-* utility class individually. */
@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;
  }
}

/* ---------------------------------------------------------------------------
   Transactions list rows (#2929). Owner-approved design, walked as a mockup.

   The list changes shape by the width of ITS OWN container (a CSS container
   query), not the screen: the sidebar takes 16rem at xl, so a 1024px and a
   1280px screen both leave a 960px content area.

     >= 880px   one line per transaction: Date Type [Ref] [Name] Description [Fund] Amount (#3446)
     720-879px  stacked pairs: Date over Type (over Ref) | Name over Description | Fund | Amount
     <  720px   the card list (.txn-cards)

   Rows are CSS grid, so a row can never be wider than its container: there is
   nothing to scroll sideways at any width. Gaps and padding scale with the
   container width. A cell wraps to at most 3 lines (2 on a card), then an
   ellipsis, and carries its full text in `title`. The shared fold-row table
   (components/fold_row_table.html) is not used here.

   The Transactions list (`.txn-by-name`, #3446) has its DOM in the visual order -
   Date Type Ref | Name Description | Fund Amount - so it needs no `order`. The other
   pages that borrow these rows (import confirm, clearing, Not in To Record) keep the
   older Fund-first order, DOM date, type, fund, name, reference, description, amount,
   with `order` setting the wide order. The pairs are `display: contents` when wide.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Banners (#3219). One wrapping row for every banner above the page: each `banner` is sized to its
   own text and grows to fill its line, so two share a line only when both fit and the next drops to
   its own line. `banner-inner` carries the width and the gutters. (The extra right gutter for the
   floating account button went with the button, which now sits in the app bar: #3277.) A banner
   sets only its own colours.
   `banner-slot` is for a wrapper that holds banners (an HTMX target, a list): it is not a box, so
   what it holds takes part in the row.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   One look for a banner's parts (#3230). The icon is the tone's 20px solid glyph (the same paths
   `{% notice %}` draws) in the tone's -800 ink; the one action on the right is NOT the page's main
   button, so it is the muted secondary (white, grey ring, page-copy grey label as in the page header's secondary button: ux-standard rule 12, never teal); dismiss
   is the corner X. A banner still sets its own tone colours (ink on the icon and on the X).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Page title (#3228). The one look for a page's <h1>. `components/page_header.html` and the wizard's
   `onboarding/_step_heading.html` both use it; a page that must draw its own title uses it too, and
   never spells these utilities out again (85 templates had by the time this was written).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The summary strip (#3546, FTR-SUMFIG-001). Pages never write this by hand: `{% summary_strip %}` /
   `{% summary_figure %}` (accounting/templatetags/summary_strip.py) render components/summary_strip.html.

   One joined strip. Label above the value, in the table-column-header style; the value is mono and
   semibold, never bold; colour only for a status (error / warning / success). Each cell takes three rows
   of the strip's grid (label / value / sub-line) through `subgrid`, so values line up across a row even
   when one label wraps. `grid-cols-1` on the cell is REQUIRED: without it the cell's column grows to its
   content and the overflow check in static/js/summary_strip.js never sees an overflow.

   Size: --ss-v / --ss-l are set by summary_strip.js, which steps the whole strip down 20 -> 18 -> 16 ->
   14px (label 12 -> 11) until nothing clips, then falls to two columns. A phone starts in two columns.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The org's mark and the person's circle in the app bar (#3277, Owner-approved).
   Drawn by components/_org_mark.html ({% org_mark %}) and components/_account_badge.html.
   Outside @layer on purpose: `org-tint-N` is built from the org's id, so the content scan
   never sees the literal class.

   A logo is 32px tall in the bar (24px in a 48px slot in the org menu):
     square (aspect 0.8-1.25)  a white tile with a 1px ring
     wide   (aspect > 1.25)    the same tile; width follows the logo up to 3:1 (80px in the phone bar)
     tall   (aspect < 0.8)     the same tile, square, so the name never shifts
   No logo, or one that fails to load: the stand-in, a rounded square (never a circle: a circle
   means a person) with two initials in one of eight calm tints. Never teal (NP Ledger), red,
   amber or green (alerts). Every tint is a -100 ground with -800 ink, 4.5:1 or better.
   --------------------------------------------------------------------------- */
.org-mark { --m: 2rem; display: inline-flex; flex-shrink: 0; align-items: center; height: var(--m); }
.org-mark--menu { --m: 1.5rem; width: 3rem; } /* one slot width, so the names in the list line up */
.org-mark [hidden] { display: none; }
.org-mark-logo, .org-mark-standin { display: inline-flex; align-items: center; justify-content: center; height: var(--m); }
.org-mark-logo img { display: block; height: var(--m); width: auto; -o-object-fit: contain; object-fit: contain; }
.org-mark--square { width: var(--m); overflow: hidden; border-radius: calc(var(--m) * .22); background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--color-surface-200)); }
.org-mark--square img { width: 100%; height: 100%; padding: 2px; }
.org-mark--wide img { max-width: calc(var(--m) * 3); }
.org-mark--bar .org-mark--wide img { max-width: 80px; }
.org-mark--menu .org-mark--wide img { max-width: 3rem; }
/* Under 360px the bar has about 57px left for the org: a wide logo caps at 56px and the ⌄ goes (the
   mark is still the button that opens the org menu). */
@media (max-width: 359px) {
  .org-mark--bar .org-mark--wide img { max-width: 56px; }
  #app-bar-org [data-menu-toggle] > svg { display: none; }
}
@media (min-width: 1024px) { .org-mark--bar .org-mark--wide img { max-width: 96px; } }
.org-mark--tall { width: var(--m); }
.org-mark--tall img { max-width: 100%; }
/* The frame is warm grey (Owner's walk), and most logos are uploaded on white, so wide and tall
   logos sit on the same white tile as square ones instead of showing their own white box. */
.org-mark--wide, .org-mark--tall { background: #fff; border-radius: calc(var(--m) * .22); box-shadow: inset 0 0 0 1px rgb(var(--color-surface-200)); }
.org-mark--wide { padding: 0 4px; }
.org-mark--wide img, .org-mark--tall img { height: calc(var(--m) - 4px); }
.org-mark-standin { width: var(--m); border-radius: calc(var(--m) * .22); font-weight: 700; font-size: calc(var(--m) * .38); line-height: 1; letter-spacing: .02em; }
.org-tint-0 { background: #dbeafe; color: #1e40af; } /* blue */
.org-tint-1 { background: #e0e7ff; color: #3730a3; } /* indigo */
.org-tint-2 { background: #ede9fe; color: #5b21b6; } /* violet */
.org-tint-3 { background: #fae8ff; color: #86198f; } /* plum */
.org-tint-4 { background: #e0f2fe; color: #075985; } /* sky */
.org-tint-5 { background: #e2e8f0; color: #1e293b; } /* slate */
.org-tint-6 { background: #efe6dd; color: #6b3f22; } /* clay */
.org-tint-7 { background: #f3e8ef; color: #701a4f; } /* mauve */

/* The org's name in the app bar: one line, a few shades softer than the page title so the page
   title stays the darkest text on screen. From 1024px it is cut with an ellipsis when it must be;
   below that the bar's script shows it only when it fits whole (#app-bar-org[data-org-mode]). */
.app-bar-org-name { display: none; white-space: nowrap; }
#app-bar-org[data-org-mode="named"] { justify-content: flex-start; } /* the script sets the left margin */
#app-bar-org[data-org-mode="named"] [data-org-switcher] { flex-shrink: 0; } /* measured at its full width */
#app-bar-org[data-org-mode="named"] .app-bar-org-name { display: block; }
@media (min-width: 1024px) { .app-bar-org-name { display: block; overflow: hidden; text-overflow: ellipsis; } }

/* The person's circle: initials, or a person outline when there is no name. Neutral, turning
   primary on hover and focus of the button around it (`group`). */
.account-badge { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: #fff; color: rgb(var(--color-surface-700)); box-shadow: inset 0 0 0 1px rgb(var(--color-surface-200)); font-weight: 600; line-height: 1; }
.account-badge--bar { width: 2rem; height: 2rem; font-size: .78rem; }
.account-badge--bar svg { width: 1.125rem; height: 1.125rem; }
.account-badge--small { width: 1.25rem; height: 1.25rem; font-size: .5625rem; }
.account-badge--small svg { width: .75rem; height: .75rem; }
.group:hover .account-badge, .group:focus-visible .account-badge { background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-700)); box-shadow: inset 0 0 0 1px rgb(var(--color-primary-300)); }
.group:focus-visible .account-badge { outline: 2px solid rgb(var(--color-primary-600)); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Walk me through it landing page (FTR-WALK-003 #3409). A grid of cards, 3 across when the content
   is wide enough, 2 at tablet width, 1 on a phone, and never past 3: a column is at least 280px
   AND at least a third of the row, so a wide screen cannot squeeze in a fourth. Plain CSS because
   Tailwind's arbitrary-value syntax cannot hold this expression legibly. The Owner accepted the
   full-width grid, treating the page as a list under ux-standard rule 14.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Side-menu wayfinding (#3506). Each of the four menu sections has a 3px stripe down its left edge
   and a section name in the same hue, dark. The name is pinned to the top of the menu while its
   section scrolls past, so she never has to scroll back up to find out where she is. The stripes
   are borders, so forced-colours mode keeps them (as one system colour) and the names still label
   the sections. The tones mean "which part of the menu" and never a status (ux-standard rule 20).
   --nav-px is the menu box's side padding (1.5rem; nav.html narrows it in rail mode).
   --------------------------------------------------------------------------- */

@media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .empty\:hidden:emptytr,
    table.table-reflow .empty\:hidden:emptytbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .empty\:hidden:emptytr,
    table.table-reflow .empty\:hidden:emptytbody {
      display: none;
    }
  }

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .empty\:hidden:emptytr,
    table.table-reflow.reflow-until-xl .empty\:hidden:emptytbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .empty\:hidden:emptytr,
    table.table-reflow.reflow-until-xl .empty\:hidden:emptytbody {
      display: none;
    }
  }

@media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group[open] .group-open\:hiddentr,
    table.table-reflow .group[open] .group-open\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group[open] .group-open\:hiddentr,
    table.table-reflow .group[open] .group-open\:hiddentbody {
      display: none;
    }
  }

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group[open] .group-open\:hiddentr,
    table.table-reflow.reflow-until-xl .group[open] .group-open\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group[open] .group-open\:hiddentr,
    table.table-reflow.reflow-until-xl .group[open] .group-open\:hiddentbody {
      display: none;
    }
  }

@media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentr,
    table.table-reflow .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentr,
    table.table-reflow .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentr,
    table.table-reflow .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentr,
    table.table-reflow .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentbody {
      display: none;
    }
  }

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentr,
    table.table-reflow.reflow-until-xl .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentr,
    table.table-reflow.reflow-until-xl .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentr,
    table.table-reflow.reflow-until-xl .group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hiddentbody {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentr,
    table.table-reflow.reflow-until-xl .group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hiddentbody {
      display: none;
    }
  }

@media (min-width: 420px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.line1\:hidden,
    table.table-reflow tbody.line1\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.line1\:hidden,
    table.table-reflow tbody.line1\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.line1\:hidden,
    table.table-reflow.reflow-until-xl tbody.line1\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.line1\:hidden,
    table.table-reflow.reflow-until-xl tbody.line1\:hidden {
      display: none;
    }
  }
}

@media (min-width: 640px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.sm\:hidden,
    table.table-reflow tbody.sm\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.sm\:hidden,
    table.table-reflow tbody.sm\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.sm\:hidden,
    table.table-reflow.reflow-until-xl tbody.sm\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.sm\:hidden,
    table.table-reflow.reflow-until-xl tbody.sm\:hidden {
      display: none;
    }
  }
}

@media (min-width: 768px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.md\:hidden,
    table.table-reflow tbody.md\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.md\:hidden,
    table.table-reflow tbody.md\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.md\:hidden,
    table.table-reflow.reflow-until-xl tbody.md\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.md\:hidden,
    table.table-reflow.reflow-until-xl tbody.md\:hidden {
      display: none;
    }
  }
}

@media (min-width: 870px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.tbl\:hidden,
    table.table-reflow tbody.tbl\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.tbl\:hidden,
    table.table-reflow tbody.tbl\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.tbl\:hidden,
    table.table-reflow.reflow-until-xl tbody.tbl\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.tbl\:hidden,
    table.table-reflow.reflow-until-xl tbody.tbl\:hidden {
      display: none;
    }
  }
}

@media (min-width: 1024px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.lg\:hidden,
    table.table-reflow tbody.lg\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.lg\:hidden,
    table.table-reflow tbody.lg\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.lg\:hidden,
    table.table-reflow.reflow-until-xl tbody.lg\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.lg\:hidden,
    table.table-reflow.reflow-until-xl tbody.lg\:hidden {
      display: none;
    }
  }
}

@media (min-width: 1280px) {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.xl\:hidden,
    table.table-reflow tbody.xl\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.xl\:hidden,
    table.table-reflow tbody.xl\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.xl\:hidden,
    table.table-reflow.reflow-until-xl tbody.xl\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.xl\:hidden,
    table.table-reflow.reflow-until-xl tbody.xl\:hidden {
      display: none;
    }
  }
}

@media print {
  @media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.print\:hidden,
    table.table-reflow tbody.print\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow tr.print\:hidden,
    table.table-reflow tbody.print\:hidden {
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.print\:hidden,
    table.table-reflow.reflow-until-xl tbody.print\:hidden {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl tr.print\:hidden,
    table.table-reflow.reflow-until-xl tbody.print\:hidden {
      display: none;
    }
  }
}

@media screen and (max-width: 767.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .\[\&\:\:-webkit-details-marker\]\:hiddentr::-webkit-details-marker,
    table.table-reflow .\[\&\:\:-webkit-details-marker\]\:hiddentbody::-webkit-details-marker {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow .\[\&\:\:-webkit-details-marker\]\:hiddentr::-webkit-details-marker,
    table.table-reflow .\[\&\:\:-webkit-details-marker\]\:hiddentbody::-webkit-details-marker {
      display: none;
    }
  }

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .\[\&\:\:-webkit-details-marker\]\:hiddentr::-webkit-details-marker,
    table.table-reflow.reflow-until-xl .\[\&\:\:-webkit-details-marker\]\:hiddentbody::-webkit-details-marker {
      display: none;
    }
    /* `reflow-end` on a cell: right-aligned inside its tile, label and value, for a money column. */
    /* `reflow-actions-inline` on the <table>: the Actions cell shares a line with the tile before
       it instead of taking its own (the 990 filing history: Last Updated | Actions), and its
       links sit on the value's baseline. */
    /* `reflow-inline` on a cell: its label sits beside the value, not above it ("Code 6900"), so two short
       facts (a code and a type) share one line of a card instead of taking two each. */
    /* `reflow-cols-1-2` on the <table>: the card's two columns are a third and two thirds, for a row
       pairing a short value with a long one (an amount beside a note). */
    
    table.table-reflow.reflow-until-xl .\[\&\:\:-webkit-details-marker\]\:hiddentr::-webkit-details-marker,
    table.table-reflow.reflow-until-xl .\[\&\:\:-webkit-details-marker\]\:hiddentbody::-webkit-details-marker {
      display: none;
    }
  }

.placeholder\:text-surface-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}

.placeholder\:text-surface-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}

.placeholder\:text-surface-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}

.placeholder\:text-surface-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}

.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-x-6::before {
  content: var(--tw-content);
  left: 1.5rem;
  right: 1.5rem;
}

.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}

.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}

.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\:via-white\/80::before {
  content: var(--tw-content);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.first\:rounded-t-lg:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:rounded-b-lg:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.empty\:hidden:empty {
  display: none;
}

.focus-within\:outline:focus-within {
  outline-style: solid;
}

.focus-within\:outline-2:focus-within {
  outline-width: 2px;
}

.focus-within\:outline-offset-2:focus-within {
  outline-offset: 2px;
}

.focus-within\:outline-primary-600:focus-within {
  outline-color: rgb(var(--color-primary-600) / 1);
}

.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-primary-600:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}

.hover\:border-accent-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-300) / var(--tw-border-opacity, 1));
}

.hover\:border-info-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-400) / var(--tw-border-opacity, 1));
}

.hover\:border-primary-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-300) / var(--tw-border-opacity, 1));
}

.hover\:border-primary-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-400) / var(--tw-border-opacity, 1));
}

.hover\:border-surface-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-300) / var(--tw-border-opacity, 1));
}

.hover\:border-surface-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-400) / var(--tw-border-opacity, 1));
}

.hover\:border-surface-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-600) / var(--tw-border-opacity, 1));
}

.hover\:bg-accent-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-50\/30:hover {
  background-color: rgb(255 251 235 / 0.3);
}

.hover\:bg-amber-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-error-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-50) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-700) / var(--tw-bg-opacity, 1));
}

.hover\:bg-error-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-800) / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-help-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-help-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-info-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-info-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-200) / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-50\/40:hover {
  background-color: rgb(var(--color-primary-50) / 0.4);
}

.hover\:bg-primary-50\/50:hover {
  background-color: rgb(var(--color-primary-50) / 0.5);
}

.hover\:bg-primary-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-700) / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-800) / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-200\/70:hover {
  background-color: rgb(var(--color-surface-200) / 0.7);
}

.hover\:bg-surface-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-600) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-800) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warning-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-100) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warning-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-200) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warning-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-50) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warning-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-500) / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.hover\:text-amber-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-500:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-900:hover {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-error-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-500) / var(--tw-text-opacity, 1));
}

.hover\:text-error-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-600) / var(--tw-text-opacity, 1));
}

.hover\:text-error-700:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-700) / var(--tw-text-opacity, 1));
}

.hover\:text-error-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-800) / var(--tw-text-opacity, 1));
}

.hover\:text-error-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-900) / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-help-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-600) / var(--tw-text-opacity, 1));
}

.hover\:text-info-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-600) / var(--tw-text-opacity, 1));
}

.hover\:text-info-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-800) / var(--tw-text-opacity, 1));
}

.hover\:text-info-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-900) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-100:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-100) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-500) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-700:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-900) / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.hover\:text-success-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-900) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-300:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-300) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-700:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800) / var(--tw-text-opacity, 1));
}

.hover\:text-surface-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900) / var(--tw-text-opacity, 1));
}

.hover\:text-warning-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-800) / var(--tw-text-opacity, 1));
}

.hover\:text-warning-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-900) / 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\:decoration-primary-400:hover {
  text-decoration-color: rgb(var(--color-primary-400) / 1);
}

.hover\:decoration-primary-500:hover {
  text-decoration-color: rgb(var(--color-primary-500) / 1);
}

.hover\:decoration-warning-500:hover {
  text-decoration-color: rgb(var(--color-warning-500) / 1);
}

.hover\:decoration-white:hover {
  text-decoration-color: #fff;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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);
}

.hover\:ring-primary-300:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-300) / var(--tw-ring-opacity, 1));
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:rounded-md:focus {
  border-radius: 0.375rem;
}

.focus\:border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity, 1));
}

.focus\:border-primary-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-600) / var(--tw-border-opacity, 1));
}

.focus\:bg-info-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-100) / var(--tw-bg-opacity, 1));
}

.focus\:bg-primary-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity, 1));
}

.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-sm:focus {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.focus\:font-medium:focus {
  font-weight: 500;
}

.focus\:font-semibold:focus {
  font-weight: 600;
}

.focus\:text-primary-700:focus {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}

.focus\:text-surface-700:focus {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700) / var(--tw-text-opacity, 1));
}

.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:no-underline:focus {
  text-decoration-line: none;
}

.focus\:shadow:focus {
  --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);
}

.focus\:shadow-lg:focus {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-0: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(0px + 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-1: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(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);
}

.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-4: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(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);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-error-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-600) / var(--tw-ring-opacity, 1));
}

.focus\:ring-info-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-500) / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-100) / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-500) / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500\/20:focus {
  --tw-ring-color: rgb(var(--color-primary-500) / 0.2);
}

.focus\:ring-primary-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-surface-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-600) / var(--tw-ring-opacity, 1));
}

.focus\:ring-warning-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-500) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:text-help-600:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-600) / var(--tw-text-opacity, 1));
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-4:focus-visible {
  outline-offset: 4px;
}

.focus-visible\:outline-accent-700:focus-visible {
  outline-color: rgb(var(--color-accent-700) / 1);
}

.focus-visible\:outline-error-500:focus-visible {
  outline-color: rgb(var(--color-error-500) / 1);
}

.focus-visible\:outline-error-600:focus-visible {
  outline-color: rgb(var(--color-error-600) / 1);
}

.focus-visible\:outline-primary-600:focus-visible {
  outline-color: rgb(var(--color-primary-600) / 1);
}

.focus-visible\:outline-surface-500:focus-visible {
  outline-color: rgb(var(--color-surface-500) / 1);
}

.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-primary-600:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-surface-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity, 1));
}

.disabled\:bg-surface-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300) / var(--tw-bg-opacity, 1));
}

.disabled\:text-surface-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}

.disabled\:text-surface-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500) / var(--tw-text-opacity, 1));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[open] .group-open\:inline {
  display: inline;
}

.group[open] .group-open\:hidden {
  display: none;
}

.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));
}

.group[open] .group-open\: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));
}

.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\:bg-help-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-help-100) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-help-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-600) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-400) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-500) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-600) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-surface-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}

.group:focus-visible .group-focus-visible\:text-help-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-help-600) / var(--tw-text-opacity, 1));
}

.peer[open] ~ .peer-open\:block {
  display: block;
}

.peer:checked ~ .peer-checked\:border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-600) / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-primary-50\/50 {
  background-color: rgb(var(--color-primary-50) / 0.5);
}

.has-\[\#setup-unfinished-banner\]\:block:has(#setup-unfinished-banner) {
  display: block;
}

.has-\[\:checked\]\:border-primary-500:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:border-primary-600:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-600) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:bg-primary-50:has(:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity, 1));
}

.has-\[\:checked\]\:text-primary-700:has(:checked) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-700) / var(--tw-text-opacity, 1));
}

.has-\[\:checked\]\:ring-1:has(:checked) {
  --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);
}

.has-\[\:checked\]\:ring-2:has(:checked) {
  --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);
}

.has-\[\:checked\]\:ring-primary-500:has(:checked) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-500) / var(--tw-ring-opacity, 1));
}

.has-\[\:checked\]\:ring-primary-600:has(:checked) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary-600) / var(--tw-ring-opacity, 1));
}

.group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:inline {
  display: inline;
}

.group\/row:has(:checked) .group-has-\[\:checked\]\/row\:inline {
  display: inline;
}

.group\/opts:has(:checked) .group-has-\[\:checked\]\/opts\:hidden {
  display: none;
}

.group\/row:has(:checked) .group-has-\[\:checked\]\/row\:hidden {
  display: none;
}

.data-\[state\=confirmed\]\:border-l-primary-400[data-state="confirmed"] {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-primary-400) / var(--tw-border-opacity, 1));
}

@media (min-width: 360px) {

  .min-\[360px\]\:text-\[17px\] {
    font-size: 17px;
  }
}

@media (min-width: 400px) {

  .min-\[400px\]\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }
}

@media (min-width: 420px) {

  .line1\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .line1\:hidden {
    display: none;
  }

  .line1\:min-h-\[2\.875rem\] {
    min-height: 2.875rem;
  }

  .line1\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .line1\:items-center {
    align-items: center;
  }

  .line1\:justify-end {
    justify-content: flex-end;
  }

  .line1\:pl-2 {
    padding-left: 0.5rem;
  }

  .line1\:pr-4 {
    padding-right: 1rem;
  }
}

@media (min-width: 640px) {

  .sm\:left-6 {
    left: 1.5rem;
  }

  .sm\:right-auto {
    right: auto;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:col-start-auto {
    grid-column-start: auto;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-16 {
    margin-bottom: 4rem;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:mt-16 {
    margin-top: 4rem;
  }

  .sm\:mt-24 {
    margin-top: 6rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:table-row {
    display: table-row;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:min-h-9 {
    min-height: 2.25rem;
  }

  .sm\:min-h-\[19rem\] {
    min-height: 19rem;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:w-\[22\.5rem\] {
    width: 22.5rem;
  }

  .sm\:w-\[32rem\] {
    width: 32rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-fit {
    min-width: -moz-fit-content;
    min-width: fit-content;
  }

  .sm\:max-w-\[11rem\] {
    max-width: 11rem;
  }

  .sm\:max-w-\[250px\] {
    max-width: 250px;
  }

  .sm\:max-w-\[300px\] {
    max-width: 300px;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[3fr_2fr\] {
    grid-template-columns: 3fr 2fr;
  }

  .sm\:grid-cols-\[7rem_minmax\(0\2c 1fr\)_auto_auto\] {
    grid-template-columns: 7rem minmax(0,1fr) auto auto;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 20rem\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,20rem);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .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-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .sm\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .sm\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .sm\:gap-y-2 {
    row-gap: 0.5rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  .sm\:border-t-0 {
    border-top-width: 0px;
  }

  .sm\:p-0 {
    padding: 0px;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-3\.5 {
    padding: 0.875rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-24 {
    padding-bottom: 6rem;
  }

  .sm\:pb-28 {
    padding-bottom: 7rem;
  }

  .sm\:pl-3 {
    padding-left: 0.75rem;
  }

  .sm\:pr-6 {
    padding-right: 1.5rem;
  }

  .sm\:pt-0 {
    padding-top: 0px;
  }

  .sm\:pt-10 {
    padding-top: 2.5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:pt-28 {
    padding-top: 7rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[1\.08rem\] {
    font-size: 1.08rem;
  }

  .sm\:text-\[2\.6rem\] {
    font-size: 2.6rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:leading-6 {
    line-height: 1.5rem;
  }

  .sm\:leading-8 {
    line-height: 2rem;
  }

  .sm\:leading-9 {
    line-height: 2.25rem;
  }

  .sm\:leading-\[1\.2\] {
    line-height: 1.2;
  }

  .sm\:tracking-tight {
    letter-spacing: -0.025em;
  }

  .sm\: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);
  }

  .sm\:ring-surface-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity, 1));
  }

  .line2\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .line2\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .line2\:inline {
    display: inline;
  }

  .line2\:min-h-\[2\.375rem\] {
    min-height: 2.375rem;
  }

  .line2\:grow {
    flex-grow: 1;
  }

  .line2\:basis-1\/2 {
    flex-basis: 50%;
  }

  .line2\:basis-\[20\%\] {
    flex-basis: 20%;
  }

  .line2\:basis-\[22\%\] {
    flex-basis: 22%;
  }

  .line2\:basis-\[28\%\] {
    flex-basis: 28%;
  }

  .line2\:basis-\[30\%\] {
    flex-basis: 30%;
  }

  .line2\:basis-\[33\%\] {
    flex-basis: 33%;
  }

  .line2\:basis-\[45\%\] {
    flex-basis: 45%;
  }

  .line2\:basis-\[60\%\] {
    flex-basis: 60%;
  }

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

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

  .line2\:items-center {
    align-items: center;
  }

  .line2\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .line2\:pb-2 {
    padding-bottom: 0.5rem;
  }

  .line2\:pl-2 {
    padding-left: 0.5rem;
  }

  .line2\:pl-3 {
    padding-left: 0.75rem;
  }

  .line2\:pl-4 {
    padding-left: 1rem;
  }

  .line2\:pr-1 {
    padding-right: 0.25rem;
  }

  .line2\:pr-2 {
    padding-right: 0.5rem;
  }

  .line2\:pr-4 {
    padding-right: 1rem;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:sticky {
    position: sticky;
  }

  .md\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .md\:right-0 {
    right: 0px;
  }

  .md\:top-0 {
    top: 0px;
  }

  .md\:top-full {
    top: 100%;
  }

  .md\:z-10 {
    z-index: 10;
  }

  .md\:order-1 {
    order: 1;
  }

  .md\:order-2 {
    order: 2;
  }

  .md\:order-none {
    order: 0;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:float-right {
    float: right;
  }

  .md\:float-none {
    float: none;
  }

  .md\:ml-6 {
    margin-left: 1.5rem;
  }

  .md\:ml-auto {
    margin-left: auto;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-1 {
    margin-top: 0.25rem;
  }

  .md\:mt-2\.5 {
    margin-top: 0.625rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:table {
    display: table;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:table-header-group {
    display: table-header-group;
  }

  .md\:table-row-group {
    display: table-row-group;
  }

  .md\:table-row {
    display: table-row;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[2\.375rem\] {
    height: 2.375rem;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:min-h-\[2\.375rem\] {
    min-height: 2.375rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-20 {
    width: 5rem;
  }

  .md\:w-28 {
    width: 7rem;
  }

  .md\:w-32 {
    width: 8rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-72 {
    width: 18rem;
  }

  .md\:w-80 {
    width: 20rem;
  }

  .md\:w-96 {
    width: 24rem;
  }

  .md\:min-w-\[12rem\] {
    min-width: 12rem;
  }

  .md\:min-w-\[15rem\] {
    min-width: 15rem;
  }

  .md\:min-w-\[17rem\] {
    min-width: 17rem;
  }

  .md\:min-w-\[22rem\] {
    min-width: 22rem;
  }

  .md\:min-w-\[56rem\] {
    min-width: 56rem;
  }

  .md\:min-w-\[640px\] {
    min-width: 640px;
  }

  .md\:min-w-full {
    min-width: 100%;
  }

  .md\:max-w-\[19rem\] {
    max-width: 19rem;
  }

  .md\:max-w-\[60\%\] {
    max-width: 60%;
  }

  .md\:max-w-\[80\%\] {
    max-width: 80%;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:basis-auto {
    flex-basis: auto;
  }

  .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\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-stretch {
    align-items: stretch;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .md\:border-b {
    border-bottom-width: 1px;
  }

  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .md\:pl-3 {
    padding-left: 0.75rem;
  }

  .md\:pl-\[3\.25rem\] {
    padding-left: 3.25rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:text-right {
    text-align: right;
  }

  .md\:align-middle {
    vertical-align: middle;
  }

  .md\:font-normal {
    font-weight: 400;
  }
}

@media (min-width: 870px) {

  .tbl\:sticky {
    position: sticky;
  }

  .tbl\:top-0 {
    top: 0px;
  }

  .tbl\:z-10 {
    z-index: 10;
  }

  .tbl\:flex {
    display: flex;
  }

  .tbl\:table {
    display: table;
  }

  .tbl\:table-cell {
    display: table-cell;
  }

  .tbl\:table-header-group {
    display: table-header-group;
  }

  .tbl\:table-row-group {
    display: table-row-group;
  }

  .tbl\:table-row {
    display: table-row;
  }

  .tbl\:hidden {
    display: none;
  }

  .tbl\:h-\[2\.375rem\] {
    height: 2.375rem;
  }

  .tbl\:w-\[22\%\] {
    width: 22%;
  }

  .tbl\:w-\[24\%\] {
    width: 24%;
  }

  .tbl\:min-w-\[10\.5rem\] {
    min-width: 10.5rem;
  }

  .tbl\:items-center {
    align-items: center;
  }

  .tbl\:justify-end {
    justify-content: flex-end;
  }

  .tbl\:border-b {
    border-bottom-width: 1px;
  }

  .tbl\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tbl\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .tbl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .tbl\:pl-3 {
    padding-left: 0.75rem;
  }

  .tbl\:pt-0 {
    padding-top: 0px;
  }

  .tbl\:text-right {
    text-align: right;
  }
}

@media (min-width: 1024px) {

  .lg\:fixed {
    position: fixed;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:left-0 {
    left: 0px;
  }

  .lg\:right-auto {
    right: auto;
  }

  .lg\:top-14 {
    top: 3.5rem;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-28 {
    top: 7rem;
  }

  .lg\:z-30 {
    z-index: 30;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-52 {
    height: 13rem;
  }

  .lg\:max-h-\[calc\(100vh-8rem\)\] {
    max-height: calc(100vh - 8rem);
  }

  .lg\:w-60 {
    width: 15rem;
  }

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:w-\[40rem\] {
    width: 40rem;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .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-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 18rem\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,18rem) minmax(0,1fr);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:rounded-t-xl {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
  }

  .lg\:rounded-bl-none {
    border-bottom-left-radius: 0px;
  }

  .lg\:rounded-tr-xl {
    border-top-right-radius: 0.75rem;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:pl-0 {
    padding-left: 0px;
  }

  .lg\:pl-64 {
    padding-left: 16rem;
  }

  .lg\:pl-8 {
    padding-left: 2rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-\[3\.5rem\] {
    font-size: 3.5rem;
  }

  .lg\:leading-\[1\.2\] {
    line-height: 1.2;
  }
}

@media (min-width: 1280px) {

  .xl\:sticky {
    position: sticky;
  }

  .xl\:top-0 {
    top: 0px;
  }

  .xl\:z-10 {
    z-index: 10;
  }

  .xl\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .xl\:mt-0 {
    margin-top: 0px;
  }

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:table {
    display: table;
  }

  .xl\:table-cell {
    display: table-cell;
  }

  .xl\:table-header-group {
    display: table-header-group;
  }

  .xl\:table-row-group {
    display: table-row-group;
  }

  .xl\:table-row {
    display: table-row;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:min-h-\[2\.375rem\] {
    min-height: 2.375rem;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:w-48 {
    width: 12rem;
  }

  .xl\:max-w-2xl {
    max-width: 42rem;
  }

  .xl\:max-w-none {
    max-width: none;
  }

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

  .xl\:items-center {
    align-items: center;
  }

  .xl\:justify-start {
    justify-content: flex-start;
  }

  .xl\:justify-end {
    justify-content: flex-end;
  }

  .xl\:gap-10 {
    gap: 2.5rem;
  }

  .xl\:gap-x-12 {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .xl\:border-b {
    border-bottom-width: 1px;
  }

  .xl\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .xl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .xl\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xl\:pl-3 {
    padding-left: 0.75rem;
  }

  .xl\:pr-4 {
    padding-right: 1rem;
  }

  .xl\:pt-0 {
    padding-top: 0px;
  }

  .xl\:text-left {
    text-align: left;
  }

  .xl\:text-right {
    text-align: right;
  }

  .xl\:leading-\[1\.1\] {
    line-height: 1.1;
  }
}

@media print {

  .print\:block {
    display: block;
  }

  .print\:hidden {
    display: none;
  }

  .print\:max-h-none {
    max-height: none;
  }

  .print\:overflow-visible {
    overflow: visible;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&_\.break-words\]\:\[overflow-wrap\:anywhere\] .break-words {
  overflow-wrap: anywhere;
}