*, ::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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 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: var(--font-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;
}
  :root {
    --brand-hue: 265;

    --font-display: "Space Grotesk";
    --font-body: "DM Sans";
    --font-mono: "JetBrains Mono";
    --radius: 0.625rem;

    --background: 0.99 0 0;
    --foreground: 0.15 0.005 var(--brand-hue);
    --card: 1.0 0 0;
    --card-foreground: 0.15 0.005 var(--brand-hue);
    --popover: 1.0 0 0;
    --popover-foreground: 0.15 0.005 var(--brand-hue);

    --primary: 0.45 0.18 var(--brand-hue);
    --primary-foreground: 0.98 0 0;

    --secondary: 0.95 0.01 var(--brand-hue);
    --secondary-foreground: 0.25 0.02 var(--brand-hue);
    --muted: 0.96 0.005 var(--brand-hue);
    --muted-foreground: 0.5 0.02 var(--brand-hue);

    --accent: 0.55 0.2 var(--brand-hue);
    --accent-foreground: 0.98 0 0;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.98 0 0;

    --no-show: 0.58 0.14 15;
    --no-show-foreground: 0.98 0 0;
    --no-show-soft: 0.94 0.03 15;
    --no-show-soft-foreground: 0.4 0.1 15;

    --success: 0.62 0.17 150;
    --success-foreground: 0.98 0 0;
    --warning: 0.78 0.16 75;
    --warning-foreground: 0.2 0.04 75;

    --notes-surface: 0.985 0.008 75;
    --notes-surface-foreground: 0.18 0.008 var(--brand-hue);
    --notes-border: 0.9 0.018 75;

    --slot-available: 0.96 0.012 var(--brand-hue);
    --slot-available-foreground: 0.3 0.04 var(--brand-hue);
    --slot-selected: 0.45 0.18 var(--brand-hue);
    --slot-selected-foreground: 0.98 0 0;
    --slot-taken: 0.93 0.004 var(--brand-hue);
    --slot-taken-foreground: 0.6 0.01 var(--brand-hue);

    --calendar-today: 0.95 0.02 var(--brand-hue);
    --calendar-available-dot: 0.55 0.2 var(--brand-hue);
    --ring-booking: 0.55 0.2 var(--brand-hue);

    /* ── Invoice status tones (6 states) — soft badge bg + foreground pairs ── */
    --inv-draft: 0.55 0.005 var(--brand-hue);
    --inv-draft-foreground: 0.98 0 0;
    --inv-draft-soft: 0.95 0.006 var(--brand-hue);
    --inv-draft-soft-foreground: 0.42 0.01 var(--brand-hue);

    --inv-sent: 0.5 0.16 var(--brand-hue);
    --inv-sent-foreground: 0.98 0 0;
    --inv-sent-soft: 0.93 0.03 var(--brand-hue);
    --inv-sent-soft-foreground: 0.36 0.1 var(--brand-hue);

    --inv-viewed: 0.52 0.14 245;
    --inv-viewed-foreground: 0.98 0 0;
    --inv-viewed-soft: 0.93 0.03 245;
    --inv-viewed-soft-foreground: 0.36 0.1 245;

    --inv-partial: 0.7 0.15 70;
    --inv-partial-foreground: 0.2 0.04 70;
    --inv-partial-soft: 0.94 0.05 70;
    --inv-partial-soft-foreground: 0.42 0.13 70;

    --inv-paid: 0.62 0.17 150;
    --inv-paid-foreground: 0.98 0 0;
    --inv-paid-soft: 0.93 0.06 150;
    --inv-paid-soft-foreground: 0.36 0.11 150;

    --inv-overdue: 0.55 0.22 22;
    --inv-overdue-foreground: 0.98 0 0;
    --inv-overdue-soft: 0.92 0.05 22;
    --inv-overdue-soft-foreground: 0.45 0.18 22;

    /* ── Retainer status tones (Active / Paused / Canceled) ── */
    --ret-active: 0.55 0.2 var(--brand-hue);
    --ret-active-foreground: 0.98 0 0;
    --ret-active-soft: 0.93 0.025 var(--brand-hue);
    --ret-active-soft-foreground: 0.36 0.11 var(--brand-hue);

    --ret-paused: 0.7 0.15 70;
    --ret-paused-foreground: 0.2 0.04 70;
    --ret-paused-soft: 0.94 0.05 70;
    --ret-paused-soft-foreground: 0.42 0.13 70;

    --ret-canceled: 0.55 0.005 var(--brand-hue);
    --ret-canceled-foreground: 0.98 0 0;
    --ret-canceled-soft: 0.94 0.006 var(--brand-hue);
    --ret-canceled-soft-foreground: 0.42 0.01 var(--brand-hue);

    /* ── Retainer unit toggle (hours / deliverables) ── */
    --ret-unit: 0.97 0.006 var(--brand-hue);
    --ret-unit-foreground: 0.5 0.02 var(--brand-hue);
    --ret-unit-active: 0.95 0.025 var(--brand-hue);
    --ret-unit-active-foreground: 0.25 0.04 var(--brand-hue);
    --ret-unit-ring: 0.55 0.2 var(--brand-hue);

    /* ── Retainer usage progress (3 states) ── */
    --usage-track: 0.94 0.006 var(--brand-hue);
    --usage-fill-ok: 0.55 0.2 var(--brand-hue);
    --usage-fill-ok-foreground: 0.98 0 0;
    --usage-fill-approaching: 0.7 0.15 70;
    --usage-fill-approaching-foreground: 0.2 0.04 70;
    --usage-fill-exceeded: 0.55 0.22 22;
    --usage-fill-exceeded-foreground: 0.98 0 0;
    --usage-soft-ok: 0.93 0.025 var(--brand-hue);
    --usage-soft-ok-foreground: 0.36 0.11 var(--brand-hue);
    --usage-soft-approaching: 0.94 0.05 70;
    --usage-soft-approaching-foreground: 0.42 0.13 70;
    --usage-soft-exceeded: 0.92 0.05 22;
    --usage-soft-exceeded-foreground: 0.45 0.18 22;

    /* ── Retainer card surface ── */
    --ret-card: 1.0 0 0;
    --ret-card-foreground: 0.15 0.005 var(--brand-hue);
    --ret-card-border: 0.9 0.01 var(--brand-hue);
    --ret-accent: 0.55 0.2 var(--brand-hue);
    --ret-accent-income: 0.62 0.17 150;
    --ret-label: 0.5 0.02 var(--brand-hue);
    --ret-value: 0.15 0.005 var(--brand-hue);
    --ret-meta: 0.55 0.02 var(--brand-hue);
    --ret-divider: 0.92 0.008 var(--brand-hue);

    /* ── Retainer time-log table ── */
    --ret-log-head: 0.97 0.008 var(--brand-hue);
    --ret-log-head-foreground: 0.4 0.015 var(--brand-hue);
    --ret-log-row: 0.995 0.002 var(--brand-hue);
    --ret-log-row-hover: 0.97 0.01 var(--brand-hue);
    --ret-log-row-stripe: 0.985 0.004 var(--brand-hue);
    --ret-log-amount: 0.2 0.02 var(--brand-hue);
    --ret-log-rule: 0.9 0.012 var(--brand-hue);
    --ret-log-group: 0.96 0.012 var(--brand-hue);
    --ret-log-group-foreground: 0.3 0.02 var(--brand-hue);

    /* ── Overage invoice tone (distinct from overdue) ── */
    --ret-overage: 0.65 0.19 35;
    --ret-overage-foreground: 0.98 0 0;
    --ret-overage-soft: 0.93 0.05 35;
    --ret-overage-soft-foreground: 0.42 0.15 35;

    /* ── Branded invoice document surface ── */
    --invoice-paper: 1.0 0 0;
    --invoice-paper-foreground: 0.15 0.005 var(--brand-hue);
    --invoice-rule: 0.88 0.012 var(--brand-hue);
    --invoice-header: 0.96 0.02 var(--brand-hue);
    --invoice-header-foreground: 0.2 0.02 var(--brand-hue);
    --invoice-line-head: 0.97 0.008 var(--brand-hue);
    --invoice-line-head-foreground: 0.4 0.015 var(--brand-hue);
    --invoice-line-row: 0.995 0.002 var(--brand-hue);
    --invoice-line-row-hover: 0.97 0.01 var(--brand-hue);
    --invoice-totals: 0.96 0.012 var(--brand-hue);
    --invoice-totals-foreground: 0.2 0.02 var(--brand-hue);

    /* ── Payment method picker dialog ── */
    --pay-method: 0.99 0.002 var(--brand-hue);
    --pay-method-foreground: 0.2 0.01 var(--brand-hue);
    --pay-method-hover: 0.96 0.012 var(--brand-hue);
    --pay-method-selected: 0.95 0.025 var(--brand-hue);
    --pay-method-selected-foreground: 0.25 0.04 var(--brand-hue);
    --pay-method-ring: 0.55 0.2 var(--brand-hue);

    /* ── Checkout dialog (Pay Now flow) ── */
    --checkout-surface: 1.0 0 0;
    --checkout-surface-foreground: 0.15 0.005 var(--brand-hue);
    --checkout-header: 0.96 0.012 var(--brand-hue);
    --checkout-header-foreground: 0.2 0.02 var(--brand-hue);
    --checkout-summary: 0.965 0.01 var(--brand-hue);
    --checkout-summary-foreground: 0.2 0.02 var(--brand-hue);
    --checkout-divider: 0.9 0.01 var(--brand-hue);
    --checkout-field: 0.99 0.002 var(--brand-hue);
    --checkout-field-foreground: 0.15 0.005 var(--brand-hue);
    --checkout-field-border: 0.9 0.01 var(--brand-hue);
    --checkout-field-focus: 0.55 0.2 var(--brand-hue);
    --checkout-tab: 0.97 0.006 var(--brand-hue);
    --checkout-tab-foreground: 0.5 0.02 var(--brand-hue);
    --checkout-tab-active: 0.95 0.025 var(--brand-hue);
    --checkout-tab-active-foreground: 0.25 0.04 var(--brand-hue);
    --checkout-tab-active-ring: 0.55 0.2 var(--brand-hue);
    --checkout-secure-bar: 0.97 0.006 var(--brand-hue);
    --checkout-secure-bar-foreground: 0.5 0.02 var(--brand-hue);
    --checkout-overlay: 0.15 0.01 var(--brand-hue);
    --gradient-pay-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );

    /* ── Payment method badges (Stripe / Coinbase / NOWPayments) ── */
    --pm-stripe: 0.55 0.2 265;
    --pm-stripe-foreground: 0.98 0 0;
    --pm-stripe-soft: 0.93 0.025 265;
    --pm-stripe-soft-foreground: 0.36 0.11 265;
    --pm-coinbase: 0.55 0.16 245;
    --pm-coinbase-foreground: 0.98 0 0;
    --pm-coinbase-soft: 0.93 0.03 245;
    --pm-coinbase-soft-foreground: 0.36 0.1 245;
    --pm-nowpayments: 0.55 0.15 175;
    --pm-nowpayments-foreground: 0.98 0 0;
    --pm-nowpayments-soft: 0.93 0.03 175;
    --pm-nowpayments-soft-foreground: 0.34 0.1 175;
    --pm-manual: 0.5 0.005 var(--brand-hue);
    --pm-manual-foreground: 0.98 0 0;
    --pm-manual-soft: 0.94 0.006 var(--brand-hue);
    --pm-manual-soft-foreground: 0.42 0.01 var(--brand-hue);

    /* ── Payment status tones (history table) ── */
    --pay-succeeded: 0.62 0.17 150;
    --pay-succeeded-foreground: 0.98 0 0;
    --pay-succeeded-soft: 0.93 0.06 150;
    --pay-succeeded-soft-foreground: 0.36 0.11 150;
    --pay-pending: 0.7 0.15 70;
    --pay-pending-foreground: 0.2 0.04 70;
    --pay-pending-soft: 0.94 0.05 70;
    --pay-pending-soft-foreground: 0.42 0.13 70;
    --pay-failed: 0.55 0.22 22;
    --pay-failed-foreground: 0.98 0 0;
    --pay-failed-soft: 0.92 0.05 22;
    --pay-failed-soft-foreground: 0.45 0.18 22;
    --pay-refunded: 0.55 0.005 var(--brand-hue);
    --pay-refunded-foreground: 0.98 0 0;
    --pay-refunded-soft: 0.94 0.006 var(--brand-hue);
    --pay-refunded-soft-foreground: 0.42 0.01 var(--brand-hue);

    /* ── Payment history table ── */
    --pay-history-head: 0.97 0.008 var(--brand-hue);
    --pay-history-head-foreground: 0.4 0.015 var(--brand-hue);
    --pay-history-row: 0.995 0.002 var(--brand-hue);
    --pay-history-row-hover: 0.97 0.01 var(--brand-hue);
    --pay-history-row-stripe: 0.985 0.004 var(--brand-hue);
    --pay-history-amount: 0.2 0.02 var(--brand-hue);
    --pay-history-rule: 0.9 0.012 var(--brand-hue);

    /* ── Revenue summary stat cards ── */
    --stat-card: 1.0 0 0;
    --stat-card-foreground: 0.15 0.005 var(--brand-hue);
    --stat-card-border: 0.9 0.01 var(--brand-hue);
    --stat-accent: 0.55 0.2 var(--brand-hue);
    --stat-accent-positive: 0.62 0.17 150;
    --stat-accent-negative: 0.55 0.22 22;
    --stat-label: 0.5 0.02 var(--brand-hue);
    --stat-value: 0.15 0.005 var(--brand-hue);
    --stat-delta-positive: 0.42 0.13 150;
    --stat-delta-positive-soft: 0.93 0.06 150;
    --stat-delta-negative: 0.45 0.18 22;
    --stat-delta-negative-soft: 0.93 0.05 22;
    --stat-delta-neutral: 0.5 0.02 var(--brand-hue);
    --stat-delta-neutral-soft: 0.95 0.006 var(--brand-hue);

    /* ── Pricing tier cards (4 tiers) ── */
    --tier-card: 1.0 0 0;
    --tier-card-foreground: 0.15 0.005 var(--brand-hue);
    --tier-border: 0.9 0.01 var(--brand-hue);
    --tier-free: 0.96 0.006 var(--brand-hue);
    --tier-free-foreground: 0.4 0.015 var(--brand-hue);
    --tier-paid: 0.45 0.18 var(--brand-hue);
    --tier-paid-foreground: 0.98 0 0;
    --tier-lifetime: 0.42 0.2 var(--brand-hue);
    --tier-lifetime-foreground: 0.98 0 0;
    --tier-lifetime-ring: 0.55 0.2 var(--brand-hue);
    --tier-lifetime-badge: 0.55 0.2 var(--brand-hue);
    --tier-lifetime-badge-foreground: 0.98 0 0;
    --gradient-lifetime: linear-gradient(
      135deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );

    --border: 0.9 0.01 var(--brand-hue);
    --input: 0.9 0.01 var(--brand-hue);
    --ring: 0.45 0.18 var(--brand-hue);

    --chart-1: 0.65 0.22 40;
    --chart-2: 0.6 0.12 185;
    --chart-3: 0.4 0.07 227;
    --chart-4: 0.83 0.19 84;
    --chart-5: 0.77 0.19 70;

    /* ── 90-day income forecast (confidence tiers + progress + alert) ── */
    /* Confidence tiers map to income-source reliability:
       high = retainers (locked-in recurring), medium = invoices (sent, awaiting),
       low = pipeline (prospects, not yet committed). Hues align with the
       existing success(150)/warning(70)/destructive(22) families. */
    --confidence-high: 0.62 0.17 150;
    --confidence-high-foreground: 0.98 0 0;
    --confidence-high-soft: 0.93 0.06 150;
    --confidence-high-soft-foreground: 0.36 0.11 150;
    --confidence-medium: 0.78 0.16 70;
    --confidence-medium-foreground: 0.2 0.04 70;
    --confidence-medium-soft: 0.94 0.05 70;
    --confidence-medium-soft-foreground: 0.42 0.13 70;
    --confidence-low: 0.55 0.22 22;
    --confidence-low-foreground: 0.98 0 0;
    --confidence-low-soft: 0.92 0.05 22;
    --confidence-low-soft-foreground: 0.45 0.18 22;

    /* Progress bar — track + on-target (green) vs below-target (amber/red) fill.
       On-target reuses the high-confidence green; below-target escalates from
       amber (mild shortfall) to red (severe shortfall). */
    --progress-bar-track: 0.94 0.006 var(--brand-hue);
    --progress-bar-fill-on-target: 0.62 0.17 150;
    --progress-bar-fill-on-target-foreground: 0.98 0 0;
    --progress-bar-fill-below: 0.78 0.16 70;
    --progress-bar-fill-below-foreground: 0.2 0.04 70;
    --progress-bar-fill-severe: 0.55 0.22 22;
    --progress-bar-fill-severe-foreground: 0.98 0 0;

    /* Shortfall alert panel — calm warning surface, not a screaming error.
       Amber-tinted bg + border + text so it reads as "act soon", not "broken". */
    --alert-warning-bg: 0.96 0.025 70;
    --alert-warning-border: 0.82 0.12 70;
    --alert-warning-text: 0.3 0.08 70;
    --alert-warning-accent: 0.55 0.18 22;

    --sidebar: 0.98 0.005 var(--brand-hue);
    --sidebar-foreground: 0.15 0.005 var(--brand-hue);
    --sidebar-primary: 0.45 0.18 var(--brand-hue);
    --sidebar-primary-foreground: 0.98 0 0;
    --sidebar-accent: 0.95 0.01 var(--brand-hue);
    --sidebar-accent-foreground: 0.25 0.02 var(--brand-hue);
    --sidebar-border: 0.9 0.01 var(--brand-hue);
    --sidebar-ring: 0.45 0.18 var(--brand-hue);

    --space-section: 7rem;
    --space-section-mobile: 3.5rem;
    --space-block: 2rem;
    --space-block-tight: 1.25rem;

    --gradient-hero: linear-gradient(
      135deg,
      oklch(0.58 0.21 var(--brand-hue)) 0%,
      oklch(0.62 0.19 calc(var(--brand-hue) + 18)) 38%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 12)) 72%,
      oklch(0.42 0.17 var(--brand-hue)) 100%
    );
    --gradient-section: linear-gradient(
      180deg,
      oklch(0.985 0.006 var(--brand-hue)) 0%,
      oklch(0.97 0.009 var(--brand-hue)) 42%,
      oklch(0.99 0 0) 100%
    );
    --gradient-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --glow-hero: radial-gradient(
      55% 55% at 72% 28%,
      oklch(0.62 0.21 var(--brand-hue) / 0.22) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 20) / 0.08) 45%,
      transparent 72%
    );

    /* ── Funnel landing page tokens (ClickFunnels-style corporate) ── */
    --funnel-nav: 1.0 0 0;
    --funnel-nav-foreground: 0.2 0.01 var(--brand-hue);
    --funnel-nav-border: 0.9 0.008 var(--brand-hue);
    --funnel-nav-scrolled: 0.98 0.006 var(--brand-hue);
    --funnel-nav-scrolled-border: 0.88 0.012 var(--brand-hue);

    --funnel-section-alt: 0.975 0.006 var(--brand-hue);
    --funnel-section-alt-foreground: 0.18 0.008 var(--brand-hue);
    --funnel-section-dark: 0.16 0.012 var(--brand-hue);
    --funnel-section-dark-foreground: 0.96 0.005 var(--brand-hue);

    --funnel-cta-bar: 0.16 0.018 var(--brand-hue);
    --funnel-cta-bar-foreground: 0.98 0 0;
    --funnel-cta-bar-border: 0.3 0.02 var(--brand-hue);

    --funnel-problem: 0.97 0.012 22;
    --funnel-problem-foreground: 0.22 0.03 22;
    --funnel-problem-soft: 0.93 0.025 22;
    --funnel-problem-soft-foreground: 0.4 0.13 22;

    --funnel-solution: 0.95 0.02 var(--brand-hue);
    --funnel-solution-foreground: 0.2 0.02 var(--brand-hue);

    --funnel-feature-icon: 0.95 0.025 var(--brand-hue);
    --funnel-feature-icon-foreground: 0.45 0.18 var(--brand-hue);
    --funnel-feature-card: 1.0 0 0;
    --funnel-feature-card-foreground: 0.15 0.005 var(--brand-hue);
    --funnel-feature-card-border: 0.9 0.01 var(--brand-hue);

    --funnel-step-num: 0.45 0.18 var(--brand-hue);
    --funnel-step-num-foreground: 0.98 0 0;
    --funnel-step-line: 0.9 0.012 var(--brand-hue);

    --funnel-testimonial: 1.0 0 0;
    --funnel-testimonial-foreground: 0.15 0.005 var(--brand-hue);
    --funnel-testimonial-border: 0.9 0.01 var(--brand-hue);
    --funnel-testimonial-quote: 0.55 0.18 var(--brand-hue);
    --funnel-testimonial-avatar: 0.6 0.16 var(--brand-hue);

    --funnel-compare-head: 0.45 0.18 var(--brand-hue);
    --funnel-compare-head-foreground: 0.98 0 0;
    --funnel-compare-row: 0.995 0.002 var(--brand-hue);
    --funnel-compare-row-stripe: 0.985 0.004 var(--brand-hue);
    --funnel-compare-row-hover: 0.97 0.01 var(--brand-hue);
    --funnel-compare-rule: 0.9 0.012 var(--brand-hue);
    --funnel-compare-yes: 0.62 0.17 150;
    --funnel-compare-no: 0.6 0.01 var(--brand-hue);

    --funnel-urgency: 0.55 0.22 22;
    --funnel-urgency-foreground: 0.98 0 0;
    --funnel-urgency-soft: 0.93 0.05 22;
    --funnel-urgency-soft-foreground: 0.45 0.18 22;
    --funnel-urgency-pulse: 0.6 0.2 22;

    --funnel-logo-strip: 0.55 0.02 var(--brand-hue);
    --funnel-stat-num: 0.45 0.18 var(--brand-hue);
    --funnel-stat-label: 0.5 0.02 var(--brand-hue);

    --funnel-faq-q: 1.0 0 0;
    --funnel-faq-q-foreground: 0.18 0.01 var(--brand-hue);
    --funnel-faq-q-border: 0.9 0.01 var(--brand-hue);
    --funnel-faq-a: 0.96 0.006 var(--brand-hue);
    --funnel-faq-a-foreground: 0.4 0.015 var(--brand-hue);

    --funnel-cta-primary: 0.45 0.19 var(--brand-hue);
    --funnel-cta-primary-hover: 0.4 0.2 var(--brand-hue);
    --funnel-cta-primary-foreground: 0.98 0 0;
    --funnel-cta-secondary: 0.96 0.012 var(--brand-hue);
    --funnel-cta-secondary-hover: 0.93 0.018 var(--brand-hue);
    --funnel-cta-secondary-foreground: 0.25 0.04 var(--brand-hue);
    --funnel-cta-ghost: transparent;
    --funnel-cta-ghost-hover: 0.95 0.01 var(--brand-hue);
    --funnel-cta-ghost-foreground: 0.45 0.18 var(--brand-hue);
    --funnel-cta-ghost-border: 0.85 0.015 var(--brand-hue);

    --gradient-funnel-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.52 0.21 calc(var(--brand-hue) + 24)) 55%,
      oklch(0.48 0.2 calc(var(--brand-hue) - 16)) 100%
    );
    --gradient-funnel-hero: radial-gradient(
      120% 80% at 50% 0%,
      oklch(0.55 0.2 var(--brand-hue) / 0.14) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 20) / 0.06) 40%,
      transparent 70%
    );
    --gradient-funnel-problem: linear-gradient(
      180deg,
      oklch(0.97 0.012 22) 0%,
      oklch(0.99 0.002 22) 100%
    );
    --shadow-funnel-nav: 0 4px 20px -8px
      oklch(0.15 0.01 var(--brand-hue) / 0.12);
    --shadow-funnel-cta: 0 14px 36px -12px
      oklch(0.45 0.19 var(--brand-hue) / 0.5);
    --shadow-funnel-cta-hover: 0 20px 44px -12px
      oklch(0.45 0.19 var(--brand-hue) / 0.62);
    --shadow-funnel-bar: 0 -8px 30px -10px
      oklch(0.15 0.01 var(--brand-hue) / 0.22);

    /* ── Client onboarding flow (5-step branded wizard) ── */
    --ob-shell: 0.985 0.004 var(--brand-hue);
    --ob-shell-foreground: 0.15 0.005 var(--brand-hue);
    --ob-card: 1.0 0 0;
    --ob-card-foreground: 0.15 0.005 var(--brand-hue);
    --ob-card-border: 0.9 0.01 var(--brand-hue);
    --ob-divider: 0.92 0.008 var(--brand-hue);
    --ob-label: 0.5 0.02 var(--brand-hue);
    --ob-meta: 0.55 0.02 var(--brand-hue);
    --ob-subhead: 0.4 0.015 var(--brand-hue);

    /* Step progress rail (5 steps) */
    --ob-rail-track: 0.92 0.008 var(--brand-hue);
    --ob-rail-fill: 0.55 0.2 var(--brand-hue);
    --ob-step-pending: 0.99 0.002 var(--brand-hue);
    --ob-step-pending-foreground: 0.55 0.02 var(--brand-hue);
    --ob-step-pending-border: 0.88 0.012 var(--brand-hue);
    --ob-step-current: 0.55 0.2 var(--brand-hue);
    --ob-step-current-foreground: 0.98 0 0;
    --ob-step-current-ring: 0.55 0.2 var(--brand-hue);
    --ob-step-current-glow: 0.55 0.2 var(--brand-hue);
    --ob-step-done: 0.62 0.17 150;
    --ob-step-done-foreground: 0.98 0 0;
    --ob-step-done-soft: 0.93 0.06 150;
    --ob-step-done-soft-foreground: 0.36 0.11 150;
    --ob-step-skipped: 0.95 0.004 var(--brand-hue);
    --ob-step-skipped-foreground: 0.6 0.01 var(--brand-hue);
    --ob-step-skipped-border: 0.88 0.008 var(--brand-hue);

    /* Video player surface (Step 1) */
    --ob-video-frame: 0.16 0.012 var(--brand-hue);
    --ob-video-frame-foreground: 0.96 0.005 var(--brand-hue);
    --ob-video-scrim: 0.08 0.005 var(--brand-hue);
    --ob-video-control: 0.96 0.005 var(--brand-hue);
    --ob-video-control-foreground: 0.16 0.012 var(--brand-hue);
    --ob-video-progress: 0.55 0.2 var(--brand-hue);
    --ob-video-progress-track: 0.3 0.014 var(--brand-hue);
    --ob-video-play: 0.55 0.2 var(--brand-hue);
    --ob-video-play-foreground: 0.98 0 0;

    /* Questionnaire fields (Step 2) */
    --ob-field: 0.99 0.002 var(--brand-hue);
    --ob-field-foreground: 0.15 0.005 var(--brand-hue);
    --ob-field-border: 0.9 0.01 var(--brand-hue);
    --ob-field-focus: 0.55 0.2 var(--brand-hue);
    --ob-field-soft: 0.965 0.006 var(--brand-hue);
    --ob-field-soft-foreground: 0.4 0.015 var(--brand-hue);
    --ob-helper: 0.55 0.02 var(--brand-hue);

    /* Contract review scroll area (Step 3) */
    --ob-paper: 1.0 0 0;
    --ob-paper-foreground: 0.15 0.005 var(--brand-hue);
    --ob-paper-rule: 0.9 0.01 var(--brand-hue);
    --ob-paper-header: 0.96 0.012 var(--brand-hue);
    --ob-paper-header-foreground: 0.2 0.02 var(--brand-hue);
    --ob-scroll-track: 0.92 0.008 var(--brand-hue);
    --ob-scroll-thumb: 0.7 0.02 var(--brand-hue);
    --ob-scroll-thumb-hover: 0.55 0.18 var(--brand-hue);
    --ob-accept: 0.62 0.17 150;
    --ob-accept-foreground: 0.98 0 0;
    --ob-accept-soft: 0.93 0.06 150;
    --ob-accept-soft-foreground: 0.36 0.11 150;
    --ob-changes: 0.96 0.012 var(--brand-hue);
    --ob-changes-foreground: 0.25 0.04 var(--brand-hue);
    --ob-changes-border: 0.85 0.015 var(--brand-hue);

    /* Welcome package prose (Step 4) */
    --ob-prose: 0.99 0.002 var(--brand-hue);
    --ob-prose-foreground: 0.18 0.008 var(--brand-hue);
    --ob-prose-heading: 0.15 0.005 var(--brand-hue);
    --ob-prose-accent: 0.45 0.18 var(--brand-hue);
    --ob-prose-rule: 0.9 0.01 var(--brand-hue);
    --ob-prose-quote: 0.55 0.18 var(--brand-hue);
    --ob-prose-quote-soft: 0.95 0.02 var(--brand-hue);

    /* Kickoff checklist (Step 5) */
    --ob-check-card: 1.0 0 0;
    --ob-check-card-foreground: 0.15 0.005 var(--brand-hue);
    --ob-check-card-border: 0.9 0.01 var(--brand-hue);
    --ob-check-row: 0.995 0.002 var(--brand-hue);
    --ob-check-row-hover: 0.97 0.008 var(--brand-hue);
    --ob-check-row-stripe: 0.985 0.004 var(--brand-hue);
    --ob-check-rule: 0.9 0.012 var(--brand-hue);
    --ob-check-box: 0.99 0.002 var(--brand-hue);
    --ob-check-box-border: 0.85 0.012 var(--brand-hue);
    --ob-check-box-checked: 0.62 0.17 150;
    --ob-check-box-checked-foreground: 0.98 0 0;
    --ob-check-text: 0.2 0.01 var(--brand-hue);
    --ob-check-text-done: 0.55 0.01 var(--brand-hue);
    --ob-check-meta: 0.55 0.02 var(--brand-hue);
    --ob-check-progress: 0.55 0.2 var(--brand-hue);
    --ob-check-progress-track: 0.92 0.008 var(--brand-hue);
    --ob-check-progress-foreground: 0.98 0 0;

    /* Onboarding action buttons */
    --ob-cta: 0.45 0.18 var(--brand-hue);
    --ob-cta-foreground: 0.98 0 0;
    --ob-cta-hover: 0.4 0.2 var(--brand-hue);
    --ob-skip: transparent;
    --ob-skip-foreground: 0.5 0.02 var(--brand-hue);
    --ob-skip-border: 0.85 0.012 var(--brand-hue);
    --ob-skip-hover: 0.96 0.008 var(--brand-hue);

    /* ── E-signature flow (typed-name signing + audit trail) ── */
    /* Signed badge — verified-executed green, distinct from --ob-accept (hue 150) */
    --sig-signed: 0.58 0.18 152;
    --sig-signed-foreground: 0.98 0 0;
    --sig-signed-soft: 0.93 0.06 152;
    --sig-signed-soft-foreground: 0.34 0.12 152;
    --sig-signed-dot: 0.58 0.18 152;

    /* Signature input field — fountain-pen ink + cursive italic treatment */
    --sig-ink: 0.2 0.02 var(--brand-hue);
    --sig-ink-soft: 0.4 0.02 var(--brand-hue);
    --sig-field: 1.0 0 0;
    --sig-field-foreground: 0.2 0.02 var(--brand-hue);
    --sig-field-border: 0.85 0.012 var(--brand-hue);
    --sig-field-focus: 0.45 0.18 var(--brand-hue);
    --sig-line: 0.55 0.04 var(--brand-hue);
    --sig-line-active: 0.45 0.18 var(--brand-hue);

    /* Signature panel — signing-ceremony paper, warmer than --ob-paper */
    --sig-panel: 0.995 0.004 75;
    --sig-panel-foreground: 0.18 0.008 var(--brand-hue);
    --sig-panel-border: 0.88 0.014 75;
    --sig-panel-rule: 0.9 0.012 75;
    --sig-panel-header: 0.96 0.014 75;
    --sig-panel-header-foreground: 0.22 0.02 var(--brand-hue);

    /* Sign Contract action — brand CTA, sits alongside Accept/Request-changes */
    --sig-cta: 0.45 0.18 var(--brand-hue);
    --sig-cta-foreground: 0.98 0 0;
    --sig-cta-hover: 0.4 0.2 var(--brand-hue);

    /* Audit-trail block — forensic/legal record, freelancer-only */
    --sig-audit: 0.975 0.005 var(--brand-hue);
    --sig-audit-foreground: 0.25 0.015 var(--brand-hue);
    --sig-audit-border: 0.88 0.012 var(--brand-hue);
    --sig-audit-rule: 0.9 0.01 var(--brand-hue);
    --sig-audit-label: 0.5 0.02 var(--brand-hue);
    --sig-audit-value: 0.18 0.008 var(--brand-hue);
    --sig-audit-accent: 0.58 0.18 152;
    --sig-audit-lock: 0.45 0.18 var(--brand-hue);

    /* Download Signed PDF action */
    --sig-download: 0.96 0.012 var(--brand-hue);
    --sig-download-foreground: 0.25 0.04 var(--brand-hue);
    --sig-download-border: 0.85 0.015 var(--brand-hue);
    --sig-download-hover: 0.93 0.018 var(--brand-hue);

    --gradient-sig-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-sig-panel: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.14), 0 6px 18px -10px
      oklch(0.15 0.01 var(--brand-hue) / 0.07), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-sig-cta: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-sig-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);

    --gradient-ob-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-ob-card: 0 18px 50px -20px oklch(0.45 0.18 var(--brand-hue) / 0.16),
      0 6px 18px -10px oklch(0.15 0.01 var(--brand-hue) / 0.08), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-ob-step-current: 0 0 0 4px oklch(0.55 0.2 var(--brand-hue) / 0.18),
      0 8px 22px -8px oklch(0.45 0.18 var(--brand-hue) / 0.4);
    --shadow-ob-cta: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-ob-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);

    /* ── Scope Creep Protection — Change Order document + scope-locked card ── */
    /* Change Order paper — branded printable doc, mirrors --invoice-paper /
       --sig-panel treatment. Warmer-tinted paper so it reads as a distinct
       contract artifact beside invoices. */
    --co-paper: 1.0 0.003 75;
    --co-paper-foreground: 0.15 0.005 var(--brand-hue);
    --co-rule: 0.88 0.012 75;
    --co-header: 0.96 0.016 75;
    --co-header-foreground: 0.2 0.02 var(--brand-hue);
    --co-section-head: 0.97 0.01 75;
    --co-section-head-foreground: 0.4 0.015 var(--brand-hue);
    --co-section-row: 0.995 0.002 75;
    --co-section-row-stripe: 0.985 0.004 75;
    --co-totals: 0.96 0.018 75;
    --co-totals-foreground: 0.2 0.02 var(--brand-hue);

    /* Change Order status tones — draft / sent / approved / rejected.
       Approved reuses the e-sig green family (hue 152) for cross-feature
       consistency; rejected reuses the destructive red family (hue 22).
       Draft = neutral, sent = brand. */
    --co-draft: 0.55 0.005 var(--brand-hue);
    --co-draft-foreground: 0.98 0 0;
    --co-draft-soft: 0.95 0.006 var(--brand-hue);
    --co-draft-soft-foreground: 0.42 0.01 var(--brand-hue);

    --co-sent: 0.5 0.16 var(--brand-hue);
    --co-sent-foreground: 0.98 0 0;
    --co-sent-soft: 0.93 0.03 var(--brand-hue);
    --co-sent-soft-foreground: 0.36 0.1 var(--brand-hue);

    --co-approved: 0.58 0.18 152;
    --co-approved-foreground: 0.98 0 0;
    --co-approved-soft: 0.93 0.06 152;
    --co-approved-soft-foreground: 0.34 0.12 152;

    --co-rejected: 0.55 0.22 22;
    --co-rejected-foreground: 0.98 0 0;
    --co-rejected-soft: 0.92 0.05 22;
    --co-rejected-soft-foreground: 0.45 0.18 22;

    /* Scope-locked card badge — the "Agreed Scope is locked" indicator on the
       project detail page. Distinct indigo-lock tone (brand hue, deeper). */
    --co-locked: 0.45 0.18 var(--brand-hue);
    --co-locked-foreground: 0.98 0 0;
    --co-locked-soft: 0.93 0.025 var(--brand-hue);
    --co-locked-soft-foreground: 0.36 0.11 var(--brand-hue);
    --co-locked-dot: 0.45 0.18 var(--brand-hue);

    /* Scope-locked card surface — sits on the project detail page */
    --co-card: 1.0 0 0;
    --co-card-foreground: 0.15 0.005 var(--brand-hue);
    --co-card-border: 0.9 0.01 var(--brand-hue);
    --co-deliverable-row: 0.995 0.002 var(--brand-hue);
    --co-deliverable-row-stripe: 0.985 0.004 var(--brand-hue);
    --co-deliverable-rule: 0.9 0.012 var(--brand-hue);
    --co-deliverable-num: 0.45 0.18 var(--brand-hue);
    --co-deliverable-num-foreground: 0.98 0 0;
    --co-lock-stamp: 0.45 0.18 var(--brand-hue);

    /* Flagged-message highlight — the scope-creep flag on a client message in
       the freelancer thread. Amber-tinted alert surface (hue 70) so it reads
       as "attention" without screaming error; the trigger phrase is
       emphasized with a deeper amber underline. */
    --co-flag: 0.78 0.16 70;
    --co-flag-foreground: 0.2 0.04 70;
    --co-flag-soft: 0.94 0.05 70;
    --co-flag-soft-foreground: 0.42 0.13 70;
    --co-flag-border: 0.82 0.12 70;
    --co-flag-phrase: 0.45 0.16 35;
    --co-flag-phrase-bg: 0.93 0.04 35;
    --co-flag-badge: 0.55 0.18 35;
    --co-flag-badge-foreground: 0.98 0 0;

    /* Scope-creep banner — the dismissible summary strip atop the Messages
       page when one or more client messages have been flagged. Amber-tinted
       alert surface (hue 70) so it reads as "attention" without screaming
       error. The dot is the inline status pip used inside .co-flag-badge
       when the badge is rendered standalone (e.g. inside the banner). */
    --co-flag-banner: 0.94 0.05 70;
    --co-flag-banner-foreground: 0.32 0.1 70;
    --co-flag-banner-border: 0.82 0.12 70;
    --co-flag-dot: 0.55 0.18 35;

    /* Audit timeline — immutable chronological scope-change log on the
       project detail page. Mirrors --sig-audit forensic treatment but on a
       vertical timeline rail. */
    --co-audit: 0.975 0.005 var(--brand-hue);
    --co-audit-foreground: 0.25 0.015 var(--brand-hue);
    --co-audit-border: 0.88 0.012 var(--brand-hue);
    --co-audit-rule: 0.9 0.01 var(--brand-hue);
    --co-audit-rail: 0.9 0.01 var(--brand-hue);
    --co-audit-node: 0.55 0.2 var(--brand-hue);
    --co-audit-node-foreground: 0.98 0 0;
    --co-audit-node-locked: 0.45 0.18 var(--brand-hue);
    --co-audit-node-flagged: 0.78 0.16 70;
    --co-audit-node-co: 0.5 0.16 var(--brand-hue);
    --co-audit-node-signed: 0.58 0.18 152;
    --co-audit-node-rejected: 0.55 0.22 22;
    --co-audit-label: 0.5 0.02 var(--brand-hue);
    --co-audit-value: 0.18 0.008 var(--brand-hue);
    --co-audit-meta: 0.55 0.02 var(--brand-hue);
    --co-audit-lock: 0.45 0.18 var(--brand-hue);

    /* Change Order CTA + gradient + shadows — mirrors --sig-cta */
    --co-cta: 0.45 0.18 var(--brand-hue);
    --co-cta-foreground: 0.98 0 0;
    --co-cta-hover: 0.4 0.2 var(--brand-hue);
    --co-download: 0.96 0.012 var(--brand-hue);
    --co-download-foreground: 0.25 0.04 var(--brand-hue);
    --co-download-border: 0.85 0.015 var(--brand-hue);
    --co-download-hover: 0.93 0.018 var(--brand-hue);
    --gradient-co-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-co-paper: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.14), 0 6px 18px -10px
      oklch(0.15 0.01 var(--brand-hue) / 0.07), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-co-cta: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-co-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);

    /* ── Custom-domain DNS settings + redirect + live verification ── */
    /* DNS records editor surface — extends the existing custom-domain card
       in SettingsPage. Calm indigo-tinted table mirroring --invoice-line-table
       treatment; record type selector limited to A / CNAME / TXT. */
    --dns-card: 1.0 0 0;
    --dns-card-foreground: 0.15 0.005 var(--brand-hue);
    --dns-card-border: 0.9 0.01 var(--brand-hue);
    --dns-section-head: 0.97 0.008 var(--brand-hue);
    --dns-section-head-foreground: 0.4 0.015 var(--brand-hue);
    --dns-row: 0.995 0.002 var(--brand-hue);
    --dns-row-hover: 0.97 0.01 var(--brand-hue);
    --dns-row-stripe: 0.985 0.004 var(--brand-hue);
    --dns-rule: 0.9 0.012 var(--brand-hue);

    /* Record-type pill — A / CNAME / TXT selector. Brand-tinted soft chip
       that solidifies on selection, mirroring --ret-unit toggle treatment. */
    --dns-type-pill: 0.95 0.012 var(--brand-hue);
    --dns-type-pill-foreground: 0.4 0.015 var(--brand-hue);
    --dns-type-pill-active: 0.45 0.18 var(--brand-hue);
    --dns-type-pill-active-foreground: 0.98 0 0;
    --dns-type-pill-ring: 0.55 0.2 var(--brand-hue);

    /* DNS record input fields — name + value free-text with format hints */
    --dns-field: 0.99 0.002 var(--brand-hue);
    --dns-field-foreground: 0.15 0.005 var(--brand-hue);
    --dns-field-border: 0.9 0.01 var(--brand-hue);
    --dns-field-focus: 0.55 0.2 var(--brand-hue);
    --dns-helper: 0.55 0.02 var(--brand-hue);

    /* Domain redirect toggle — single "Redirect to custom domain" switch.
       Mirrors the --ret-unit toggle on/off treatment. */
    --dns-toggle-track: 0.9 0.01 var(--brand-hue);
    --dns-toggle-track-on: 0.45 0.18 var(--brand-hue);
    --dns-toggle-thumb: 1.0 0 0;
    --dns-toggle-thumb-foreground: 0.45 0.18 var(--brand-hue);
    --dns-toggle-ring: 0.55 0.2 var(--brand-hue);

    /* Verification status tones — per-record resolved/failed + overall
       active/pending. Resolved reuses the e-sig green family (hue 152) for
       cross-feature consistency; failed reuses the destructive red (hue 22);
       pending reuses the brand indigo. */
    --dns-resolved: 0.58 0.18 152;
    --dns-resolved-foreground: 0.98 0 0;
    --dns-resolved-soft: 0.93 0.06 152;
    --dns-resolved-soft-foreground: 0.34 0.12 152;
    --dns-resolved-dot: 0.58 0.18 152;

    --dns-failed: 0.55 0.22 22;
    --dns-failed-foreground: 0.98 0 0;
    --dns-failed-soft: 0.92 0.05 22;
    --dns-failed-soft-foreground: 0.45 0.18 22;
    --dns-failed-dot: 0.55 0.22 22;

    --dns-pending: 0.5 0.16 var(--brand-hue);
    --dns-pending-foreground: 0.98 0 0;
    --dns-pending-soft: 0.93 0.03 var(--brand-hue);
    --dns-pending-soft-foreground: 0.36 0.1 var(--brand-hue);
    --dns-pending-dot: 0.5 0.16 var(--brand-hue);

    /* Domain active badge — overall "domain active" indicator once all
       records verify. Solid green, distinct from per-record resolved. */
    --dns-active: 0.58 0.18 152;
    --dns-active-foreground: 0.98 0 0;
    --dns-active-soft: 0.93 0.06 152;
    --dns-active-soft-foreground: 0.34 0.12 152;
    --dns-active-dot: 0.58 0.18 152;

    /* Verify DNS CTA — brand CTA, mirrors --sig-cta / --co-cta */
    --dns-cta: 0.45 0.18 var(--brand-hue);
    --dns-cta-foreground: 0.98 0 0;
    --dns-cta-hover: 0.4 0.2 var(--brand-hue);

    /* Verification audit log — immutable on-canister record following the
       SignedContract allocate-write-return pattern. Mirrors --sig-audit /
       --co-audit forensic treatment but on a compact inline timeline. */
    --dns-audit: 0.975 0.005 var(--brand-hue);
    --dns-audit-foreground: 0.25 0.015 var(--brand-hue);
    --dns-audit-border: 0.88 0.012 var(--brand-hue);
    --dns-audit-rule: 0.9 0.01 var(--brand-hue);
    --dns-audit-rail: 0.9 0.01 var(--brand-hue);
    --dns-audit-node: 0.55 0.2 var(--brand-hue);
    --dns-audit-node-foreground: 0.98 0 0;
    --dns-audit-node-resolved: 0.58 0.18 152;
    --dns-audit-node-failed: 0.55 0.22 22;
    --dns-audit-node-pending: 0.5 0.16 var(--brand-hue);
    --dns-audit-label: 0.5 0.02 var(--brand-hue);
    --dns-audit-value: 0.18 0.008 var(--brand-hue);
    --dns-audit-meta: 0.55 0.02 var(--brand-hue);
    --dns-audit-lock: 0.45 0.18 var(--brand-hue);

    --gradient-dns-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-dns-card: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.14), 0 6px 18px -10px
      oklch(0.15 0.01 var(--brand-hue) / 0.07), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-dns-cta: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-dns-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);

    /* ── Dispute Evidence Package — disputed badge + cover page + stamp ── */
    /* Disputed invoice badge — distinct magenta-rose "contested" tone (hue 350)
       that reads as legal contest, deliberately separated from overdue red
       (hue 22), destructive (hue 22), and amber scope-creep flags (hue 70).
       Sits ALONGSIDE the existing --inv-* status badge, never replacing it. */
    --dispute: 0.5 0.2 350;
    --dispute-foreground: 0.98 0 0;
    --dispute-soft: 0.93 0.05 350;
    --dispute-soft-foreground: 0.42 0.15 350;
    --dispute-dot: 0.5 0.2 350;

    /* Evidence package cover page — branded printable paper, mirrors
       --co-paper / --invoice-paper / --sig-panel treatment. Warm-tinted
       (hue 75) so it reads as a distinct legal artifact beside invoices and
       change orders. Cover shows freelancer business name, client name,
       invoice reference, and a key-dates-and-facts summary block. */
    --dispute-paper: 1.0 0.003 75;
    --dispute-paper-foreground: 0.15 0.005 var(--brand-hue);
    --dispute-rule: 0.88 0.012 75;
    --dispute-header: 0.96 0.016 75;
    --dispute-header-foreground: 0.2 0.02 var(--brand-hue);
    --dispute-section-head: 0.97 0.01 75;
    --dispute-section-head-foreground: 0.4 0.015 var(--brand-hue);
    --dispute-fact-row: 0.995 0.002 75;
    --dispute-fact-row-stripe: 0.985 0.004 75;
    --dispute-fact-label: 0.5 0.02 var(--brand-hue);
    --dispute-fact-value: 0.15 0.005 var(--brand-hue);

    /* Blockchain verification stamp — deep indigo seal asserting all data is
       tamperproof and timestamped on the Internet Computer. Mirrors the
       --sig-audit-lock / --co-locked indigo treatment but rendered as a
       circular stamp with a double-ring and arched "TAMPERPROOF" text.
       Lists the on-canister audit record id + generation timestamp. */
    --dispute-stamp: 0.45 0.18 var(--brand-hue);
    --dispute-stamp-foreground: 0.98 0 0;
    --dispute-stamp-ring: 0.45 0.18 var(--brand-hue);
    --dispute-stamp-glow: 0.55 0.2 var(--brand-hue);
    --dispute-stamp-meta: 0.5 0.02 var(--brand-hue);
    --dispute-stamp-lock: 0.45 0.18 var(--brand-hue);

    /* Verification audit block — immutable on-canister record following the
       SignedContract allocate-write-return pattern. Mirrors --sig-audit /
       --co-audit / --dns-audit forensic treatment. */
    --dispute-audit: 0.975 0.005 var(--brand-hue);
    --dispute-audit-foreground: 0.25 0.015 var(--brand-hue);
    --dispute-audit-border: 0.88 0.012 var(--brand-hue);
    --dispute-audit-rule: 0.9 0.01 var(--brand-hue);
    --dispute-audit-label: 0.5 0.02 var(--brand-hue);
    --dispute-audit-value: 0.18 0.008 var(--brand-hue);
    --dispute-audit-meta: 0.55 0.02 var(--brand-hue);
    --dispute-audit-lock: 0.45 0.18 var(--brand-hue);

    /* Generate Evidence Package CTA + download — mirrors --sig-cta /
       --co-cta / --dns-cta brand CTA pattern. */
    --dispute-cta: 0.45 0.18 var(--brand-hue);
    --dispute-cta-foreground: 0.98 0 0;
    --dispute-cta-hover: 0.4 0.2 var(--brand-hue);
    --dispute-download: 0.96 0.012 var(--brand-hue);
    --dispute-download-foreground: 0.25 0.04 var(--brand-hue);
    --dispute-download-border: 0.85 0.015 var(--brand-hue);
    --dispute-download-hover: 0.93 0.018 var(--brand-hue);
    --gradient-dispute-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-dispute-paper: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.14), 0 6px 18px -10px
      oklch(0.15 0.01 var(--brand-hue) / 0.07), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-dispute-stamp: 0 0 0 1px oklch(0.55 0.2 var(--brand-hue) / 0.22), 0
      14px 36px -14px oklch(0.45 0.18 var(--brand-hue) / 0.38), 0 4px 14px -6px
      oklch(0.45 0.18 var(--brand-hue) / 0.22);
    --shadow-dispute-cta: 0 10px 28px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-dispute-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);

    /* ── Public freelancer profile + directory (--profile-* additive layer) ── */
    /* Public-facing SEO storefront at suitedly.site/$slug. Inherits --brand-hue
       so each freelancer's profile retints automatically. Editorial-magazine
       treatment: a wide branded header band, services as a numbered editorial
       list, reviews as pull-quote cards, directory as a clean card grid.
       Reuses the existing e-sig green family (hue 152) for star ratings so
       "trusted" reads consistently across the app. */
    --profile-shell: 0.985 0.004 var(--brand-hue);
    --profile-shell-foreground: 0.15 0.005 var(--brand-hue);

    /* Profile header band — wide branded hero behind logo + business name +
       tagline + star rating. Tinted with brand hue at low chroma so it reads
       as a magazine cover, not a dashboard. */
    --profile-header: 0.97 0.018 var(--brand-hue);
    --profile-header-foreground: 0.16 0.012 var(--brand-hue);
    --profile-header-border: 0.88 0.014 var(--brand-hue);
    --profile-header-accent: 0.55 0.2 var(--brand-hue);
    --profile-header-accent-foreground: 0.98 0 0;

    /* Logo frame — rounded square holding the freelancer logo on the header */
    --profile-logo-frame: 1.0 0 0;
    --profile-logo-frame-foreground: 0.15 0.005 var(--brand-hue);
    --profile-logo-frame-border: 0.88 0.012 var(--brand-hue);

    /* Star rating — reuses e-sig green family (hue 152) so "trusted" reads
       consistently across the app. Filled + empty star states. */
    --profile-star-filled: 0.7 0.17 75;
    --profile-star-empty: 0.85 0.02 var(--brand-hue);
    --profile-rating-text: 0.2 0.02 var(--brand-hue);
    --profile-rating-meta: 0.5 0.02 var(--brand-hue);

    /* Section surfaces — alternating bands for editorial rhythm */
    --profile-section: 1.0 0 0;
    --profile-section-foreground: 0.15 0.005 var(--brand-hue);
    --profile-section-alt: 0.975 0.006 var(--brand-hue);
    --profile-section-alt-foreground: 0.16 0.008 var(--brand-hue);
    --profile-section-rule: 0.9 0.01 var(--brand-hue);
    --profile-section-label: 0.5 0.02 var(--brand-hue);
    --profile-section-heading: 0.15 0.005 var(--brand-hue);

    /* Services list — numbered editorial rows (name, description, duration,
       price). Mirrors --invoice-line-table treatment but lighter. */
    --profile-service-row: 0.995 0.002 var(--brand-hue);
    --profile-service-row-hover: 0.97 0.01 var(--brand-hue);
    --profile-service-row-stripe: 0.985 0.004 var(--brand-hue);
    --profile-service-rule: 0.9 0.012 var(--brand-hue);
    --profile-service-num: 0.55 0.2 var(--brand-hue);
    --profile-service-num-foreground: 0.98 0 0;
    --profile-service-name: 0.15 0.005 var(--brand-hue);
    --profile-service-desc: 0.4 0.015 var(--brand-hue);
    --profile-service-meta: 0.5 0.02 var(--brand-hue);
    --profile-service-price: 0.2 0.02 var(--brand-hue);

    /* Review cards — pull-quote treatment with star row + author + date */
    --profile-review-card: 1.0 0 0;
    --profile-review-card-foreground: 0.15 0.005 var(--brand-hue);
    --profile-review-card-border: 0.9 0.01 var(--brand-hue);
    --profile-review-quote: 0.25 0.015 var(--brand-hue);
    --profile-review-author: 0.15 0.005 var(--brand-hue);
    --profile-review-meta: 0.5 0.02 var(--brand-hue);
    --profile-review-empty: 0.96 0.006 var(--brand-hue);
    --profile-review-empty-foreground: 0.5 0.02 var(--brand-hue);

    /* Book a Discovery Call CTA — brand gradient button, mirrors --sig-cta */
    --profile-cta: 0.45 0.18 var(--brand-hue);
    --profile-cta-foreground: 0.98 0 0;
    --profile-cta-hover: 0.4 0.2 var(--brand-hue);
    --profile-cta-secondary: 0.96 0.012 var(--brand-hue);
    --profile-cta-secondary-foreground: 0.25 0.04 var(--brand-hue);
    --profile-cta-secondary-border: 0.85 0.015 var(--brand-hue);

    /* Private profile state — "not publicly available" surface */
    --profile-private: 0.96 0.006 var(--brand-hue);
    --profile-private-foreground: 0.4 0.015 var(--brand-hue);
    --profile-private-border: 0.88 0.012 var(--brand-hue);
    --profile-private-icon: 0.5 0.02 var(--brand-hue);

    /* Directory page — grid of freelancer cards */
    --profile-directory-bg: 0.985 0.004 var(--brand-hue);
    --profile-directory-foreground: 0.15 0.005 var(--brand-hue);
    --profile-card: 1.0 0 0;
    --profile-card-foreground: 0.15 0.005 var(--brand-hue);
    --profile-card-border: 0.9 0.01 var(--brand-hue);
    --profile-card-hover-border: 0.55 0.2 var(--brand-hue);
    --profile-card-logo: 0.96 0.012 var(--brand-hue);
    --profile-card-logo-foreground: 0.3 0.04 var(--brand-hue);
    --profile-card-name: 0.15 0.005 var(--brand-hue);
    --profile-card-tagline: 0.4 0.015 var(--brand-hue);
    --profile-card-meta: 0.5 0.02 var(--brand-hue);

    /* Directory search + filter bar */
    --profile-filter-bar: 1.0 0 0;
    --profile-filter-bar-foreground: 0.15 0.005 var(--brand-hue);
    --profile-filter-bar-border: 0.9 0.01 var(--brand-hue);
    --profile-filter-field: 0.99 0.002 var(--brand-hue);
    --profile-filter-field-foreground: 0.15 0.005 var(--brand-hue);
    --profile-filter-field-border: 0.9 0.01 var(--brand-hue);
    --profile-filter-field-focus: 0.55 0.2 var(--brand-hue);
    --profile-filter-chip: 0.95 0.012 var(--brand-hue);
    --profile-filter-chip-foreground: 0.4 0.015 var(--brand-hue);
    --profile-filter-chip-active: 0.45 0.18 var(--brand-hue);
    --profile-filter-chip-active-foreground: 0.98 0 0;

    /* Directory empty state */
    --profile-empty: 0.97 0.006 var(--brand-hue);
    --profile-empty-foreground: 0.5 0.02 var(--brand-hue);

    --gradient-profile-header: linear-gradient(
      135deg,
      oklch(0.97 0.018 var(--brand-hue)) 0%,
      oklch(0.95 0.022 calc(var(--brand-hue) + 12)) 60%,
      oklch(0.98 0.012 calc(var(--brand-hue) - 8)) 100%
    );
    --gradient-profile-cta: linear-gradient(
      120deg,
      oklch(0.45 0.19 var(--brand-hue)) 0%,
      oklch(0.55 0.21 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.5 0.2 calc(var(--brand-hue) - 14)) 100%
    );
    --glow-profile-header: radial-gradient(
      60% 80% at 18% 12%,
      oklch(0.55 0.2 var(--brand-hue) / 0.12) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 18) / 0.05) 45%,
      transparent 72%
    );
    --shadow-profile-card: 0 12px 32px -16px
      oklch(0.45 0.18 var(--brand-hue) / 0.16), 0 4px 12px -6px
      oklch(0.15 0.01 var(--brand-hue) / 0.06), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.04);
    --shadow-profile-card-hover: 0 20px 44px -16px
      oklch(0.45 0.18 var(--brand-hue) / 0.28), 0 8px 18px -8px
      oklch(0.15 0.01 var(--brand-hue) / 0.1), 0 1px 2px 0
      oklch(0.15 0.01 var(--brand-hue) / 0.05);
    --shadow-profile-review: 0 10px 28px -14px
      oklch(0.45 0.18 var(--brand-hue) / 0.12), 0 2px 8px -4px
      oklch(0.15 0.01 var(--brand-hue) / 0.05);
    --shadow-profile-cta: 0 10px 28px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.45);
    --shadow-profile-cta-hover: 0 14px 32px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.58);
  }

  .dark {
    --background: 0.145 0.01 var(--brand-hue);
    --foreground: 0.95 0.005 var(--brand-hue);
    --card: 0.18 0.012 var(--brand-hue);
    --card-foreground: 0.95 0.005 var(--brand-hue);
    --popover: 0.22 0.014 var(--brand-hue);
    --popover-foreground: 0.95 0.005 var(--brand-hue);

    --primary: 0.7 0.17 var(--brand-hue);
    --primary-foreground: 0.145 0.01 var(--brand-hue);

    --secondary: 0.22 0.014 var(--brand-hue);
    --secondary-foreground: 0.85 0.01 var(--brand-hue);
    --muted: 0.22 0.012 var(--brand-hue);
    --muted-foreground: 0.55 0.02 var(--brand-hue);

    --accent: 0.72 0.18 var(--brand-hue);
    --accent-foreground: 0.145 0.01 var(--brand-hue);

    --destructive: 0.65 0.19 22;
    --destructive-foreground: 0.145 0.01 var(--brand-hue);

    --no-show: 0.68 0.13 15;
    --no-show-foreground: 0.145 0.01 var(--brand-hue);
    --no-show-soft: 0.26 0.04 15;
    --no-show-soft-foreground: 0.82 0.04 15;

    --success: 0.7 0.16 150;
    --success-foreground: 0.145 0.01 var(--brand-hue);
    --warning: 0.82 0.15 75;
    --warning-foreground: 0.2 0.04 75;

    --notes-surface: 0.2 0.012 75;
    --notes-surface-foreground: 0.92 0.008 var(--brand-hue);
    --notes-border: 0.3 0.022 75;

    --slot-available: 0.24 0.016 var(--brand-hue);
    --slot-available-foreground: 0.88 0.012 var(--brand-hue);
    --slot-selected: 0.7 0.17 var(--brand-hue);
    --slot-selected-foreground: 0.145 0.01 var(--brand-hue);
    --slot-taken: 0.2 0.008 var(--brand-hue);
    --slot-taken-foreground: 0.45 0.01 var(--brand-hue);

    --calendar-today: 0.26 0.018 var(--brand-hue);
    --calendar-available-dot: 0.72 0.18 var(--brand-hue);
    --ring-booking: 0.72 0.18 var(--brand-hue);

    /* ── Invoice status tones (6 states) — dark ── */
    --inv-draft: 0.6 0.008 var(--brand-hue);
    --inv-draft-foreground: 0.145 0.01 var(--brand-hue);
    --inv-draft-soft: 0.24 0.01 var(--brand-hue);
    --inv-draft-soft-foreground: 0.78 0.01 var(--brand-hue);

    --inv-sent: 0.7 0.16 var(--brand-hue);
    --inv-sent-foreground: 0.145 0.01 var(--brand-hue);
    --inv-sent-soft: 0.26 0.03 var(--brand-hue);
    --inv-sent-soft-foreground: 0.82 0.08 var(--brand-hue);

    --inv-viewed: 0.72 0.14 245;
    --inv-viewed-foreground: 0.145 0.01 var(--brand-hue);
    --inv-viewed-soft: 0.26 0.03 245;
    --inv-viewed-soft-foreground: 0.82 0.08 245;

    --inv-partial: 0.82 0.15 70;
    --inv-partial-foreground: 0.2 0.04 70;
    --inv-partial-soft: 0.28 0.04 70;
    --inv-partial-soft-foreground: 0.85 0.1 70;

    --inv-paid: 0.7 0.16 150;
    --inv-paid-foreground: 0.145 0.01 var(--brand-hue);
    --inv-paid-soft: 0.26 0.04 150;
    --inv-paid-soft-foreground: 0.82 0.1 150;

    --inv-overdue: 0.65 0.19 22;
    --inv-overdue-foreground: 0.145 0.01 var(--brand-hue);
    --inv-overdue-soft: 0.28 0.05 22;
    --inv-overdue-soft-foreground: 0.84 0.14 22;

    /* ── Retainer status tones — dark ── */
    --ret-active: 0.72 0.18 var(--brand-hue);
    --ret-active-foreground: 0.145 0.01 var(--brand-hue);
    --ret-active-soft: 0.26 0.03 var(--brand-hue);
    --ret-active-soft-foreground: 0.82 0.08 var(--brand-hue);

    --ret-paused: 0.82 0.15 70;
    --ret-paused-foreground: 0.2 0.04 70;
    --ret-paused-soft: 0.28 0.04 70;
    --ret-paused-soft-foreground: 0.85 0.1 70;

    --ret-canceled: 0.6 0.008 var(--brand-hue);
    --ret-canceled-foreground: 0.145 0.01 var(--brand-hue);
    --ret-canceled-soft: 0.24 0.01 var(--brand-hue);
    --ret-canceled-soft-foreground: 0.78 0.01 var(--brand-hue);

    /* ── Retainer unit toggle — dark ── */
    --ret-unit: 0.22 0.014 var(--brand-hue);
    --ret-unit-foreground: 0.6 0.02 var(--brand-hue);
    --ret-unit-active: 0.26 0.03 var(--brand-hue);
    --ret-unit-active-foreground: 0.9 0.01 var(--brand-hue);
    --ret-unit-ring: 0.72 0.18 var(--brand-hue);

    /* ── Retainer usage progress — dark ── */
    --usage-track: 0.22 0.012 var(--brand-hue);
    --usage-fill-ok: 0.72 0.18 var(--brand-hue);
    --usage-fill-ok-foreground: 0.145 0.01 var(--brand-hue);
    --usage-fill-approaching: 0.82 0.15 70;
    --usage-fill-approaching-foreground: 0.2 0.04 70;
    --usage-fill-exceeded: 0.65 0.19 22;
    --usage-fill-exceeded-foreground: 0.145 0.01 var(--brand-hue);
    --usage-soft-ok: 0.26 0.03 var(--brand-hue);
    --usage-soft-ok-foreground: 0.82 0.08 var(--brand-hue);
    --usage-soft-approaching: 0.28 0.04 70;
    --usage-soft-approaching-foreground: 0.85 0.1 70;
    --usage-soft-exceeded: 0.28 0.05 22;
    --usage-soft-exceeded-foreground: 0.84 0.14 22;

    /* ── Retainer card surface — dark ── */
    --ret-card: 0.18 0.012 var(--brand-hue);
    --ret-card-foreground: 0.95 0.005 var(--brand-hue);
    --ret-card-border: 0.28 0.014 var(--brand-hue);
    --ret-accent: 0.72 0.18 var(--brand-hue);
    --ret-accent-income: 0.7 0.16 150;
    --ret-label: 0.6 0.02 var(--brand-hue);
    --ret-value: 0.95 0.005 var(--brand-hue);
    --ret-meta: 0.6 0.02 var(--brand-hue);
    --ret-divider: 0.3 0.016 var(--brand-hue);

    /* ── Retainer time-log table — dark ── */
    --ret-log-head: 0.22 0.014 var(--brand-hue);
    --ret-log-head-foreground: 0.7 0.012 var(--brand-hue);
    --ret-log-row: 0.18 0.011 var(--brand-hue);
    --ret-log-row-hover: 0.22 0.016 var(--brand-hue);
    --ret-log-row-stripe: 0.2 0.012 var(--brand-hue);
    --ret-log-amount: 0.95 0.005 var(--brand-hue);
    --ret-log-rule: 0.3 0.016 var(--brand-hue);
    --ret-log-group: 0.24 0.022 var(--brand-hue);
    --ret-log-group-foreground: 0.9 0.01 var(--brand-hue);

    /* ── Overage invoice tone — dark ── */
    --ret-overage: 0.72 0.17 35;
    --ret-overage-foreground: 0.145 0.01 var(--brand-hue);
    --ret-overage-soft: 0.28 0.05 35;
    --ret-overage-soft-foreground: 0.85 0.12 35;

    /* ── Branded invoice document surface — dark ── */
    --invoice-paper: 0.18 0.012 var(--brand-hue);
    --invoice-paper-foreground: 0.95 0.005 var(--brand-hue);
    --invoice-rule: 0.3 0.016 var(--brand-hue);
    --invoice-header: 0.24 0.025 var(--brand-hue);
    --invoice-header-foreground: 0.92 0.01 var(--brand-hue);
    --invoice-line-head: 0.22 0.014 var(--brand-hue);
    --invoice-line-head-foreground: 0.7 0.012 var(--brand-hue);
    --invoice-line-row: 0.18 0.011 var(--brand-hue);
    --invoice-line-row-hover: 0.22 0.016 var(--brand-hue);
    --invoice-totals: 0.24 0.022 var(--brand-hue);
    --invoice-totals-foreground: 0.92 0.01 var(--brand-hue);

    /* ── Payment method picker dialog — dark ── */
    --pay-method: 0.2 0.012 var(--brand-hue);
    --pay-method-foreground: 0.92 0.008 var(--brand-hue);
    --pay-method-hover: 0.24 0.016 var(--brand-hue);
    --pay-method-selected: 0.26 0.03 var(--brand-hue);
    --pay-method-selected-foreground: 0.9 0.01 var(--brand-hue);
    --pay-method-ring: 0.72 0.18 var(--brand-hue);

    /* ── Checkout dialog (Pay Now flow) — dark ── */
    --checkout-surface: 0.2 0.012 var(--brand-hue);
    --checkout-surface-foreground: 0.95 0.005 var(--brand-hue);
    --checkout-header: 0.24 0.025 var(--brand-hue);
    --checkout-header-foreground: 0.92 0.01 var(--brand-hue);
    --checkout-summary: 0.22 0.018 var(--brand-hue);
    --checkout-summary-foreground: 0.92 0.01 var(--brand-hue);
    --checkout-divider: 0.3 0.016 var(--brand-hue);
    --checkout-field: 0.2 0.012 var(--brand-hue);
    --checkout-field-foreground: 0.95 0.005 var(--brand-hue);
    --checkout-field-border: 0.3 0.016 var(--brand-hue);
    --checkout-field-focus: 0.72 0.18 var(--brand-hue);
    --checkout-tab: 0.22 0.014 var(--brand-hue);
    --checkout-tab-foreground: 0.6 0.02 var(--brand-hue);
    --checkout-tab-active: 0.26 0.03 var(--brand-hue);
    --checkout-tab-active-foreground: 0.9 0.01 var(--brand-hue);
    --checkout-tab-active-ring: 0.72 0.18 var(--brand-hue);
    --checkout-secure-bar: 0.22 0.014 var(--brand-hue);
    --checkout-secure-bar-foreground: 0.6 0.02 var(--brand-hue);
    --checkout-overlay: 0.08 0.005 var(--brand-hue);
    --gradient-pay-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );

    /* ── Payment method badges — dark ── */
    --pm-stripe: 0.72 0.18 265;
    --pm-stripe-foreground: 0.145 0.01 var(--brand-hue);
    --pm-stripe-soft: 0.26 0.03 265;
    --pm-stripe-soft-foreground: 0.82 0.08 265;
    --pm-coinbase: 0.72 0.16 245;
    --pm-coinbase-foreground: 0.145 0.01 var(--brand-hue);
    --pm-coinbase-soft: 0.26 0.03 245;
    --pm-coinbase-soft-foreground: 0.82 0.08 245;
    --pm-nowpayments: 0.72 0.15 175;
    --pm-nowpayments-foreground: 0.145 0.01 var(--brand-hue);
    --pm-nowpayments-soft: 0.26 0.03 175;
    --pm-nowpayments-soft-foreground: 0.82 0.08 175;
    --pm-manual: 0.6 0.008 var(--brand-hue);
    --pm-manual-foreground: 0.145 0.01 var(--brand-hue);
    --pm-manual-soft: 0.24 0.01 var(--brand-hue);
    --pm-manual-soft-foreground: 0.78 0.01 var(--brand-hue);

    /* ── Payment status tones — dark ── */
    --pay-succeeded: 0.7 0.16 150;
    --pay-succeeded-foreground: 0.145 0.01 var(--brand-hue);
    --pay-succeeded-soft: 0.26 0.04 150;
    --pay-succeeded-soft-foreground: 0.82 0.1 150;
    --pay-pending: 0.82 0.15 70;
    --pay-pending-foreground: 0.2 0.04 70;
    --pay-pending-soft: 0.28 0.04 70;
    --pay-pending-soft-foreground: 0.85 0.1 70;
    --pay-failed: 0.65 0.19 22;
    --pay-failed-foreground: 0.145 0.01 var(--brand-hue);
    --pay-failed-soft: 0.28 0.05 22;
    --pay-failed-soft-foreground: 0.84 0.14 22;
    --pay-refunded: 0.6 0.008 var(--brand-hue);
    --pay-refunded-foreground: 0.145 0.01 var(--brand-hue);
    --pay-refunded-soft: 0.24 0.01 var(--brand-hue);
    --pay-refunded-soft-foreground: 0.78 0.01 var(--brand-hue);

    /* ── Payment history table — dark ── */
    --pay-history-head: 0.22 0.014 var(--brand-hue);
    --pay-history-head-foreground: 0.7 0.012 var(--brand-hue);
    --pay-history-row: 0.18 0.011 var(--brand-hue);
    --pay-history-row-hover: 0.22 0.016 var(--brand-hue);
    --pay-history-row-stripe: 0.2 0.012 var(--brand-hue);
    --pay-history-amount: 0.95 0.005 var(--brand-hue);
    --pay-history-rule: 0.3 0.016 var(--brand-hue);

    /* ── Revenue summary stat cards — dark ── */
    --stat-card: 0.18 0.012 var(--brand-hue);
    --stat-card-foreground: 0.95 0.005 var(--brand-hue);
    --stat-card-border: 0.28 0.014 var(--brand-hue);
    --stat-accent: 0.72 0.18 var(--brand-hue);
    --stat-accent-positive: 0.7 0.16 150;
    --stat-accent-negative: 0.65 0.19 22;
    --stat-label: 0.6 0.02 var(--brand-hue);
    --stat-value: 0.95 0.005 var(--brand-hue);
    --stat-delta-positive: 0.82 0.1 150;
    --stat-delta-positive-soft: 0.26 0.04 150;
    --stat-delta-negative: 0.84 0.14 22;
    --stat-delta-negative-soft: 0.26 0.04 22;
    --stat-delta-neutral: 0.6 0.02 var(--brand-hue);
    --stat-delta-neutral-soft: 0.22 0.014 var(--brand-hue);

    /* ── Pricing tier cards — dark ── */
    --tier-card: 0.18 0.012 var(--brand-hue);
    --tier-card-foreground: 0.95 0.005 var(--brand-hue);
    --tier-border: 0.28 0.014 var(--brand-hue);
    --tier-free: 0.22 0.012 var(--brand-hue);
    --tier-free-foreground: 0.7 0.012 var(--brand-hue);
    --tier-paid: 0.7 0.17 var(--brand-hue);
    --tier-paid-foreground: 0.145 0.01 var(--brand-hue);
    --tier-lifetime: 0.7 0.19 var(--brand-hue);
    --tier-lifetime-foreground: 0.145 0.01 var(--brand-hue);
    --tier-lifetime-ring: 0.72 0.18 var(--brand-hue);
    --tier-lifetime-badge: 0.72 0.18 var(--brand-hue);
    --tier-lifetime-badge-foreground: 0.145 0.01 var(--brand-hue);
    --gradient-lifetime: linear-gradient(
      135deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );

    --border: 0.28 0.014 var(--brand-hue);
    --input: 0.28 0.014 var(--brand-hue);
    --ring: 0.7 0.17 var(--brand-hue);

    --chart-1: 0.49 0.24 264;
    --chart-2: 0.7 0.17 162;
    --chart-3: 0.77 0.19 70;
    --chart-4: 0.63 0.27 304;
    --chart-5: 0.65 0.25 16;

    /* ── 90-day income forecast — dark (confidence tiers + progress + alert) ── */
    /* Confidence tiers: high = retainers (green), medium = invoices (amber),
       low = pipeline (red). Dark-mode L-shift lifts fills so they read on
       dark surfaces; soft backgrounds darken to ~0.26 for contrast. */
    --confidence-high: 0.7 0.16 150;
    --confidence-high-foreground: 0.12 0.03 150;
    --confidence-high-soft: 0.26 0.04 150;
    --confidence-high-soft-foreground: 0.82 0.1 150;
    --confidence-medium: 0.82 0.15 70;
    --confidence-medium-foreground: 0.16 0.03 70;
    --confidence-medium-soft: 0.26 0.04 70;
    --confidence-medium-soft-foreground: 0.85 0.12 70;
    --confidence-low: 0.65 0.19 22;
    --confidence-low-foreground: 0.14 0.03 22;
    --confidence-low-soft: 0.26 0.05 22;
    --confidence-low-soft-foreground: 0.82 0.16 22;

    /* Progress bar — dark. Track lifts to a mid-surface; fills mirror the
       confidence tiers (on-target green, below amber, severe red). */
    --progress-bar-track: 0.24 0.012 var(--brand-hue);
    --progress-bar-fill-on-target: 0.7 0.16 150;
    --progress-bar-fill-on-target-foreground: 0.12 0.03 150;
    --progress-bar-fill-below: 0.82 0.15 70;
    --progress-bar-fill-below-foreground: 0.16 0.03 70;
    --progress-bar-fill-severe: 0.65 0.19 22;
    --progress-bar-fill-severe-foreground: 0.14 0.03 22;

    /* Shortfall alert panel — dark. Calm amber-tinted surface; accent stays
       red for the "act soon" cue without screaming error. */
    --alert-warning-bg: 0.26 0.04 70;
    --alert-warning-border: 0.42 0.1 70;
    --alert-warning-text: 0.92 0.04 70;
    --alert-warning-accent: 0.7 0.18 22;

    --sidebar: 0.16 0.012 var(--brand-hue);
    --sidebar-foreground: 0.95 0.005 var(--brand-hue);
    --sidebar-primary: 0.7 0.17 var(--brand-hue);
    --sidebar-primary-foreground: 0.145 0.01 var(--brand-hue);
    --sidebar-accent: 0.22 0.014 var(--brand-hue);
    --sidebar-accent-foreground: 0.85 0.01 var(--brand-hue);
    --sidebar-border: 0.28 0.014 var(--brand-hue);
    --sidebar-ring: 0.7 0.17 var(--brand-hue);

    --space-section: 7rem;
    --space-section-mobile: 3.5rem;
    --space-block: 2rem;
    --space-block-tight: 1.25rem;

    --gradient-hero: linear-gradient(
      135deg,
      oklch(0.42 0.17 var(--brand-hue)) 0%,
      oklch(0.5 0.18 calc(var(--brand-hue) + 18)) 38%,
      oklch(0.58 0.18 calc(var(--brand-hue) - 12)) 72%,
      oklch(0.62 0.17 var(--brand-hue)) 100%
    );
    --gradient-section: linear-gradient(
      180deg,
      oklch(0.16 0.013 var(--brand-hue)) 0%,
      oklch(0.18 0.014 var(--brand-hue)) 42%,
      oklch(0.145 0.01 var(--brand-hue)) 100%
    );
    --gradient-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --glow-hero: radial-gradient(
      55% 55% at 72% 28%,
      oklch(0.6 0.2 var(--brand-hue) / 0.32) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 20) / 0.12) 45%,
      transparent 72%
    );

    /* ── Funnel landing page tokens — dark ── */
    --funnel-nav: 0.16 0.012 var(--brand-hue);
    --funnel-nav-foreground: 0.92 0.008 var(--brand-hue);
    --funnel-nav-border: 0.28 0.014 var(--brand-hue);
    --funnel-nav-scrolled: 0.18 0.014 var(--brand-hue);
    --funnel-nav-scrolled-border: 0.32 0.018 var(--brand-hue);

    --funnel-section-alt: 0.18 0.012 var(--brand-hue);
    --funnel-section-alt-foreground: 0.95 0.005 var(--brand-hue);
    --funnel-section-dark: 0.13 0.014 var(--brand-hue);
    --funnel-section-dark-foreground: 0.96 0.005 var(--brand-hue);

    --funnel-cta-bar: 0.16 0.02 var(--brand-hue);
    --funnel-cta-bar-foreground: 0.98 0 0;
    --funnel-cta-bar-border: 0.32 0.022 var(--brand-hue);

    --funnel-problem: 0.28 0.04 22;
    --funnel-problem-foreground: 0.92 0.03 22;
    --funnel-problem-soft: 0.24 0.035 22;
    --funnel-problem-soft-foreground: 0.84 0.1 22;

    --funnel-solution: 0.24 0.025 var(--brand-hue);
    --funnel-solution-foreground: 0.95 0.005 var(--brand-hue);

    --funnel-feature-icon: 0.26 0.03 var(--brand-hue);
    --funnel-feature-icon-foreground: 0.72 0.18 var(--brand-hue);
    --funnel-feature-card: 0.18 0.012 var(--brand-hue);
    --funnel-feature-card-foreground: 0.95 0.005 var(--brand-hue);
    --funnel-feature-card-border: 0.28 0.014 var(--brand-hue);

    --funnel-step-num: 0.7 0.17 var(--brand-hue);
    --funnel-step-num-foreground: 0.145 0.01 var(--brand-hue);
    --funnel-step-line: 0.3 0.016 var(--brand-hue);

    --funnel-testimonial: 0.18 0.012 var(--brand-hue);
    --funnel-testimonial-foreground: 0.95 0.005 var(--brand-hue);
    --funnel-testimonial-border: 0.28 0.014 var(--brand-hue);
    --funnel-testimonial-quote: 0.72 0.18 var(--brand-hue);
    --funnel-testimonial-avatar: 0.6 0.16 var(--brand-hue);

    --funnel-compare-head: 0.7 0.17 var(--brand-hue);
    --funnel-compare-head-foreground: 0.145 0.01 var(--brand-hue);
    --funnel-compare-row: 0.18 0.011 var(--brand-hue);
    --funnel-compare-row-stripe: 0.2 0.012 var(--brand-hue);
    --funnel-compare-row-hover: 0.22 0.016 var(--brand-hue);
    --funnel-compare-rule: 0.3 0.016 var(--brand-hue);
    --funnel-compare-yes: 0.7 0.16 150;
    --funnel-compare-no: 0.5 0.01 var(--brand-hue);

    --funnel-urgency: 0.65 0.19 22;
    --funnel-urgency-foreground: 0.145 0.01 var(--brand-hue);
    --funnel-urgency-soft: 0.28 0.05 22;
    --funnel-urgency-soft-foreground: 0.84 0.14 22;
    --funnel-urgency-pulse: 0.7 0.18 22;

    --funnel-logo-strip: 0.6 0.02 var(--brand-hue);
    --funnel-stat-num: 0.7 0.17 var(--brand-hue);
    --funnel-stat-label: 0.6 0.02 var(--brand-hue);

    --funnel-faq-q: 0.18 0.012 var(--brand-hue);
    --funnel-faq-q-foreground: 0.95 0.005 var(--brand-hue);
    --funnel-faq-q-border: 0.28 0.014 var(--brand-hue);
    --funnel-faq-a: 0.22 0.014 var(--brand-hue);
    --funnel-faq-a-foreground: 0.7 0.012 var(--brand-hue);

    --funnel-cta-primary: 0.7 0.17 var(--brand-hue);
    --funnel-cta-primary-hover: 0.74 0.18 var(--brand-hue);
    --funnel-cta-primary-foreground: 0.145 0.01 var(--brand-hue);
    --funnel-cta-secondary: 0.22 0.014 var(--brand-hue);
    --funnel-cta-secondary-hover: 0.26 0.018 var(--brand-hue);
    --funnel-cta-secondary-foreground: 0.9 0.01 var(--brand-hue);
    --funnel-cta-ghost: transparent;
    --funnel-cta-ghost-hover: 0.22 0.014 var(--brand-hue);
    --funnel-cta-ghost-foreground: 0.72 0.18 var(--brand-hue);
    --funnel-cta-ghost-border: 0.32 0.018 var(--brand-hue);

    --gradient-funnel-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 24)) 55%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 16)) 100%
    );
    --gradient-funnel-hero: radial-gradient(
      120% 80% at 50% 0%,
      oklch(0.6 0.2 var(--brand-hue) / 0.28) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 20) / 0.1) 40%,
      transparent 70%
    );
    --gradient-funnel-problem: linear-gradient(
      180deg,
      oklch(0.22 0.035 22) 0%,
      oklch(0.16 0.012 var(--brand-hue)) 100%
    );
    --shadow-funnel-nav: 0 4px 20px -8px oklch(0 0 0 / 0.4);
    --shadow-funnel-cta: 0 14px 36px -12px
      oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-funnel-cta-hover: 0 20px 44px -12px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);
    --shadow-funnel-bar: 0 -8px 30px -10px oklch(0 0 0 / 0.5);

    /* ── Client onboarding flow (5-step branded wizard) — dark ── */
    --ob-shell: 0.16 0.012 var(--brand-hue);
    --ob-shell-foreground: 0.95 0.005 var(--brand-hue);
    --ob-card: 0.18 0.012 var(--brand-hue);
    --ob-card-foreground: 0.95 0.005 var(--brand-hue);
    --ob-card-border: 0.28 0.014 var(--brand-hue);
    --ob-divider: 0.3 0.016 var(--brand-hue);
    --ob-label: 0.6 0.02 var(--brand-hue);
    --ob-meta: 0.6 0.02 var(--brand-hue);
    --ob-subhead: 0.78 0.012 var(--brand-hue);

    /* Step progress rail (5 steps) — dark */
    --ob-rail-track: 0.24 0.016 var(--brand-hue);
    --ob-rail-fill: 0.72 0.18 var(--brand-hue);
    --ob-step-pending: 0.22 0.014 var(--brand-hue);
    --ob-step-pending-foreground: 0.6 0.02 var(--brand-hue);
    --ob-step-pending-border: 0.32 0.018 var(--brand-hue);
    --ob-step-current: 0.72 0.18 var(--brand-hue);
    --ob-step-current-foreground: 0.145 0.01 var(--brand-hue);
    --ob-step-current-ring: 0.72 0.18 var(--brand-hue);
    --ob-step-current-glow: 0.72 0.18 var(--brand-hue);
    --ob-step-done: 0.7 0.16 150;
    --ob-step-done-foreground: 0.145 0.01 var(--brand-hue);
    --ob-step-done-soft: 0.26 0.04 150;
    --ob-step-done-soft-foreground: 0.82 0.1 150;
    --ob-step-skipped: 0.24 0.012 var(--brand-hue);
    --ob-step-skipped-foreground: 0.5 0.01 var(--brand-hue);
    --ob-step-skipped-border: 0.32 0.014 var(--brand-hue);

    /* Video player surface (Step 1) — dark */
    --ob-video-frame: 0.12 0.014 var(--brand-hue);
    --ob-video-frame-foreground: 0.96 0.005 var(--brand-hue);
    --ob-video-scrim: 0.06 0.004 var(--brand-hue);
    --ob-video-control: 0.96 0.005 var(--brand-hue);
    --ob-video-control-foreground: 0.12 0.014 var(--brand-hue);
    --ob-video-progress: 0.72 0.18 var(--brand-hue);
    --ob-video-progress-track: 0.32 0.018 var(--brand-hue);
    --ob-video-play: 0.72 0.18 var(--brand-hue);
    --ob-video-play-foreground: 0.145 0.01 var(--brand-hue);

    /* Questionnaire fields (Step 2) — dark */
    --ob-field: 0.2 0.012 var(--brand-hue);
    --ob-field-foreground: 0.95 0.005 var(--brand-hue);
    --ob-field-border: 0.3 0.016 var(--brand-hue);
    --ob-field-focus: 0.72 0.18 var(--brand-hue);
    --ob-field-soft: 0.24 0.016 var(--brand-hue);
    --ob-field-soft-foreground: 0.7 0.012 var(--brand-hue);
    --ob-helper: 0.6 0.02 var(--brand-hue);

    /* Contract review scroll area (Step 3) — dark */
    --ob-paper: 0.18 0.012 var(--brand-hue);
    --ob-paper-foreground: 0.95 0.005 var(--brand-hue);
    --ob-paper-rule: 0.3 0.016 var(--brand-hue);
    --ob-paper-header: 0.24 0.025 var(--brand-hue);
    --ob-paper-header-foreground: 0.92 0.01 var(--brand-hue);
    --ob-scroll-track: 0.24 0.016 var(--brand-hue);
    --ob-scroll-thumb: 0.42 0.018 var(--brand-hue);
    --ob-scroll-thumb-hover: 0.72 0.18 var(--brand-hue);
    --ob-accept: 0.7 0.16 150;
    --ob-accept-foreground: 0.145 0.01 var(--brand-hue);
    --ob-accept-soft: 0.26 0.04 150;
    --ob-accept-soft-foreground: 0.82 0.1 150;
    --ob-changes: 0.22 0.014 var(--brand-hue);
    --ob-changes-foreground: 0.9 0.01 var(--brand-hue);
    --ob-changes-border: 0.32 0.018 var(--brand-hue);

    /* Welcome package prose (Step 4) — dark */
    --ob-prose: 0.2 0.012 var(--brand-hue);
    --ob-prose-foreground: 0.92 0.008 var(--brand-hue);
    --ob-prose-heading: 0.95 0.005 var(--brand-hue);
    --ob-prose-accent: 0.72 0.18 var(--brand-hue);
    --ob-prose-rule: 0.3 0.016 var(--brand-hue);
    --ob-prose-quote: 0.72 0.18 var(--brand-hue);
    --ob-prose-quote-soft: 0.24 0.025 var(--brand-hue);

    /* Kickoff checklist (Step 5) — dark */
    --ob-check-card: 0.18 0.012 var(--brand-hue);
    --ob-check-card-foreground: 0.95 0.005 var(--brand-hue);
    --ob-check-card-border: 0.28 0.014 var(--brand-hue);
    --ob-check-row: 0.18 0.011 var(--brand-hue);
    --ob-check-row-hover: 0.22 0.016 var(--brand-hue);
    --ob-check-row-stripe: 0.2 0.012 var(--brand-hue);
    --ob-check-rule: 0.3 0.016 var(--brand-hue);
    --ob-check-box: 0.2 0.012 var(--brand-hue);
    --ob-check-box-border: 0.32 0.018 var(--brand-hue);
    --ob-check-box-checked: 0.7 0.16 150;
    --ob-check-box-checked-foreground: 0.145 0.01 var(--brand-hue);
    --ob-check-text: 0.95 0.005 var(--brand-hue);
    --ob-check-text-done: 0.5 0.01 var(--brand-hue);
    --ob-check-meta: 0.6 0.02 var(--brand-hue);
    --ob-check-progress: 0.72 0.18 var(--brand-hue);
    --ob-check-progress-track: 0.24 0.016 var(--brand-hue);
    --ob-check-progress-foreground: 0.145 0.01 var(--brand-hue);

    /* Onboarding action buttons — dark */
    --ob-cta: 0.7 0.17 var(--brand-hue);
    --ob-cta-foreground: 0.145 0.01 var(--brand-hue);
    --ob-cta-hover: 0.74 0.18 var(--brand-hue);
    --ob-skip: transparent;
    --ob-skip-foreground: 0.6 0.02 var(--brand-hue);
    --ob-skip-border: 0.32 0.018 var(--brand-hue);
    --ob-skip-hover: 0.22 0.014 var(--brand-hue);

    /* ── E-signature flow — dark ── */
    --sig-signed: 0.7 0.17 152;
    --sig-signed-foreground: 0.145 0.01 var(--brand-hue);
    --sig-signed-soft: 0.26 0.04 152;
    --sig-signed-soft-foreground: 0.82 0.1 152;
    --sig-signed-dot: 0.7 0.17 152;

    --sig-ink: 0.92 0.008 var(--brand-hue);
    --sig-ink-soft: 0.7 0.012 var(--brand-hue);
    --sig-field: 0.2 0.012 var(--brand-hue);
    --sig-field-foreground: 0.92 0.008 var(--brand-hue);
    --sig-field-border: 0.3 0.016 var(--brand-hue);
    --sig-field-focus: 0.72 0.18 var(--brand-hue);
    --sig-line: 0.42 0.018 var(--brand-hue);
    --sig-line-active: 0.72 0.18 var(--brand-hue);

    --sig-panel: 0.2 0.014 75;
    --sig-panel-foreground: 0.92 0.008 var(--brand-hue);
    --sig-panel-border: 0.3 0.018 75;
    --sig-panel-rule: 0.3 0.016 75;
    --sig-panel-header: 0.24 0.025 75;
    --sig-panel-header-foreground: 0.9 0.012 var(--brand-hue);

    --sig-cta: 0.7 0.17 var(--brand-hue);
    --sig-cta-foreground: 0.145 0.01 var(--brand-hue);
    --sig-cta-hover: 0.74 0.18 var(--brand-hue);

    --sig-audit: 0.2 0.012 var(--brand-hue);
    --sig-audit-foreground: 0.85 0.01 var(--brand-hue);
    --sig-audit-border: 0.3 0.016 var(--brand-hue);
    --sig-audit-rule: 0.3 0.016 var(--brand-hue);
    --sig-audit-label: 0.6 0.02 var(--brand-hue);
    --sig-audit-value: 0.95 0.005 var(--brand-hue);
    --sig-audit-accent: 0.7 0.17 152;
    --sig-audit-lock: 0.72 0.18 var(--brand-hue);

    --sig-download: 0.22 0.014 var(--brand-hue);
    --sig-download-foreground: 0.9 0.01 var(--brand-hue);
    --sig-download-border: 0.32 0.018 var(--brand-hue);
    --sig-download-hover: 0.26 0.018 var(--brand-hue);

    --gradient-sig-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-sig-panel: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.32), 0 6px 18px -10px
      oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-sig-cta: 0 10px 28px -10px oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-sig-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);

    --gradient-ob-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-ob-card: 0 18px 50px -20px oklch(0.45 0.18 var(--brand-hue) / 0.32),
      0 6px 18px -10px oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-ob-step-current: 0 0 0 4px oklch(0.72 0.18 var(--brand-hue) / 0.22),
      0 8px 22px -8px oklch(0.4 0.17 var(--brand-hue) / 0.5);
    --shadow-ob-cta: 0 10px 28px -10px oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-ob-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);

    /* ── Scope Creep Protection — Change Order document + scope-locked card — dark ── */
    --co-paper: 0.2 0.014 75;
    --co-paper-foreground: 0.95 0.005 var(--brand-hue);
    --co-rule: 0.3 0.018 75;
    --co-header: 0.24 0.028 75;
    --co-header-foreground: 0.92 0.01 var(--brand-hue);
    --co-section-head: 0.22 0.016 75;
    --co-section-head-foreground: 0.7 0.012 var(--brand-hue);
    --co-section-row: 0.18 0.013 75;
    --co-section-row-stripe: 0.2 0.014 75;
    --co-totals: 0.24 0.025 75;
    --co-totals-foreground: 0.92 0.01 var(--brand-hue);

    --co-draft: 0.6 0.008 var(--brand-hue);
    --co-draft-foreground: 0.145 0.01 var(--brand-hue);
    --co-draft-soft: 0.24 0.01 var(--brand-hue);
    --co-draft-soft-foreground: 0.78 0.01 var(--brand-hue);

    --co-sent: 0.7 0.16 var(--brand-hue);
    --co-sent-foreground: 0.145 0.01 var(--brand-hue);
    --co-sent-soft: 0.26 0.03 var(--brand-hue);
    --co-sent-soft-foreground: 0.82 0.08 var(--brand-hue);

    --co-approved: 0.7 0.17 152;
    --co-approved-foreground: 0.145 0.01 var(--brand-hue);
    --co-approved-soft: 0.26 0.04 152;
    --co-approved-soft-foreground: 0.82 0.1 152;

    --co-rejected: 0.65 0.19 22;
    --co-rejected-foreground: 0.145 0.01 var(--brand-hue);
    --co-rejected-soft: 0.28 0.05 22;
    --co-rejected-soft-foreground: 0.84 0.14 22;

    --co-locked: 0.72 0.18 var(--brand-hue);
    --co-locked-foreground: 0.145 0.01 var(--brand-hue);
    --co-locked-soft: 0.26 0.03 var(--brand-hue);
    --co-locked-soft-foreground: 0.82 0.08 var(--brand-hue);
    --co-locked-dot: 0.72 0.18 var(--brand-hue);

    --co-card: 0.18 0.012 var(--brand-hue);
    --co-card-foreground: 0.95 0.005 var(--brand-hue);
    --co-card-border: 0.28 0.014 var(--brand-hue);
    --co-deliverable-row: 0.18 0.011 var(--brand-hue);
    --co-deliverable-row-stripe: 0.2 0.012 var(--brand-hue);
    --co-deliverable-rule: 0.3 0.016 var(--brand-hue);
    --co-deliverable-num: 0.72 0.18 var(--brand-hue);
    --co-deliverable-num-foreground: 0.145 0.01 var(--brand-hue);
    --co-lock-stamp: 0.72 0.18 var(--brand-hue);

    --co-flag: 0.82 0.15 70;
    --co-flag-foreground: 0.16 0.03 70;
    --co-flag-soft: 0.26 0.04 70;
    --co-flag-soft-foreground: 0.85 0.12 70;
    --co-flag-border: 0.42 0.1 70;
    --co-flag-phrase: 0.7 0.16 35;
    --co-flag-phrase-bg: 0.28 0.05 35;
    --co-flag-badge: 0.7 0.16 35;
    --co-flag-badge-foreground: 0.145 0.01 var(--brand-hue);

    --co-flag-banner: 0.26 0.04 70;
    --co-flag-banner-foreground: 0.85 0.12 70;
    --co-flag-banner-border: 0.42 0.1 70;
    --co-flag-dot: 0.7 0.16 35;

    --co-audit: 0.2 0.012 var(--brand-hue);
    --co-audit-foreground: 0.85 0.01 var(--brand-hue);
    --co-audit-border: 0.3 0.016 var(--brand-hue);
    --co-audit-rule: 0.3 0.016 var(--brand-hue);
    --co-audit-rail: 0.3 0.016 var(--brand-hue);
    --co-audit-node: 0.72 0.18 var(--brand-hue);
    --co-audit-node-foreground: 0.145 0.01 var(--brand-hue);
    --co-audit-node-locked: 0.72 0.18 var(--brand-hue);
    --co-audit-node-flagged: 0.82 0.15 70;
    --co-audit-node-co: 0.7 0.16 var(--brand-hue);
    --co-audit-node-signed: 0.7 0.17 152;
    --co-audit-node-rejected: 0.65 0.19 22;
    --co-audit-label: 0.6 0.02 var(--brand-hue);
    --co-audit-value: 0.95 0.005 var(--brand-hue);
    --co-audit-meta: 0.6 0.02 var(--brand-hue);
    --co-audit-lock: 0.72 0.18 var(--brand-hue);

    --co-cta: 0.7 0.17 var(--brand-hue);
    --co-cta-foreground: 0.145 0.01 var(--brand-hue);
    --co-cta-hover: 0.74 0.18 var(--brand-hue);
    --co-download: 0.22 0.014 var(--brand-hue);
    --co-download-foreground: 0.9 0.01 var(--brand-hue);
    --co-download-border: 0.32 0.018 var(--brand-hue);
    --co-download-hover: 0.26 0.018 var(--brand-hue);
    --gradient-co-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-co-paper: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.32), 0 6px 18px -10px
      oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-co-cta: 0 10px 28px -10px oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-co-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);

    /* ── Custom-domain DNS settings + redirect + live verification — dark ── */
    --dns-card: 0.18 0.012 var(--brand-hue);
    --dns-card-foreground: 0.95 0.005 var(--brand-hue);
    --dns-card-border: 0.28 0.014 var(--brand-hue);
    --dns-section-head: 0.22 0.014 var(--brand-hue);
    --dns-section-head-foreground: 0.7 0.012 var(--brand-hue);
    --dns-row: 0.18 0.011 var(--brand-hue);
    --dns-row-hover: 0.22 0.016 var(--brand-hue);
    --dns-row-stripe: 0.2 0.012 var(--brand-hue);
    --dns-rule: 0.3 0.016 var(--brand-hue);

    --dns-type-pill: 0.22 0.014 var(--brand-hue);
    --dns-type-pill-foreground: 0.6 0.02 var(--brand-hue);
    --dns-type-pill-active: 0.7 0.17 var(--brand-hue);
    --dns-type-pill-active-foreground: 0.145 0.01 var(--brand-hue);
    --dns-type-pill-ring: 0.72 0.18 var(--brand-hue);

    --dns-field: 0.2 0.012 var(--brand-hue);
    --dns-field-foreground: 0.95 0.005 var(--brand-hue);
    --dns-field-border: 0.3 0.016 var(--brand-hue);
    --dns-field-focus: 0.72 0.18 var(--brand-hue);
    --dns-helper: 0.6 0.02 var(--brand-hue);

    --dns-toggle-track: 0.3 0.016 var(--brand-hue);
    --dns-toggle-track-on: 0.7 0.17 var(--brand-hue);
    --dns-toggle-thumb: 0.96 0.005 var(--brand-hue);
    --dns-toggle-thumb-foreground: 0.145 0.01 var(--brand-hue);
    --dns-toggle-ring: 0.72 0.18 var(--brand-hue);

    --dns-resolved: 0.7 0.17 152;
    --dns-resolved-foreground: 0.145 0.01 var(--brand-hue);
    --dns-resolved-soft: 0.26 0.04 152;
    --dns-resolved-soft-foreground: 0.82 0.1 152;
    --dns-resolved-dot: 0.7 0.17 152;

    --dns-failed: 0.65 0.19 22;
    --dns-failed-foreground: 0.145 0.01 var(--brand-hue);
    --dns-failed-soft: 0.28 0.05 22;
    --dns-failed-soft-foreground: 0.84 0.14 22;
    --dns-failed-dot: 0.65 0.19 22;

    --dns-pending: 0.7 0.16 var(--brand-hue);
    --dns-pending-foreground: 0.145 0.01 var(--brand-hue);
    --dns-pending-soft: 0.26 0.03 var(--brand-hue);
    --dns-pending-soft-foreground: 0.82 0.08 var(--brand-hue);
    --dns-pending-dot: 0.7 0.16 var(--brand-hue);

    --dns-active: 0.7 0.17 152;
    --dns-active-foreground: 0.145 0.01 var(--brand-hue);
    --dns-active-soft: 0.26 0.04 152;
    --dns-active-soft-foreground: 0.82 0.1 152;
    --dns-active-dot: 0.7 0.17 152;

    --dns-cta: 0.7 0.17 var(--brand-hue);
    --dns-cta-foreground: 0.145 0.01 var(--brand-hue);
    --dns-cta-hover: 0.74 0.18 var(--brand-hue);

    --dns-audit: 0.2 0.012 var(--brand-hue);
    --dns-audit-foreground: 0.85 0.01 var(--brand-hue);
    --dns-audit-border: 0.3 0.016 var(--brand-hue);
    --dns-audit-rule: 0.3 0.016 var(--brand-hue);
    --dns-audit-rail: 0.3 0.016 var(--brand-hue);
    --dns-audit-node: 0.72 0.18 var(--brand-hue);
    --dns-audit-node-foreground: 0.145 0.01 var(--brand-hue);
    --dns-audit-node-resolved: 0.7 0.17 152;
    --dns-audit-node-failed: 0.65 0.19 22;
    --dns-audit-node-pending: 0.7 0.16 var(--brand-hue);
    --dns-audit-label: 0.6 0.02 var(--brand-hue);
    --dns-audit-value: 0.95 0.005 var(--brand-hue);
    --dns-audit-meta: 0.6 0.02 var(--brand-hue);
    --dns-audit-lock: 0.72 0.18 var(--brand-hue);

    --gradient-dns-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-dns-card: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.32), 0 6px 18px -10px
      oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-dns-cta: 0 10px 28px -10px oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-dns-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);

    /* ── Dispute Evidence Package — dark ── */
    --dispute: 0.68 0.19 350;
    --dispute-foreground: 0.145 0.01 var(--brand-hue);
    --dispute-soft: 0.28 0.05 350;
    --dispute-soft-foreground: 0.84 0.13 350;
    --dispute-dot: 0.68 0.19 350;

    --dispute-paper: 0.2 0.014 75;
    --dispute-paper-foreground: 0.95 0.005 var(--brand-hue);
    --dispute-rule: 0.3 0.018 75;
    --dispute-header: 0.24 0.028 75;
    --dispute-header-foreground: 0.92 0.01 var(--brand-hue);
    --dispute-section-head: 0.22 0.016 75;
    --dispute-section-head-foreground: 0.7 0.012 var(--brand-hue);
    --dispute-fact-row: 0.18 0.013 75;
    --dispute-fact-row-stripe: 0.2 0.014 75;
    --dispute-fact-label: 0.6 0.02 var(--brand-hue);
    --dispute-fact-value: 0.95 0.005 var(--brand-hue);

    --dispute-stamp: 0.72 0.18 var(--brand-hue);
    --dispute-stamp-foreground: 0.145 0.01 var(--brand-hue);
    --dispute-stamp-ring: 0.72 0.18 var(--brand-hue);
    --dispute-stamp-glow: 0.72 0.18 var(--brand-hue);
    --dispute-stamp-meta: 0.6 0.02 var(--brand-hue);
    --dispute-stamp-lock: 0.72 0.18 var(--brand-hue);

    --dispute-audit: 0.2 0.012 var(--brand-hue);
    --dispute-audit-foreground: 0.85 0.01 var(--brand-hue);
    --dispute-audit-border: 0.3 0.016 var(--brand-hue);
    --dispute-audit-rule: 0.3 0.016 var(--brand-hue);
    --dispute-audit-label: 0.6 0.02 var(--brand-hue);
    --dispute-audit-value: 0.95 0.005 var(--brand-hue);
    --dispute-audit-meta: 0.6 0.02 var(--brand-hue);
    --dispute-audit-lock: 0.72 0.18 var(--brand-hue);

    --dispute-cta: 0.7 0.17 var(--brand-hue);
    --dispute-cta-foreground: 0.145 0.01 var(--brand-hue);
    --dispute-cta-hover: 0.74 0.18 var(--brand-hue);
    --dispute-download: 0.22 0.014 var(--brand-hue);
    --dispute-download-foreground: 0.9 0.01 var(--brand-hue);
    --dispute-download-border: 0.32 0.018 var(--brand-hue);
    --dispute-download-hover: 0.26 0.018 var(--brand-hue);
    --gradient-dispute-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --shadow-dispute-paper: 0 18px 50px -20px
      oklch(0.45 0.18 var(--brand-hue) / 0.32), 0 6px 18px -10px
      oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-dispute-stamp: 0 0 0 1px oklch(0.72 0.18 var(--brand-hue) / 0.28),
      0 14px 36px -14px oklch(0.4 0.17 var(--brand-hue) / 0.5), 0 4px 14px -6px
      oklch(0.4 0.17 var(--brand-hue) / 0.3);
    --shadow-dispute-cta: 0 10px 28px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-dispute-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);

    /* ── Public freelancer profile + directory — dark ── */
    --profile-shell: 0.16 0.012 var(--brand-hue);
    --profile-shell-foreground: 0.95 0.005 var(--brand-hue);

    --profile-header: 0.2 0.022 var(--brand-hue);
    --profile-header-foreground: 0.95 0.005 var(--brand-hue);
    --profile-header-border: 0.3 0.018 var(--brand-hue);
    --profile-header-accent: 0.72 0.18 var(--brand-hue);
    --profile-header-accent-foreground: 0.145 0.01 var(--brand-hue);

    --profile-logo-frame: 0.22 0.014 var(--brand-hue);
    --profile-logo-frame-foreground: 0.95 0.005 var(--brand-hue);
    --profile-logo-frame-border: 0.3 0.016 var(--brand-hue);

    --profile-star-filled: 0.82 0.16 75;
    --profile-star-empty: 0.32 0.014 var(--brand-hue);
    --profile-rating-text: 0.95 0.005 var(--brand-hue);
    --profile-rating-meta: 0.6 0.02 var(--brand-hue);

    --profile-section: 0.18 0.012 var(--brand-hue);
    --profile-section-foreground: 0.95 0.005 var(--brand-hue);
    --profile-section-alt: 0.2 0.014 var(--brand-hue);
    --profile-section-alt-foreground: 0.95 0.005 var(--brand-hue);
    --profile-section-rule: 0.3 0.016 var(--brand-hue);
    --profile-section-label: 0.6 0.02 var(--brand-hue);
    --profile-section-heading: 0.95 0.005 var(--brand-hue);

    --profile-service-row: 0.18 0.011 var(--brand-hue);
    --profile-service-row-hover: 0.22 0.016 var(--brand-hue);
    --profile-service-row-stripe: 0.2 0.012 var(--brand-hue);
    --profile-service-rule: 0.3 0.016 var(--brand-hue);
    --profile-service-num: 0.72 0.18 var(--brand-hue);
    --profile-service-num-foreground: 0.145 0.01 var(--brand-hue);
    --profile-service-name: 0.95 0.005 var(--brand-hue);
    --profile-service-desc: 0.7 0.012 var(--brand-hue);
    --profile-service-meta: 0.6 0.02 var(--brand-hue);
    --profile-service-price: 0.95 0.005 var(--brand-hue);

    --profile-review-card: 0.18 0.012 var(--brand-hue);
    --profile-review-card-foreground: 0.95 0.005 var(--brand-hue);
    --profile-review-card-border: 0.28 0.014 var(--brand-hue);
    --profile-review-quote: 0.92 0.008 var(--brand-hue);
    --profile-review-author: 0.95 0.005 var(--brand-hue);
    --profile-review-meta: 0.6 0.02 var(--brand-hue);
    --profile-review-empty: 0.2 0.012 var(--brand-hue);
    --profile-review-empty-foreground: 0.6 0.02 var(--brand-hue);

    --profile-cta: 0.7 0.17 var(--brand-hue);
    --profile-cta-foreground: 0.145 0.01 var(--brand-hue);
    --profile-cta-hover: 0.74 0.18 var(--brand-hue);
    --profile-cta-secondary: 0.22 0.014 var(--brand-hue);
    --profile-cta-secondary-foreground: 0.9 0.01 var(--brand-hue);
    --profile-cta-secondary-border: 0.32 0.018 var(--brand-hue);

    --profile-private: 0.2 0.012 var(--brand-hue);
    --profile-private-foreground: 0.7 0.012 var(--brand-hue);
    --profile-private-border: 0.3 0.016 var(--brand-hue);
    --profile-private-icon: 0.6 0.02 var(--brand-hue);

    --profile-directory-bg: 0.16 0.012 var(--brand-hue);
    --profile-directory-foreground: 0.95 0.005 var(--brand-hue);
    --profile-card: 0.18 0.012 var(--brand-hue);
    --profile-card-foreground: 0.95 0.005 var(--brand-hue);
    --profile-card-border: 0.28 0.014 var(--brand-hue);
    --profile-card-hover-border: 0.72 0.18 var(--brand-hue);
    --profile-card-logo: 0.24 0.025 var(--brand-hue);
    --profile-card-logo-foreground: 0.9 0.01 var(--brand-hue);
    --profile-card-name: 0.95 0.005 var(--brand-hue);
    --profile-card-tagline: 0.7 0.012 var(--brand-hue);
    --profile-card-meta: 0.6 0.02 var(--brand-hue);

    --profile-filter-bar: 0.18 0.012 var(--brand-hue);
    --profile-filter-bar-foreground: 0.95 0.005 var(--brand-hue);
    --profile-filter-bar-border: 0.28 0.014 var(--brand-hue);
    --profile-filter-field: 0.2 0.012 var(--brand-hue);
    --profile-filter-field-foreground: 0.95 0.005 var(--brand-hue);
    --profile-filter-field-border: 0.3 0.016 var(--brand-hue);
    --profile-filter-field-focus: 0.72 0.18 var(--brand-hue);
    --profile-filter-chip: 0.22 0.014 var(--brand-hue);
    --profile-filter-chip-foreground: 0.7 0.012 var(--brand-hue);
    --profile-filter-chip-active: 0.7 0.17 var(--brand-hue);
    --profile-filter-chip-active-foreground: 0.145 0.01 var(--brand-hue);

    --profile-empty: 0.2 0.012 var(--brand-hue);
    --profile-empty-foreground: 0.6 0.02 var(--brand-hue);

    --gradient-profile-header: linear-gradient(
      135deg,
      oklch(0.2 0.022 var(--brand-hue)) 0%,
      oklch(0.22 0.026 calc(var(--brand-hue) + 12)) 60%,
      oklch(0.18 0.016 calc(var(--brand-hue) - 8)) 100%
    );
    --gradient-profile-cta: linear-gradient(
      120deg,
      oklch(0.4 0.17 var(--brand-hue)) 0%,
      oklch(0.52 0.19 calc(var(--brand-hue) + 22)) 50%,
      oklch(0.46 0.18 calc(var(--brand-hue) - 14)) 100%
    );
    --glow-profile-header: radial-gradient(
      60% 80% at 18% 12%,
      oklch(0.6 0.2 var(--brand-hue) / 0.28) 0%,
      oklch(0.55 0.2 calc(var(--brand-hue) + 18) / 0.1) 45%,
      transparent 72%
    );
    --shadow-profile-card: 0 12px 32px -16px
      oklch(0.4 0.17 var(--brand-hue) / 0.4), 0 4px 12px -6px oklch(0 0 0 / 0.2),
      0 1px 2px 0 oklch(0 0 0 / 0.16);
    --shadow-profile-card-hover: 0 20px 44px -16px
      oklch(0.4 0.17 var(--brand-hue) / 0.55), 0 8px 18px -8px
      oklch(0 0 0 / 0.28), 0 1px 2px 0 oklch(0 0 0 / 0.2);
    --shadow-profile-review: 0 10px 28px -14px
      oklch(0.4 0.17 var(--brand-hue) / 0.32), 0 2px 8px -4px
      oklch(0 0 0 / 0.16);
    --shadow-profile-cta: 0 10px 28px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.6);
    --shadow-profile-cta-hover: 0 14px 32px -10px
      oklch(0.4 0.17 var(--brand-hue) / 0.72);
  }
  * {
  border-color: oklch(var(--border));
}
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-family: var(--font-display), serif;
}
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

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

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.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);
  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);
  text-decoration: underline;
  font-weight: 500;
}
.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;
}
.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;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.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);
}
.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);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.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;
}
.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;
  color: inherit;
}
.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;
  color: inherit;
}
.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;
  color: inherit;
}
.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;
  color: inherit;
}
.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;
  margin-top: 2em;
  margin-bottom: 2em;
}
.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 rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.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: "`";
}
.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;
}
.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;
  font-size: 0.875em;
}
.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;
}
.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;
}
.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-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.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;
}
.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%;
  table-layout: auto;
  text-align: left;
  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;
  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);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.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;
}
.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;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.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);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.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: 17 24 39;
  --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: 255 255 255;
  --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;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.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-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.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 > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.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;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.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;
}
.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;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.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;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.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;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-12 {
  right: -3rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-5 {
  bottom: 1.25rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.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-\[1\] {
  z-index: 1;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-7 {
  margin-left: 1.75rem;
}
.ml-auto {
  margin-left: auto;
}
.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\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-20 {
  width: 5rem;
  height: 5rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-0\.5 {
  height: 0.125rem;
}
.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-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[60vh\] {
  height: 60vh;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[calc\(100vh-12rem\)\] {
  height: calc(100vh - 12rem);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[40vh\] {
  max-height: 40vh;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-20 {
  min-height: 5rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[30vh\] {
  min-height: 30vh;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.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-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-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-\[100px\] {
  width: 100px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[3\.25rem\] {
  min-width: 3.25rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[10rem\] {
  max-width: 10rem;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[5\.5rem\] {
  max-width: 5.5rem;
}
.max-w-\[5rem\] {
  max-width: 5rem;
}
.max-w-\[75\%\] {
  max-width: 75%;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[920px\] {
  max-width: 920px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.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-shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.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-x-px {
  --tw-translate-x: -1px;
  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-\[-50\%\] {
  --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-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  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-45 {
  --tw-rotate: 45deg;
  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));
}
.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 fade-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fade-up {

  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes marquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 32s linear infinite;
}
@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-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, 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-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.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;
}
.justify-around {
  justify-content: space-around;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.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-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-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-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-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-border > :not([hidden]) ~ :not([hidden]) {
  border-color: oklch(var(--border));
}
.divide-profile-service-rule > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: oklch(var(--profile-service-rule) / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-t-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-bl-sm {
  border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-br-sm {
  border-bottom-right-radius: calc(var(--radius) - 4px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[oklch\(var\(--inv-overdue\)\/0\.35\)\] {
  border-color: oklch(var(--inv-overdue)/0.35);
}
.border-\[oklch\(var\(--invoice-rule\)\)\] {
  border-color: oklch(var(--invoice-rule));
}
.border-\[oklch\(var\(--ob-accept\)\/0\.3\)\] {
  border-color: oklch(var(--ob-accept)/0.3);
}
.border-\[oklch\(var\(--ob-card-border\)\)\] {
  border-color: oklch(var(--ob-card-border));
}
.border-\[oklch\(var\(--ob-changes-border\)\)\] {
  border-color: oklch(var(--ob-changes-border));
}
.border-\[oklch\(var\(--ob-check-card-border\)\)\] {
  border-color: oklch(var(--ob-check-card-border));
}
.border-\[oklch\(var\(--ob-field-border\)\)\] {
  border-color: oklch(var(--ob-field-border));
}
.border-\[oklch\(var\(--ob-step-done\)\/0\.25\)\] {
  border-color: oklch(var(--ob-step-done)/0.25);
}
.border-\[oklch\(var\(--ob-step-pending-border\)\)\] {
  border-color: oklch(var(--ob-step-pending-border));
}
.border-\[oklch\(var\(--ob-step-skipped-border\)\)\] {
  border-color: oklch(var(--ob-step-skipped-border));
}
.border-\[oklch\(var\(--profile-card-border\)\)\] {
  border-color: oklch(var(--profile-card-border));
}
.border-\[oklch\(var\(--profile-filter-bar-border\)\)\] {
  border-color: oklch(var(--profile-filter-bar-border));
}
.border-\[oklch\(var\(--profile-filter-field-border\)\)\] {
  border-color: oklch(var(--profile-filter-field-border));
}
.border-\[oklch\(var\(--profile-header-border\)\)\] {
  border-color: oklch(var(--profile-header-border));
}
.border-\[oklch\(var\(--profile-section-rule\)\)\] {
  border-color: oklch(var(--profile-section-rule));
}
.border-\[oklch\(var\(--ret-active\)\/0\.3\)\] {
  border-color: oklch(var(--ret-active)/0.3);
}
.border-\[oklch\(var\(--ret-canceled\)\/0\.25\)\] {
  border-color: oklch(var(--ret-canceled)/0.25);
}
.border-\[oklch\(var\(--ret-card-border\)\)\] {
  border-color: oklch(var(--ret-card-border));
}
.border-\[oklch\(var\(--ret-divider\)\)\] {
  border-color: oklch(var(--ret-divider));
}
.border-\[oklch\(var\(--ret-paused\)\/0\.3\)\] {
  border-color: oklch(var(--ret-paused)/0.3);
}
.border-\[oklch\(var\(--sig-audit-rule\)\)\] {
  border-color: oklch(var(--sig-audit-rule));
}
.border-accent\/30 {
  border-color: oklch(var(--accent) / 0.3);
}
.border-accent\/40 {
  border-color: oklch(var(--accent) / 0.4);
}
.border-alert-warning-border {
  --tw-border-opacity: 1;
  border-color: oklch(var(--alert-warning-border) / var(--tw-border-opacity, 1));
}
.border-alert-warning-border\/60 {
  border-color: oklch(var(--alert-warning-border) / 0.6);
}
.border-amber-300\/60 {
  border-color: rgb(252 211 77 / 0.6);
}
.border-amber-500\/25 {
  border-color: rgb(245 158 11 / 0.25);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: oklch(var(--destructive) / 0.4);
}
.border-emerald-300\/60 {
  border-color: rgb(110 231 183 / 0.6);
}
.border-emerald-500\/25 {
  border-color: rgb(16 185 129 / 0.25);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-no-show\/25 {
  border-color: oklch(var(--no-show) / 0.25);
}
.border-notes-border {
  border-color: oklch(var(--notes-border));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/20 {
  border-color: oklch(var(--primary) / 0.2);
}
.border-primary\/30 {
  border-color: oklch(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-profile-header-border {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-header-border) / var(--tw-border-opacity, 1));
}
.border-profile-logo-frame-border {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-logo-frame-border) / var(--tw-border-opacity, 1));
}
.border-profile-private-border {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-private-border) / var(--tw-border-opacity, 1));
}
.border-profile-review-card-border {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-review-card-border) / var(--tw-border-opacity, 1));
}
.border-profile-section-rule {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-section-rule) / var(--tw-border-opacity, 1));
}
.border-profile-service-rule {
  --tw-border-opacity: 1;
  border-color: oklch(var(--profile-service-rule) / var(--tw-border-opacity, 1));
}
.border-rose-300\/60 {
  border-color: rgb(253 164 175 / 0.6);
}
.border-rose-500\/25 {
  border-color: rgb(244 63 94 / 0.25);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-secondary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--secondary) / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-sky-300\/60 {
  border-color: rgb(125 211 252 / 0.6);
}
.border-slate-300\/60 {
  border-color: rgb(203 213 225 / 0.6);
}
.border-success\/30 {
  border-color: oklch(var(--success) / 0.3);
}
.border-success\/40 {
  border-color: oklch(var(--success) / 0.4);
}
.border-transparent {
  border-color: transparent;
}
.border-violet-300\/60 {
  border-color: rgb(196 181 253 / 0.6);
}
.border-warning\/30 {
  border-color: oklch(var(--warning) / 0.3);
}
.border-warning\/40 {
  border-color: oklch(var(--warning) / 0.4);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-primary-foreground {
  border-top-color: oklch(var(--primary-foreground));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[oklch\(var\(--checkout-field\)\)\] {
  background-color: oklch(var(--checkout-field));
}
.bg-\[oklch\(var\(--inv-overdue-soft\)\)\] {
  background-color: oklch(var(--inv-overdue-soft));
}
.bg-\[oklch\(var\(--invoice-rule\)\)\] {
  background-color: oklch(var(--invoice-rule));
}
.bg-\[oklch\(var\(--ob-accent\)\)\] {
  background-color: oklch(var(--ob-accent));
}
.bg-\[oklch\(var\(--ob-accept-soft\)\)\] {
  background-color: oklch(var(--ob-accept-soft));
}
.bg-\[oklch\(var\(--ob-changes\)\)\] {
  background-color: oklch(var(--ob-changes));
}
.bg-\[oklch\(var\(--ob-field-bg\)\)\] {
  background-color: oklch(var(--ob-field-bg));
}
.bg-\[oklch\(var\(--ob-step-done\)\)\] {
  background-color: oklch(var(--ob-step-done));
}
.bg-\[oklch\(var\(--ob-step-done-soft\)\)\] {
  background-color: oklch(var(--ob-step-done-soft));
}
.bg-\[oklch\(var\(--ob-step-pending\)\)\] {
  background-color: oklch(var(--ob-step-pending));
}
.bg-\[oklch\(var\(--ob-step-skipped\)\)\] {
  background-color: oklch(var(--ob-step-skipped));
}
.bg-\[oklch\(var\(--pay-failed-soft\)\)\] {
  background-color: oklch(var(--pay-failed-soft));
}
.bg-\[oklch\(var\(--profile-card\)\)\] {
  background-color: oklch(var(--profile-card));
}
.bg-\[oklch\(var\(--profile-card-logo\)\)\] {
  background-color: oklch(var(--profile-card-logo));
}
.bg-\[oklch\(var\(--profile-directory-bg\)\)\] {
  background-color: oklch(var(--profile-directory-bg));
}
.bg-\[oklch\(var\(--profile-empty\)\)\] {
  background-color: oklch(var(--profile-empty));
}
.bg-\[oklch\(var\(--profile-filter-bar\)\)\] {
  background-color: oklch(var(--profile-filter-bar));
}
.bg-\[oklch\(var\(--profile-filter-chip\)\)\] {
  background-color: oklch(var(--profile-filter-chip));
}
.bg-\[oklch\(var\(--profile-filter-field\)\)\] {
  background-color: oklch(var(--profile-filter-field));
}
.bg-\[oklch\(var\(--profile-header\)\)\] {
  background-color: oklch(var(--profile-header));
}
.bg-\[oklch\(var\(--ret-accent-income\)\)\] {
  background-color: oklch(var(--ret-accent-income));
}
.bg-\[oklch\(var\(--ret-active\)\)\] {
  background-color: oklch(var(--ret-active));
}
.bg-\[oklch\(var\(--ret-active-soft\)\)\] {
  background-color: oklch(var(--ret-active-soft));
}
.bg-\[oklch\(var\(--ret-canceled\)\)\] {
  background-color: oklch(var(--ret-canceled));
}
.bg-\[oklch\(var\(--ret-canceled-soft\)\)\] {
  background-color: oklch(var(--ret-canceled-soft));
}
.bg-\[oklch\(var\(--ret-card\)\)\] {
  background-color: oklch(var(--ret-card));
}
.bg-\[oklch\(var\(--ret-divider\)\)\] {
  background-color: oklch(var(--ret-divider));
}
.bg-\[oklch\(var\(--ret-paused\)\)\] {
  background-color: oklch(var(--ret-paused));
}
.bg-\[oklch\(var\(--ret-paused-soft\)\)\] {
  background-color: oklch(var(--ret-paused-soft));
}
.bg-\[oklch\(var\(--usage-fill-approaching\)\)\] {
  background-color: oklch(var(--usage-fill-approaching));
}
.bg-\[oklch\(var\(--usage-fill-exceeded\)\)\] {
  background-color: oklch(var(--usage-fill-exceeded));
}
.bg-\[oklch\(var\(--usage-fill-ok\)\)\] {
  background-color: oklch(var(--usage-fill-ok));
}
.bg-\[oklch\(var\(--usage-soft-approaching\)\)\] {
  background-color: oklch(var(--usage-soft-approaching));
}
.bg-\[oklch\(var\(--usage-soft-exceeded\)\)\] {
  background-color: oklch(var(--usage-soft-exceeded));
}
.bg-\[oklch\(var\(--usage-soft-ok\)\)\] {
  background-color: oklch(var(--usage-soft-ok));
}
.bg-\[oklch\(var\(--usage-track\)\)\] {
  background-color: oklch(var(--usage-track));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/10 {
  background-color: oklch(var(--accent) / 0.1);
}
.bg-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.bg-accent\/5 {
  background-color: oklch(var(--accent) / 0.05);
}
.bg-alert-warning-accent\/15 {
  background-color: oklch(var(--alert-warning-accent) / 0.15);
}
.bg-alert-warning-bg {
  background-color: oklch(var(--alert-warning-bg));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/70 {
  background-color: rgb(245 158 11 / 0.7);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-confidence-high-soft {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--confidence-high-soft) / var(--tw-bg-opacity, 1));
}
.bg-confidence-low-soft {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--confidence-low-soft) / var(--tw-bg-opacity, 1));
}
.bg-confidence-medium-soft {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--confidence-medium-soft) / var(--tw-bg-opacity, 1));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
  background-color: oklch(var(--destructive) / 0.15);
}
.bg-destructive\/5 {
  background-color: oklch(var(--destructive) / 0.05);
}
.bg-destructive\/70 {
  background-color: oklch(var(--destructive) / 0.7);
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/70 {
  background-color: rgb(16 185 129 / 0.7);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/40 {
  background-color: oklch(var(--muted-foreground) / 0.4);
}
.bg-muted\/20 {
  background-color: oklch(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: oklch(var(--muted) / 0.6);
}
.bg-no-show-soft {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--no-show-soft) / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/40 {
  background-color: oklch(var(--primary) / 0.4);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-profile-header {
  background-color: oklch(var(--profile-header));
}
.bg-profile-logo-frame {
  background-color: oklch(var(--profile-logo-frame));
}
.bg-profile-private {
  background-color: oklch(var(--profile-private));
}
.bg-profile-review-card {
  background-color: oklch(var(--profile-review-card));
}
.bg-profile-review-empty {
  background-color: oklch(var(--profile-review-empty));
}
.bg-profile-section {
  background-color: oklch(var(--profile-section));
}
.bg-profile-section-alt {
  background-color: oklch(var(--profile-section-alt));
}
.bg-profile-service-num {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--profile-service-num) / var(--tw-bg-opacity, 1));
}
.bg-progress-bar-fill-below {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--progress-bar-fill-below) / var(--tw-bg-opacity, 1));
}
.bg-progress-bar-fill-on-target {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--progress-bar-fill-on-target) / var(--tw-bg-opacity, 1));
}
.bg-progress-bar-fill-severe {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--progress-bar-fill-severe) / var(--tw-bg-opacity, 1));
}
.bg-progress-bar-track {
  background-color: oklch(var(--progress-bar-track));
}
.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/60 {
  background-color: oklch(var(--secondary) / 0.6);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--success) / var(--tw-bg-opacity, 1));
}
.bg-success\/10 {
  background-color: oklch(var(--success) / 0.1);
}
.bg-success\/15 {
  background-color: oklch(var(--success) / 0.15);
}
.bg-success\/40 {
  background-color: oklch(var(--success) / 0.4);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--warning) / var(--tw-bg-opacity, 1));
}
.bg-warning\/10 {
  background-color: oklch(var(--warning) / 0.1);
}
.bg-warning\/15 {
  background-color: oklch(var(--warning) / 0.15);
}
.fill-\[oklch\(var\(--profile-star-empty\)\)\] {
  fill: oklch(var(--profile-star-empty));
}
.fill-\[oklch\(var\(--profile-star-filled\)\)\] {
  fill: oklch(var(--profile-star-filled));
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.fill-profile-star-filled {
  fill: oklch(var(--profile-star-filled) / 1);
}
.fill-transparent {
  fill: transparent;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.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-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.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-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.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-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;
}
.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-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\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(var\(--checkout-tab-active-ring\)\)\] {
  color: oklch(var(--checkout-tab-active-ring));
}
.text-\[oklch\(var\(--inv-overdue-soft-foreground\)\)\] {
  color: oklch(var(--inv-overdue-soft-foreground));
}
.text-\[oklch\(var\(--inv-paid\)\)\] {
  color: oklch(var(--inv-paid));
}
.text-\[oklch\(var\(--ob-accept-soft-foreground\)\)\] {
  color: oklch(var(--ob-accept-soft-foreground));
}
.text-\[oklch\(var\(--ob-changes-foreground\)\)\] {
  color: oklch(var(--ob-changes-foreground));
}
.text-\[oklch\(var\(--ob-step-done-foreground\)\)\] {
  color: oklch(var(--ob-step-done-foreground));
}
.text-\[oklch\(var\(--ob-step-done-soft-foreground\)\)\] {
  color: oklch(var(--ob-step-done-soft-foreground));
}
.text-\[oklch\(var\(--ob-step-pending-foreground\)\)\] {
  color: oklch(var(--ob-step-pending-foreground));
}
.text-\[oklch\(var\(--ob-step-skipped-foreground\)\)\] {
  color: oklch(var(--ob-step-skipped-foreground));
}
.text-\[oklch\(var\(--pay-failed-soft-foreground\)\)\] {
  color: oklch(var(--pay-failed-soft-foreground));
}
.text-\[oklch\(var\(--profile-card-meta\)\)\] {
  color: oklch(var(--profile-card-meta));
}
.text-\[oklch\(var\(--profile-card-name\)\)\] {
  color: oklch(var(--profile-card-name));
}
.text-\[oklch\(var\(--profile-card-tagline\)\)\] {
  color: oklch(var(--profile-card-tagline));
}
.text-\[oklch\(var\(--profile-empty-foreground\)\)\] {
  color: oklch(var(--profile-empty-foreground));
}
.text-\[oklch\(var\(--profile-filter-chip-foreground\)\)\] {
  color: oklch(var(--profile-filter-chip-foreground));
}
.text-\[oklch\(var\(--profile-filter-field-foreground\)\)\] {
  color: oklch(var(--profile-filter-field-foreground));
}
.text-\[oklch\(var\(--profile-header-foreground\)\)\] {
  color: oklch(var(--profile-header-foreground));
}
.text-\[oklch\(var\(--profile-rating-meta\)\)\] {
  color: oklch(var(--profile-rating-meta));
}
.text-\[oklch\(var\(--profile-rating-text\)\)\] {
  color: oklch(var(--profile-rating-text));
}
.text-\[oklch\(var\(--profile-section-label\)\)\] {
  color: oklch(var(--profile-section-label));
}
.text-\[oklch\(var\(--profile-star-empty\)\)\] {
  color: oklch(var(--profile-star-empty));
}
.text-\[oklch\(var\(--profile-star-filled\)\)\] {
  color: oklch(var(--profile-star-filled));
}
.text-\[oklch\(var\(--ret-active-soft-foreground\)\)\] {
  color: oklch(var(--ret-active-soft-foreground));
}
.text-\[oklch\(var\(--ret-canceled-soft-foreground\)\)\] {
  color: oklch(var(--ret-canceled-soft-foreground));
}
.text-\[oklch\(var\(--ret-label\)\)\] {
  color: oklch(var(--ret-label));
}
.text-\[oklch\(var\(--ret-meta\)\)\] {
  color: oklch(var(--ret-meta));
}
.text-\[oklch\(var\(--ret-paused-soft-foreground\)\)\] {
  color: oklch(var(--ret-paused-soft-foreground));
}
.text-\[oklch\(var\(--ret-value\)\)\] {
  color: oklch(var(--ret-value));
}
.text-\[oklch\(var\(--sig-panel-header-foreground\)\)\] {
  color: oklch(var(--sig-panel-header-foreground));
}
.text-\[oklch\(var\(--usage-soft-approaching-foreground\)\)\] {
  color: oklch(var(--usage-soft-approaching-foreground));
}
.text-\[oklch\(var\(--usage-soft-exceeded-foreground\)\)\] {
  color: oklch(var(--usage-soft-exceeded-foreground));
}
.text-\[oklch\(var\(--usage-soft-ok-foreground\)\)\] {
  color: oklch(var(--usage-soft-ok-foreground));
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-alert-warning-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--alert-warning-accent) / var(--tw-text-opacity, 1));
}
.text-alert-warning-text {
  color: oklch(var(--alert-warning-text));
}
.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-600\/80 {
  color: rgb(217 119 6 / 0.8);
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-confidence-high-foreground {
  color: oklch(var(--confidence-high-foreground));
}
.text-confidence-low-foreground {
  color: oklch(var(--confidence-low-foreground));
}
.text-confidence-medium-foreground {
  color: oklch(var(--confidence-medium-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 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-600\/80 {
  color: rgb(5 150 105 / 0.8);
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/40 {
  color: oklch(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: oklch(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-muted-foreground\/90 {
  color: oklch(var(--muted-foreground) / 0.9);
}
.text-no-show {
  --tw-text-opacity: 1;
  color: oklch(var(--no-show) / var(--tw-text-opacity, 1));
}
.text-no-show-soft-foreground {
  color: oklch(var(--no-show-soft-foreground));
}
.text-notes-surface-foreground {
  color: oklch(var(--notes-surface-foreground));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-profile-cta-foreground {
  color: oklch(var(--profile-cta-foreground));
}
.text-profile-header-foreground {
  color: oklch(var(--profile-header-foreground));
}
.text-profile-private-icon {
  color: oklch(var(--profile-private-icon));
}
.text-profile-rating-meta {
  color: oklch(var(--profile-rating-meta));
}
.text-profile-rating-text {
  color: oklch(var(--profile-rating-text));
}
.text-profile-review-author {
  color: oklch(var(--profile-review-author));
}
.text-profile-review-empty-foreground {
  color: oklch(var(--profile-review-empty-foreground));
}
.text-profile-review-meta {
  color: oklch(var(--profile-review-meta));
}
.text-profile-review-quote {
  color: oklch(var(--profile-review-quote));
}
.text-profile-section-heading {
  color: oklch(var(--profile-section-heading));
}
.text-profile-section-label {
  color: oklch(var(--profile-section-label));
}
.text-profile-service-desc {
  color: oklch(var(--profile-service-desc));
}
.text-profile-service-meta {
  color: oklch(var(--profile-service-meta));
}
.text-profile-service-name {
  color: oklch(var(--profile-service-name));
}
.text-profile-service-num-foreground {
  color: oklch(var(--profile-service-num-foreground));
}
.text-profile-service-price {
  color: oklch(var(--profile-service-price));
}
.text-profile-star-empty {
  --tw-text-opacity: 1;
  color: oklch(var(--profile-star-empty) / var(--tw-text-opacity, 1));
}
.text-profile-star-filled {
  --tw-text-opacity: 1;
  color: oklch(var(--profile-star-filled) / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}
.text-success-foreground {
  color: oklch(var(--success-foreground));
}
.text-warning {
  --tw-text-opacity: 1;
  color: oklch(var(--warning) / var(--tw-text-opacity, 1));
}
.text-warning-foreground {
  color: oklch(var(--warning-foreground));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.06\] {
  opacity: 0.06;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.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-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 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-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-shadow-elevated {
  --tw-shadow: 0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25), 0 4px 12px -4px oklch(0.15 0.01 var(--brand-hue) / 0.1);
  --tw-shadow-colored: 0 10px 30px -12px var(--tw-shadow-color), 0 4px 12px -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-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-xs {
  --tw-shadow: 0 1px 2px 0 rgba(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-\[var\(--shadow-ob-card\)\] {
  --tw-shadow-color: var(--shadow-ob-card);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[var\(--shadow-profile-card\)\] {
  --tw-shadow-color: var(--shadow-profile-card);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-profile-cta {
  --tw-shadow-color: oklch(var(--profile-cta) / 1);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.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-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-primary\/40 {
  --tw-ring-color: oklch(var(--primary) / 0.4);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  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-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  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-none {
  transition-property: none;
}
.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-1000 {
  transition-duration: 1000ms;
}
.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-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.bg-brand-gradient {
    background-image: linear-gradient(
      135deg,
      oklch(0.45 0.18 var(--brand-hue)) 0%,
      oklch(0.55 0.2 var(--brand-hue)) 50%,
      oklch(0.62 0.19 calc(var(--brand-hue) + 20)) 100%
    );
  }
.text-gradient {
    background-image: linear-gradient(
      135deg,
      oklch(0.55 0.2 var(--brand-hue)) 0%,
      oklch(0.7 0.17 var(--brand-hue)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-hero-gradient {
    background-image: var(--gradient-hero);
  }
.bg-section-gradient {
    background-image: var(--gradient-section);
  }
.bg-cta-gradient {
    background-image: var(--gradient-cta);
  }
.glass {
    background: oklch(var(--card) / 0.6);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid oklch(var(--border) / 0.7);
  }
.glass-strong {
    background: oklch(var(--card) / 0.78);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid oklch(var(--border) / 0.8);
  }
.countdown-track {
    position: relative;
    overflow: hidden;
    background: oklch(var(--muted));
    border-radius: 999px;
  }
.countdown-fill {
    position: relative;
    overflow: hidden;
    background-image: var(--gradient-cta);
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
.countdown-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      100deg,
      transparent 30%,
      oklch(1 0 0 / 0.35) 50%,
      transparent 70%
    );
    animation: shimmer 2.4s linear infinite;
  }
.mono-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.no-show-badge {
    border-radius: 999px;
    background: oklch(var(--no-show-soft));
    color: oklch(var(--no-show-soft-foreground));
    border: 1px solid oklch(var(--no-show) / 0.25);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
.notes-panel {
    border-radius: var(--radius);
    background: oklch(var(--notes-surface));
    color: oklch(var(--notes-surface-foreground));
    border: 1px solid oklch(var(--notes-border));
    box-shadow: var(--shadow-notes, 0 4px 14px -8px oklch(0.3 0.02 75 / 0.18));
  }
.notes-panel[data-saved="true"] {
    animation: notes-save 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
.join-meeting-btn {
    background-image: var(--gradient-cta);
    color: oklch(var(--primary-foreground));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    box-shadow: 0 8px 22px -10px oklch(0.45 0.18 var(--brand-hue) / 0.5);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.join-meeting-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.6);
  }
@keyframes notes-save {
    0% {
      box-shadow: 0 0 0 0 oklch(var(--success) / 0);
    }
    35% {
      box-shadow: 0 0 0 3px oklch(var(--success) / 0.35);
    }
    100% {
      box-shadow: var(--shadow-notes, 0 4px 14px -8px oklch(0.3 0.02 75 / 0.18));
    }
  }
.slot-chip {
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--slot-available));
    color: oklch(var(--slot-available-foreground));
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.slot-chip:hover:not(:disabled) {
    border-color: oklch(var(--ring-booking) / 0.6);
    background: oklch(var(--slot-available) / 0.7);
    transform: translateY(-1px);
  }
.slot-chip[data-state="selected"] {
    background: oklch(var(--slot-selected));
    color: oklch(var(--slot-selected-foreground));
    border-color: oklch(var(--slot-selected));
    box-shadow: 0 0 0 1px oklch(var(--ring-booking) / 0.5), 0 8px 20px -8px
      oklch(0.45 0.18 var(--brand-hue) / 0.4);
  }
.slot-chip[data-state="taken"] {
    background: oklch(var(--slot-taken));
    color: oklch(var(--slot-taken-foreground));
    border-color: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.7;
  }
.calendar-day {
    position: relative;
    border-radius: calc(var(--radius) - 4px);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.calendar-day[data-available="true"]::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: oklch(var(--calendar-available-dot));
  }
.calendar-day[data-today="true"] {
    box-shadow: inset 0 0 0 1px oklch(var(--ring-booking) / 0.7);
  }
.calendar-day[data-selected="true"] {
    background: oklch(var(--slot-selected));
    color: oklch(var(--slot-selected-foreground));
    box-shadow: 0 8px 20px -8px oklch(0.45 0.18 var(--brand-hue) / 0.45);
  }
.calendar-day[data-selected="true"]::after {
    background: oklch(var(--slot-selected-foreground) / 0.85);
  }
.service-card {
    border-radius: var(--radius);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.service-card:hover {
    border-color: oklch(var(--ring-booking) / 0.55);
    transform: translateY(-2px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.service-card[data-selected="true"] {
    border-color: oklch(var(--slot-selected));
    box-shadow: 0 0 0 1px oklch(var(--ring-booking) / 0.5), 0 12px 28px -10px
      oklch(0.45 0.18 var(--brand-hue) / 0.3);
  }
.confirm-panel {
    border-radius: var(--radius);
    background: oklch(var(--card) / 0.78);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid oklch(var(--border) / 0.8);
    box-shadow: 0 0 0 1px oklch(var(--success) / 0.35), 0 18px 50px -16px
      oklch(0.62 0.17 150 / 0.18);
  }
.duration-chip {
    border-radius: 999px;
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
.animate-fade-up {
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.animate-fade-in {
    animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.animate-stagger > * {
    opacity: 0;
    animation: stagger-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.animate-stagger > *:nth-child(1) {
    animation-delay: 0.05s;
  }
.animate-stagger > *:nth-child(2) {
    animation-delay: 0.12s;
  }
.animate-stagger > *:nth-child(3) {
    animation-delay: 0.19s;
  }
.animate-stagger > *:nth-child(4) {
    animation-delay: 0.26s;
  }
.animate-stagger > *:nth-child(5) {
    animation-delay: 0.33s;
  }
.animate-stagger > *:nth-child(6) {
    animation-delay: 0.4s;
  }
.animate-marquee {
    animation: marquee 32s linear infinite;
  }
@keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
@keyframes shimmer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
@keyframes stagger-fade {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
/* ── Invoice document surface ── */
.invoice-paper {
    background: oklch(var(--invoice-paper));
    color: oklch(var(--invoice-paper-foreground));
    border: 1px solid oklch(var(--invoice-rule));
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(
      --shadow-invoice,
      0 18px 50px -20px oklch(0.45 0.18 var(--brand-hue) / 0.18),
      0 6px 18px -10px oklch(0.15 0.01 var(--brand-hue) / 0.1)
    );
    font-family: var(--font-body);
  }
.invoice-paper .invoice-header-band {
    background: oklch(var(--invoice-header));
    color: oklch(var(--invoice-header-foreground));
    border-bottom: 1px solid oklch(var(--invoice-rule));
  }
.invoice-line-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid oklch(var(--invoice-rule));
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
  }
.invoice-line-table thead th {
    background: oklch(var(--invoice-line-head));
    color: oklch(var(--invoice-line-head-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid oklch(var(--invoice-rule));
  }
.invoice-line-table thead th:last-child {
    text-align: right;
  }
.invoice-line-row {
    background: oklch(var(--invoice-line-row));
    transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.invoice-line-row td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid oklch(var(--invoice-rule));
    vertical-align: top;
  }
.invoice-line-row td:last-child {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
.invoice-line-row:hover {
    background: oklch(var(--invoice-line-row-hover));
  }
.invoice-line-row:last-child td {
    border-bottom: none;
  }
.invoice-totals-band {
    background: oklch(var(--invoice-totals));
    color: oklch(var(--invoice-totals-foreground));
    border-radius: calc(var(--radius) - 2px);
  }
/* ── Payment method picker ── */
.pay-method-card {
    background: oklch(var(--pay-method));
    color: oklch(var(--pay-method-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.pay-method-card:hover {
    background: oklch(var(--pay-method-hover));
    border-color: oklch(var(--pay-method-ring) / 0.45);
    transform: translateY(-1px);
  }
.pay-method-card[data-selected="true"] {
    background: oklch(var(--pay-method-selected));
    color: oklch(var(--pay-method-selected-foreground));
    border-color: oklch(var(--pay-method-ring));
    box-shadow: 0 0 0 1px oklch(var(--pay-method-ring) / 0.55), 0 10px 24px
      -10px oklch(0.45 0.18 var(--brand-hue) / 0.3);
  }
/* ── Checkout dialog (Pay Now flow) ── */
.checkout-surface {
    background: oklch(var(--checkout-surface));
    color: oklch(var(--checkout-surface-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(
      --shadow-checkout,
      0 24px 60px -20px oklch(0.45 0.18 var(--brand-hue) / 0.32),
      0 12px 24px -10px oklch(0.15 0.01 var(--brand-hue) / 0.14)
    );
    overflow: hidden;
  }
.checkout-header-band {
    background: oklch(var(--checkout-header));
    color: oklch(var(--checkout-header-foreground));
    border-bottom: 1px solid oklch(var(--checkout-divider));
  }
.checkout-summary-band {
    background: oklch(var(--checkout-summary));
    color: oklch(var(--checkout-summary-foreground));
    border-bottom: 1px solid oklch(var(--checkout-divider));
  }
.checkout-summary-band .checkout-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
.checkout-field {
    background: oklch(var(--checkout-field));
    color: oklch(var(--checkout-field-foreground));
    border: 1px solid oklch(var(--checkout-field-border));
    border-radius: calc(var(--radius) - 2px);
    transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
      0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.checkout-field:focus,
  .checkout-field:focus-visible {
    outline: none;
    border-color: oklch(var(--checkout-field-focus));
    box-shadow: 0 0 0 3px oklch(var(--checkout-field-focus) / 0.18);
  }
.checkout-tab {
    background: oklch(var(--checkout-tab));
    color: oklch(var(--checkout-tab-foreground));
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.checkout-tab[data-active="true"] {
    background: oklch(var(--checkout-tab-active));
    color: oklch(var(--checkout-tab-active-foreground));
    border-color: oklch(var(--checkout-tab-active-ring) / 0.5);
    box-shadow: 0 0 0 1px oklch(var(--checkout-tab-active-ring) / 0.4);
  }
.checkout-secure-bar {
    background: oklch(var(--checkout-secure-bar));
    color: oklch(var(--checkout-secure-bar-foreground));
    border-top: 1px solid oklch(var(--checkout-divider));
  }
.checkout-pay-cta {
    background-image: var(--gradient-pay-cta);
    color: oklch(var(--primary-foreground));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    box-shadow: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.5);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.checkout-pay-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px oklch(0.45 0.18 var(--brand-hue) / 0.6);
  }
.checkout-pay-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.checkout-overlay {
    background: oklch(var(--checkout-overlay) / 0.55);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
  }
.checkout-crypto-redirect {
    background: oklch(var(--checkout-summary));
    color: oklch(var(--checkout-summary-foreground));
    border: 1px solid oklch(var(--checkout-divider));
    border-radius: var(--radius);
  }
/* ── Payment method badges (Stripe / Coinbase / NOWPayments / Manual) ── */
.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
  }
.pm-badge[data-method="stripe"] {
    background: oklch(var(--pm-stripe-soft));
    color: oklch(var(--pm-stripe-soft-foreground));
    border-color: oklch(var(--pm-stripe) / 0.25);
  }
.pm-badge[data-method="coinbase"] {
    background: oklch(var(--pm-coinbase-soft));
    color: oklch(var(--pm-coinbase-soft-foreground));
    border-color: oklch(var(--pm-coinbase) / 0.25);
  }
.pm-badge[data-method="nowpayments"] {
    background: oklch(var(--pm-nowpayments-soft));
    color: oklch(var(--pm-nowpayments-soft-foreground));
    border-color: oklch(var(--pm-nowpayments) / 0.25);
  }
.pm-badge[data-method="manual"] {
    background: oklch(var(--pm-manual-soft));
    color: oklch(var(--pm-manual-soft-foreground));
    border-color: oklch(var(--pm-manual) / 0.25);
  }
/* ── Payment status pills (history table) ── */
.pay-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.24rem 0.62rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    line-height: 1;
    border: 1px solid transparent;
  }
.pay-status-pill[data-status="succeeded"] {
    background: oklch(var(--pay-succeeded-soft));
    color: oklch(var(--pay-succeeded-soft-foreground));
    border-color: oklch(var(--pay-succeeded) / 0.3);
  }
.pay-status-pill[data-status="pending"] {
    background: oklch(var(--pay-pending-soft));
    color: oklch(var(--pay-pending-soft-foreground));
    border-color: oklch(var(--pay-pending) / 0.3);
  }
.pay-status-pill[data-status="failed"] {
    background: oklch(var(--pay-failed-soft));
    color: oklch(var(--pay-failed-soft-foreground));
    border-color: oklch(var(--pay-failed) / 0.35);
  }
.pay-status-pill[data-status="refunded"] {
    background: oklch(var(--pay-refunded-soft));
    color: oklch(var(--pay-refunded-soft-foreground));
    border-color: oklch(var(--pay-refunded) / 0.25);
  }
.pay-status-pill[data-status="succeeded"]::before,
  .pay-status-pill[data-status="pending"]::before,
  .pay-status-pill[data-status="failed"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
  }
.pay-status-pill[data-status="succeeded"]::before {
    background: oklch(var(--pay-succeeded));
  }
.pay-status-pill[data-status="pending"]::before {
    background: oklch(var(--pay-pending));
    animation: pay-pending-pulse 1.8s ease-in-out infinite;
  }
.pay-status-pill[data-status="failed"]::before {
    background: oklch(var(--pay-failed));
  }
@keyframes pay-pending-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }
/* ── Payment history table ── */
.pay-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid oklch(var(--pay-history-rule));
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
  }
.pay-history-table thead th {
    background: oklch(var(--pay-history-head));
    color: oklch(var(--pay-history-head-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid oklch(var(--pay-history-rule));
  }
.pay-history-table thead th[data-align="right"] {
    text-align: right;
  }
.pay-history-row td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid oklch(var(--pay-history-rule));
    vertical-align: middle;
  }
.pay-history-row {
    background: oklch(var(--pay-history-row));
    transition: background 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  }
.pay-history-row:nth-child(even) {
    background: oklch(var(--pay-history-row-stripe));
  }
.pay-history-row:hover {
    background: oklch(var(--pay-history-row-hover));
  }
.pay-history-row:last-child td {
    border-bottom: none;
  }
.pay-history-row td[data-amount="true"] {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: oklch(var(--pay-history-amount));
    letter-spacing: -0.01em;
  }
/* ── Revenue summary stat cards ── */
.stat-card {
    position: relative;
    background: oklch(var(--stat-card));
    color: oklch(var(--stat-card-foreground));
    border: 1px solid oklch(var(--stat-card-border));
    border-radius: calc(var(--radius) + 2px);
    padding: 1.5rem 1.4rem;
    overflow: hidden;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: oklch(var(--stat-accent));
  }
.stat-card[data-tone="positive"]::before {
    background: oklch(var(--stat-accent-positive));
  }
.stat-card[data-tone="negative"]::before {
    background: oklch(var(--stat-accent-negative));
  }
.stat-card:hover {
    border-color: oklch(var(--ring) / 0.45);
    transform: translateY(-2px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.stat-card .stat-label {
    color: oklch(var(--stat-label));
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
.stat-card .stat-value {
    color: oklch(var(--stat-value));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 600;
  }
.stat-delta[data-trend="up"] {
    background: oklch(var(--stat-delta-positive-soft));
    color: oklch(var(--stat-delta-positive));
  }
.stat-delta[data-trend="down"] {
    background: oklch(var(--stat-delta-negative-soft));
    color: oklch(var(--stat-delta-negative));
  }
.stat-delta[data-trend="flat"] {
    background: oklch(var(--stat-delta-neutral-soft));
    color: oklch(var(--stat-delta-neutral));
  }
/* ── Pricing tier cards ── */
.tier-card {
    background: oklch(var(--tier-card));
    color: oklch(var(--tier-card-foreground));
    border: 1px solid oklch(var(--tier-border));
    border-radius: calc(var(--radius) + 4px);
    padding: 2rem 1.75rem;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
  }
.tier-card:hover {
    border-color: oklch(var(--ring) / 0.5);
    transform: translateY(-3px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.tier-card .tier-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
.tier-card .tier-cta-free {
    background: oklch(var(--tier-free));
    color: oklch(var(--tier-free-foreground));
    border: 1px solid oklch(var(--tier-border));
    border-radius: var(--radius);
  }
.tier-card .tier-cta-paid {
    background: oklch(var(--tier-paid));
    color: oklch(var(--tier-paid-foreground));
    border: 1px solid oklch(var(--tier-paid));
    border-radius: var(--radius);
    box-shadow: 0 8px 22px -10px oklch(0.45 0.18 var(--brand-hue) / 0.45);
  }
.tier-card-lifetime {
    background: oklch(var(--tier-card));
    color: oklch(var(--tier-card-foreground));
    border: 1px solid oklch(var(--tier-lifetime-ring) / 0.4);
    border-radius: calc(var(--radius) + 4px);
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(
      --shadow-tier-lifetime,
      0 24px 60px -20px oklch(0.45 0.18 var(--brand-hue) / 0.4),
      0 0 0 1px oklch(var(--tier-lifetime-ring) / 0.18)
    );
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.tier-card-lifetime::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-lifetime);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }
.tier-card-lifetime > * {
    position: relative;
    z-index: 1;
  }
.tier-card-lifetime:hover {
    transform: translateY(-4px);
    box-shadow: var(
      --shadow-tier-lifetime,
      0 30px 70px -22px oklch(0.45 0.18 var(--brand-hue) / 0.5),
      0 0 0 1px oklch(var(--tier-lifetime-ring) / 0.3)
    );
  }
.tier-card-lifetime .tier-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
.tier-card-lifetime .tier-badge {
    background: oklch(var(--tier-lifetime-badge));
    color: oklch(var(--tier-lifetime-badge-foreground));
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
  }
.tier-card-lifetime .tier-cta-lifetime {
    background-image: var(--gradient-lifetime);
    color: oklch(var(--tier-lifetime-foreground));
    border: 1px solid oklch(var(--tier-lifetime-ring) / 0.5);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px -10px oklch(0.45 0.18 var(--brand-hue) / 0.5);
  }
/* ── Invoice status badges (6 tones) ── */
.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid transparent;
  }
.invoice-status-badge[data-tone="draft"] {
    background: oklch(var(--inv-draft-soft));
    color: oklch(var(--inv-draft-soft-foreground));
    border-color: oklch(var(--inv-draft) / 0.25);
  }
.invoice-status-badge[data-tone="sent"] {
    background: oklch(var(--inv-sent-soft));
    color: oklch(var(--inv-sent-soft-foreground));
    border-color: oklch(var(--inv-sent) / 0.25);
  }
.invoice-status-badge[data-tone="viewed"] {
    background: oklch(var(--inv-viewed-soft));
    color: oklch(var(--inv-viewed-soft-foreground));
    border-color: oklch(var(--inv-viewed) / 0.25);
  }
.invoice-status-badge[data-tone="partial"] {
    background: oklch(var(--inv-partial-soft));
    color: oklch(var(--inv-partial-soft-foreground));
    border-color: oklch(var(--inv-partial) / 0.3);
  }
.invoice-status-badge[data-tone="paid"] {
    background: oklch(var(--inv-paid-soft));
    color: oklch(var(--inv-paid-soft-foreground));
    border-color: oklch(var(--inv-paid) / 0.35);
  }
.invoice-status-badge[data-tone="overdue"] {
    background: oklch(var(--inv-overdue-soft));
    color: oklch(var(--inv-overdue-soft-foreground));
    border-color: oklch(var(--inv-overdue) / 0.35);
  }
.invoice-status-badge[data-tone="paid"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--inv-paid));
    animation: invoice-paid-pulse 2.4s ease-in-out infinite;
  }
.invoice-status-badge[data-tone="overdue"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--inv-overdue));
  }
@keyframes invoice-paid-pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 oklch(var(--inv-paid) / 0.5);
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 0 0 4px oklch(var(--inv-paid) / 0);
    }
  }
/* ── Retainer status badges (Active / Paused / Canceled) ── */
.ret-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid transparent;
  }
.ret-status-badge[data-status="active"] {
    background: oklch(var(--ret-active-soft));
    color: oklch(var(--ret-active-soft-foreground));
    border-color: oklch(var(--ret-active) / 0.3);
  }
.ret-status-badge[data-status="paused"] {
    background: oklch(var(--ret-paused-soft));
    color: oklch(var(--ret-paused-soft-foreground));
    border-color: oklch(var(--ret-paused) / 0.3);
  }
.ret-status-badge[data-status="canceled"] {
    background: oklch(var(--ret-canceled-soft));
    color: oklch(var(--ret-canceled-soft-foreground));
    border-color: oklch(var(--ret-canceled) / 0.25);
  }
.ret-status-badge[data-status="active"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--ret-active));
    animation: ret-active-pulse 2.4s ease-in-out infinite;
  }
.ret-status-badge[data-status="paused"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--ret-paused));
  }
.ret-status-badge[data-status="canceled"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--ret-canceled));
    opacity: 0.6;
  }
@keyframes ret-active-pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 oklch(var(--ret-active) / 0.5);
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 0 0 4px oklch(var(--ret-active) / 0);
    }
  }
/* ── Retainer unit toggle (hours / deliverables) ── */
.ret-unit-toggle {
    display: inline-flex;
    background: oklch(var(--ret-unit));
    color: oklch(var(--ret-unit-foreground));
    border-radius: var(--radius);
    padding: 0.25rem;
    gap: 0.25rem;
  }
.ret-unit-toggle .ret-unit-option {
    border-radius: calc(var(--radius) - 2px);
    padding: 0.45rem 0.9rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
  }
.ret-unit-toggle .ret-unit-option[data-active="true"] {
    background: oklch(var(--ret-unit-active));
    color: oklch(var(--ret-unit-active-foreground));
    border-color: oklch(var(--ret-unit-ring) / 0.4);
    box-shadow: 0 0 0 1px oklch(var(--ret-unit-ring) / 0.3);
  }
/* ── Retainer usage progress bar (3 states) ── */
.usage-track {
    position: relative;
    overflow: hidden;
    background: oklch(var(--usage-track));
    border-radius: 999px;
    height: 8px;
  }
.usage-fill {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    height: 100%;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.usage-fill[data-state="ok"] {
    background: oklch(var(--usage-fill-ok));
  }
.usage-fill[data-state="approaching"] {
    background: oklch(var(--usage-fill-approaching));
  }
.usage-fill[data-state="exceeded"] {
    background: oklch(var(--usage-fill-exceeded));
  }
.usage-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      100deg,
      transparent 30%,
      oklch(1 0 0 / 0.28) 50%,
      transparent 70%
    );
    animation: shimmer 3s linear infinite;
  }
.usage-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
  }
.usage-pill[data-state="ok"] {
    background: oklch(var(--usage-soft-ok));
    color: oklch(var(--usage-soft-ok-foreground));
    border-color: oklch(var(--usage-fill-ok) / 0.25);
  }
.usage-pill[data-state="approaching"] {
    background: oklch(var(--usage-soft-approaching));
    color: oklch(var(--usage-soft-approaching-foreground));
    border-color: oklch(var(--usage-fill-approaching) / 0.3);
  }
.usage-pill[data-state="exceeded"] {
    background: oklch(var(--usage-soft-exceeded));
    color: oklch(var(--usage-soft-exceeded-foreground));
    border-color: oklch(var(--usage-fill-exceeded) / 0.35);
  }
/* ── Retainer card ── */
.ret-card {
    position: relative;
    background: oklch(var(--ret-card));
    color: oklch(var(--ret-card-foreground));
    border: 1px solid oklch(var(--ret-card-border));
    border-radius: calc(var(--radius) + 2px);
    padding: 1.5rem 1.4rem;
    overflow: hidden;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ret-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: oklch(var(--ret-accent));
  }
.ret-card[data-status="paused"]::before {
    background: oklch(var(--ret-paused));
  }
.ret-card[data-status="canceled"]::before {
    background: oklch(var(--ret-canceled));
    opacity: 0.5;
  }
.ret-card:hover {
    border-color: oklch(var(--ring) / 0.45);
    transform: translateY(-2px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.ret-card .ret-label {
    color: oklch(var(--ret-label));
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
.ret-card .ret-value {
    color: oklch(var(--ret-value));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.ret-card .ret-meta {
    color: oklch(var(--ret-meta));
    font-family: var(--font-body);
    font-size: 0.85rem;
  }
.ret-card .ret-divider {
    border-color: oklch(var(--ret-divider));
  }
/* ── Retainer income hero stat (dashboard header) ── */
.ret-income-hero {
    position: relative;
    background: oklch(var(--ret-card));
    color: oklch(var(--ret-card-foreground));
    border: 1px solid oklch(var(--ret-card-border));
    border-radius: calc(var(--radius) + 4px);
    padding: 1.75rem 1.6rem;
    overflow: hidden;
  }
.ret-income-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: oklch(var(--ret-accent-income));
  }
.ret-income-hero .ret-income-value {
    color: oklch(var(--ret-value));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
/* ── Retainer time-log table ── */
.ret-log-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid oklch(var(--ret-log-rule));
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
  }
.ret-log-table thead th {
    background: oklch(var(--ret-log-head));
    color: oklch(var(--ret-log-head-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid oklch(var(--ret-log-rule));
  }
.ret-log-table thead th[data-align="right"] {
    text-align: right;
  }
.ret-log-row td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid oklch(var(--ret-log-rule));
    vertical-align: middle;
  }
.ret-log-row {
    background: oklch(var(--ret-log-row));
    transition: background 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ret-log-row:nth-child(even) {
    background: oklch(var(--ret-log-row-stripe));
  }
.ret-log-row:hover {
    background: oklch(var(--ret-log-row-hover));
  }
.ret-log-row:last-child td {
    border-bottom: none;
  }
.ret-log-row td[data-amount="true"] {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: oklch(var(--ret-log-amount));
    letter-spacing: -0.01em;
  }
.ret-log-group-band {
    background: oklch(var(--ret-log-group));
    color: oklch(var(--ret-log-group-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid oklch(var(--ret-log-rule));
  }
/* ── Overage invoice badge ── */
.ret-overage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    background: oklch(var(--ret-overage-soft));
    color: oklch(var(--ret-overage-soft-foreground));
    border: 1px solid oklch(var(--ret-overage) / 0.3);
  }
.ret-overage-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--ret-overage));
  }
/* ── Funnel landing page utilities (ClickFunnels-style corporate) ── */
/* Sticky top navigation bar */
.funnel-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: oklch(var(--funnel-nav) / 0.85);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid oklch(var(--funnel-nav-border) / 0.6);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s
      cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.funnel-nav[data-scrolled="true"] {
    background: oklch(var(--funnel-nav-scrolled) / 0.92);
    border-bottom-color: oklch(var(--funnel-nav-scrolled-border) / 0.7);
    box-shadow: var(--shadow-funnel-nav);
  }
.funnel-nav-link {
    color: oklch(var(--funnel-nav-foreground) / 0.7);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
.funnel-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: oklch(var(--funnel-cta-primary));
    border-radius: 999px;
    transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.funnel-nav-link:hover,
  .funnel-nav-link:focus-visible {
    color: oklch(var(--funnel-nav-foreground));
  }
.funnel-nav-link:hover::after,
  .funnel-nav-link:focus-visible::after {
    width: 100%;
  }
/* Sticky bottom CTA bar */
.funnel-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: oklch(var(--funnel-cta-bar) / 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid oklch(var(--funnel-cta-bar-border) / 0.7);
    box-shadow: var(--shadow-funnel-bar);
    animation: funnel-bar-slide 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
/* Conversion-optimized buttons */
.funnel-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: calc(var(--radius) + 2px);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.funnel-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--funnel-cta-primary) / 0.35);
  }
.funnel-cta-btn[data-variant="primary"] {
    background-image: var(--gradient-funnel-cta);
    color: oklch(var(--funnel-cta-primary-foreground));
    box-shadow: var(--shadow-funnel-cta);
    border: 1px solid oklch(var(--funnel-cta-primary) / 0.5);
  }
.funnel-cta-btn[data-variant="primary"]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-funnel-cta-hover);
    filter: brightness(1.06);
  }
.funnel-cta-btn[data-variant="secondary"] {
    background: oklch(var(--funnel-cta-secondary));
    color: oklch(var(--funnel-cta-secondary-foreground));
    border: 1px solid oklch(var(--funnel-cta-ghost-border));
  }
.funnel-cta-btn[data-variant="secondary"]:hover:not(:disabled) {
    background: oklch(var(--funnel-cta-secondary-hover));
    transform: translateY(-1px);
    border-color: oklch(var(--funnel-cta-primary) / 0.4);
  }
.funnel-cta-btn[data-variant="ghost"] {
    background: var(--funnel-cta-ghost);
    color: oklch(var(--funnel-cta-ghost-foreground));
    border: 1px solid oklch(var(--funnel-cta-ghost-border));
  }
.funnel-cta-btn[data-variant="ghost"]:hover:not(:disabled) {
    background: oklch(var(--funnel-cta-ghost-hover));
    transform: translateY(-1px);
  }
.funnel-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
/* Hero funnel background glow */
.funnel-hero-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-funnel-hero);
    pointer-events: none;
    z-index: 0;
  }
/* Section alternation */
.funnel-section-alt {
    background: oklch(var(--funnel-section-alt));
    color: oklch(var(--funnel-section-alt-foreground));
  }
.funnel-section-dark {
    background: oklch(var(--funnel-section-dark));
    color: oklch(var(--funnel-section-dark-foreground));
  }
.funnel-section-problem {
    background-image: var(--gradient-funnel-problem);
  }
.funnel-section-solution {
    background: oklch(var(--funnel-solution));
    color: oklch(var(--funnel-solution-foreground));
  }
/* Problem/agitation cards */
.funnel-problem-card {
    background: oklch(var(--funnel-problem-soft) / 0.5);
    color: oklch(var(--funnel-problem-soft-foreground));
    border: 1px solid oklch(var(--funnel-problem) / 0.2);
    border-radius: calc(var(--radius) + 2px);
    padding: 1.5rem 1.4rem;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.funnel-problem-card:hover {
    border-color: oklch(var(--funnel-problem) / 0.4);
    transform: translateY(-2px);
  }
/* Feature cards */
.funnel-feature-card {
    position: relative;
    background: oklch(var(--funnel-feature-card));
    color: oklch(var(--funnel-feature-card-foreground));
    border: 1px solid oklch(var(--funnel-feature-card-border));
    border-radius: calc(var(--radius) + 4px);
    padding: 1.75rem 1.6rem;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
.funnel-feature-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-funnel-cta);
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.funnel-feature-card:hover {
    border-color: oklch(var(--funnel-cta-primary) / 0.45);
    transform: translateY(-4px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.funnel-feature-card:hover::after {
    opacity: 1;
  }
.funnel-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--radius) + 2px);
    background: oklch(var(--funnel-feature-icon));
    color: oklch(var(--funnel-feature-icon-foreground));
    margin-bottom: 1rem;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.funnel-feature-card:hover .funnel-feature-icon {
    transform: scale(1.08) rotate(-3deg);
  }
/* Video showcase (lazy-loaded YouTube embed) */
.funnel-video-frame {
    background: oklch(var(--funnel-feature-card));
    border: 1px solid oklch(var(--funnel-feature-card-border));
    border-radius: calc(var(--radius) + 6px);
    overflow: hidden;
  }
.funnel-video-aspect {
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
  }
/* Portrait (Shorts) sources render in a centered 9:16 frame that fits the
     viewport without letterboxing distortion. */
.funnel-video-aspect--portrait {
    aspect-ratio: 9 / 16;
    max-height: min(70vh, 620px);
    margin-inline: auto;
  }
.funnel-video-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: var(--gradient-funnel-cta);
    color: oklch(1 0 0);
    box-shadow: 0 14px 36px -12px oklch(0.45 0.19 var(--brand-hue) / 0.55);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.funnel-video-play:hover {
    transform: scale(1.08);
  }
/* Top mask that hides the YouTube uploader/channel name which flashes
     near the top of the iframe on load. Sits above the iframe (which has
     pointer-events:none) and below the interactive controls. The gradient
     is pushed DOWN further (height 30% with the fully opaque band starting
     at 8% of the frame) so it fully covers the publisher info bar that
     YouTube renders lower on portrait 9:16 Shorts, and is kept DARKER —
     fully opaque (alpha 1.0) through the top ~62% of the mask, then a
     slower fade — so the channel name and upload date are completely
     hidden, not faintly visible, while the lower video remains
     unobstructed. */
.funnel-video-channel-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      oklch(var(--funnel-feature-card)) 0%,
      oklch(var(--funnel-feature-card)) 62%,
      oklch(var(--funnel-feature-card) / 0.99) 78%,
      oklch(var(--funnel-feature-card) / 0.9) 90%,
      oklch(var(--funnel-feature-card) / 0.5) 96%,
      transparent 100%
    );
    z-index: 5;
  }
/* Unmute / mute control rendered on the overlay (NOT on the iframe, which
     has pointer-events:none). Styled to match the funnel CTA treatment so it
     reads as an intentional part of the page design. */
.funnel-video-mute {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: oklch(var(--funnel-cta-secondary));
    color: oklch(var(--funnel-cta-secondary-foreground));
    border: 1px solid oklch(var(--funnel-cta-ghost-border));
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 6px 18px -8px oklch(0.15 0.01 var(--brand-hue) / 0.28);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
.funnel-video-mute:hover {
    background: oklch(var(--funnel-cta-secondary-hover));
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px oklch(0.15 0.01 var(--brand-hue) / 0.36);
  }
.funnel-video-mute:focus-visible {
    outline: 2px solid oklch(var(--funnel-cta-primary));
    outline-offset: 2px;
  }
.funnel-video-mute--on {
    background: var(--gradient-funnel-cta);
    color: oklch(var(--funnel-cta-primary-foreground));
    border-color: transparent;
    box-shadow: 0 8px 22px -10px oklch(0.45 0.19 var(--brand-hue) / 0.5);
  }
.funnel-video-mute--on:hover {
    box-shadow: 0 12px 28px -10px oklch(0.45 0.19 var(--brand-hue) / 0.62);
  }
/* How-it-works numbered steps */
.funnel-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: oklch(var(--funnel-step-num));
    color: oklch(var(--funnel-step-num-foreground));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 8px 22px -10px oklch(0.45 0.18 var(--brand-hue) / 0.5);
    position: relative;
    z-index: 1;
  }
.funnel-step-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: oklch(var(--funnel-step-line));
    z-index: 0;
  }
/* Trust indicators — logo strip */
.funnel-logo-strip {
    color: oklch(var(--funnel-logo-strip));
    opacity: 0.7;
    filter: grayscale(1);
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), filter 0.24s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.funnel-logo-strip:hover {
    opacity: 1;
    filter: grayscale(0.4);
  }
/* Stat counters */
.funnel-stat-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: oklch(var(--funnel-stat-num));
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.funnel-stat-label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: oklch(var(--funnel-stat-label));
  }
/* Testimonial cards */
.funnel-testimonial {
    position: relative;
    background: oklch(var(--funnel-testimonial));
    color: oklch(var(--funnel-testimonial-foreground));
    border: 1px solid oklch(var(--funnel-testimonial-border));
    border-radius: calc(var(--radius) + 4px);
    padding: 1.75rem 1.6rem;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
.funnel-testimonial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: oklch(var(--funnel-testimonial-quote));
  }
.funnel-testimonial:hover {
    border-color: oklch(var(--funnel-cta-primary) / 0.4);
    transform: translateY(-3px);
    box-shadow: var(
      --shadow-elevated,
      0 10px 30px -12px oklch(0.45 0.18 var(--brand-hue) / 0.25)
    );
  }
.funnel-testimonial-quote {
    color: oklch(var(--funnel-testimonial-quote));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.5;
  }
.funnel-testimonial-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: oklch(var(--funnel-testimonial-avatar));
    color: oklch(var(--funnel-cta-primary-foreground));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
  }
/* Feature comparison table */
.funnel-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid oklch(var(--funnel-compare-rule));
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
  }
.funnel-compare-table thead th {
    background: oklch(var(--funnel-compare-head));
    color: oklch(var(--funnel-compare-head-foreground));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid oklch(var(--funnel-compare-rule));
  }
.funnel-compare-table thead th[data-highlight="true"] {
    background-image: var(--gradient-funnel-cta);
  }
.funnel-compare-row td {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid oklch(var(--funnel-compare-rule));
    vertical-align: middle;
    transition: background 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  }
.funnel-compare-row {
    background: oklch(var(--funnel-compare-row));
  }
.funnel-compare-row:nth-child(even) {
    background: oklch(var(--funnel-compare-row-stripe));
  }
.funnel-compare-row:hover td {
    background: oklch(var(--funnel-compare-row-hover));
  }
.funnel-compare-row:last-child td {
    border-bottom: none;
  }
.funnel-compare-yes {
    color: oklch(var(--funnel-compare-yes));
  }
.funnel-compare-no {
    color: oklch(var(--funnel-compare-no));
  }
/* Urgency cues */
.funnel-urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    background: oklch(var(--funnel-urgency-soft));
    color: oklch(var(--funnel-urgency-soft-foreground));
    border: 1px solid oklch(var(--funnel-urgency) / 0.3);
  }
.funnel-urgency-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: oklch(var(--funnel-urgency-pulse));
    animation: funnel-urgency-pulse 1.6s ease-in-out infinite;
  }
.funnel-urgency-section {
    background: oklch(var(--funnel-urgency-soft) / 0.4);
    border: 1px solid oklch(var(--funnel-urgency) / 0.25);
    border-radius: calc(var(--radius) + 6px);
  }
/* FAQ accordion */
.funnel-faq-q {
    background: oklch(var(--funnel-faq-q));
    color: oklch(var(--funnel-faq-q-foreground));
    border: 1px solid oklch(var(--funnel-faq-q-border));
    border-radius: calc(var(--radius) + 2px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.funnel-faq-q[data-open="true"] {
    border-color: oklch(var(--funnel-cta-primary) / 0.45);
    box-shadow: 0 0 0 1px oklch(var(--funnel-cta-primary) / 0.2);
  }
.funnel-faq-q:hover {
    border-color: oklch(var(--funnel-cta-primary) / 0.35);
  }
.funnel-faq-a {
    background: oklch(var(--funnel-faq-a));
    color: oklch(var(--funnel-faq-a-foreground));
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
  }
/* Scroll-triggered reveal animations.
   *
   * Content carrying a reveal class starts at opacity:0 and animates in when
   * the useScrollReveal hook sets data-visible="true" (via IntersectionObserver).
   * To guarantee the body is never permanently blank if the observer is slow
   * to fire or fails entirely, a CSS @keyframes fallback auto-reveals every
   * reveal target shortly after mount. The data-visible animation overrides
   * the fallback the moment the observer fires, so the visible entrance is
   * still driven by scroll where the observer works. */
.funnel-reveal {
    opacity: 0;
    will-change: opacity, transform;
    animation: funnel-reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
      forwards;
  }
.funnel-reveal[data-visible="true"] {
    animation: funnel-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.funnel-fade-up {
    opacity: 0;
    will-change: opacity, transform;
    animation: funnel-reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
      forwards;
  }
.funnel-fade-up[data-visible="true"] {
    animation: funnel-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.funnel-slide-left {
    opacity: 0;
    will-change: opacity, transform;
    animation: funnel-reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
      forwards;
  }
.funnel-slide-left[data-visible="true"] {
    animation: funnel-slide-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.funnel-slide-right {
    opacity: 0;
    will-change: opacity, transform;
    animation: funnel-reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
      forwards;
  }
.funnel-slide-right[data-visible="true"] {
    animation: funnel-slide-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
/* Staggered delays — apply via inline style or nth-child */
.funnel-stagger > * {
    opacity: 0;
    animation: funnel-reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
      forwards;
  }
.funnel-stagger[data-visible="true"] > * {
    animation: funnel-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(1) {
    animation-delay: 0.05s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(2) {
    animation-delay: 0.13s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(3) {
    animation-delay: 0.21s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(4) {
    animation-delay: 0.29s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(5) {
    animation-delay: 0.37s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(6) {
    animation-delay: 0.45s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(7) {
    animation-delay: 0.53s;
  }
.funnel-stagger[data-visible="true"] > *:nth-child(8) {
    animation-delay: 0.61s;
  }
/* Primary scroll-reveal entrance. Drives .funnel-reveal[data-visible="true"]
   * over the 0.8s duration referenced in that rule. */
@keyframes funnel-reveal {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Fade-up entrance. Drives .funnel-fade-up[data-visible="true"] over the
   * 0.7s duration referenced in that rule. */
@keyframes funnel-fade-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Safety-net fallback: auto-reveals reveal targets shortly after mount so
   * the body is never permanently blank if the IntersectionObserver is slow
   * to fire or fails entirely. Overridden the moment data-visible="true" is
   * set, so the visible entrance is still driven by scroll where the
   * observer works. */
@keyframes funnel-reveal-fallback {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Section transition divider */
.funnel-divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      oklch(var(--funnel-cta-primary) / 0.25) 50%,
      transparent 100%
    );
  }
/* Final CTA section */
.funnel-final-cta {
    background-image: var(--gradient-funnel-cta), var(--gradient-funnel-hero);
    background-blend-mode: multiply, normal;
    color: oklch(var(--funnel-cta-primary-foreground));
    border-radius: calc(var(--radius) + 8px);
    position: relative;
    overflow: hidden;
  }
.funnel-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-funnel-hero);
    opacity: 0.5;
    pointer-events: none;
  }
/* Reduced motion — disable funnel animations */
@media (prefers-reduced-motion: reduce) {
    .funnel-reveal,
    .funnel-fade-up,
    .funnel-slide-left,
    .funnel-slide-right,
    .funnel-stagger > * {
      opacity: 1;
      animation: none;
    }
    .funnel-cta-bar {
      animation: none;
    }
    .funnel-urgency-badge::before {
      animation: none;
    }
  }
/* ── Client onboarding flow utilities (5-step branded wizard) ── */
/* Onboarding shell + card surfaces */
.ob-shell {
    background: oklch(var(--ob-shell));
    color: oklch(var(--ob-shell-foreground));
  }
.ob-card {
    background: oklch(var(--ob-card));
    color: oklch(var(--ob-card-foreground));
    border: 1px solid oklch(var(--ob-card-border));
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-ob-card);
  }
.ob-divider {
    border-color: oklch(var(--ob-divider));
  }
.ob-label {
    color: oklch(var(--ob-label));
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
.ob-meta {
    color: oklch(var(--ob-meta));
    font-family: var(--font-body);
    font-size: 0.85rem;
  }
.ob-subhead {
    color: oklch(var(--ob-subhead));
    font-family: var(--font-display);
    font-weight: 600;
  }
/* Step progress rail (5 steps) */
.ob-rail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.ob-rail-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: oklch(var(--ob-rail-track));
    border-radius: 999px;
    transform: translateY(-50%);
    z-index: 0;
  }
.ob-rail-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    background: oklch(var(--ob-rail-fill));
    border-radius: 999px;
    transform: translateY(-50%);
    z-index: 0;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-step-dot[data-state="pending"] {
    background: oklch(var(--ob-step-pending));
    color: oklch(var(--ob-step-pending-foreground));
    border-color: oklch(var(--ob-step-pending-border));
  }
.ob-step-dot[data-state="current"] {
    background: oklch(var(--ob-step-current));
    color: oklch(var(--ob-step-current-foreground));
    box-shadow: var(--shadow-ob-step-current);
    animation: onboard-step-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.ob-step-dot[data-state="done"] {
    background: oklch(var(--ob-step-done));
    color: oklch(var(--ob-step-done-foreground));
  }
.ob-step-dot[data-state="skipped"] {
    background: oklch(var(--ob-step-skipped));
    color: oklch(var(--ob-step-skipped-foreground));
    border-color: oklch(var(--ob-step-skipped-border));
  }
.ob-step-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
.ob-step-label[data-state="current"] {
    color: oklch(var(--ob-step-current));
    font-weight: 600;
  }
.ob-step-label[data-state="pending"] {
    color: oklch(var(--ob-step-pending-foreground));
  }
.ob-step-label[data-state="done"] {
    color: oklch(var(--ob-step-done-soft-foreground));
  }
.ob-step-label[data-state="skipped"] {
    color: oklch(var(--ob-step-skipped-foreground));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.7;
  }
/* Video player surface (Step 1) */
.ob-video-frame {
    position: relative;
    background: oklch(var(--ob-video-frame));
    color: oklch(var(--ob-video-frame-foreground));
    border-radius: calc(var(--radius) + 6px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
  }
.ob-video-scrim {
    position: absolute;
    inset: 0;
    background: oklch(var(--ob-video-scrim) / 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
.ob-video-control {
    background: oklch(var(--ob-video-control));
    color: oklch(var(--ob-video-control-foreground));
    border-radius: 999px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ob-video-control:hover {
    transform: scale(1.06);
  }
.ob-video-progress {
    position: relative;
    height: 4px;
    background: oklch(var(--ob-video-progress-track));
    border-radius: 999px;
    overflow: hidden;
  }
.ob-video-progress-fill {
    height: 100%;
    background: oklch(var(--ob-video-progress));
    border-radius: 999px;
    transition: width 0.2s linear;
  }
.ob-video-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: oklch(var(--ob-video-play));
    color: oklch(var(--ob-video-play-foreground));
    box-shadow: 0 12px 32px -10px oklch(0.45 0.18 var(--brand-hue) / 0.5);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    animation: onboard-video-pulse 2.4s ease-in-out infinite;
  }
.ob-video-play:hover {
    transform: scale(1.08);
  }
/* Questionnaire field (Step 2) */
.ob-field {
    background: oklch(var(--ob-field));
    color: oklch(var(--ob-field-foreground));
    border: 1px solid oklch(var(--ob-field-border));
    border-radius: calc(var(--radius) - 2px);
    transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
      0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ob-field:focus,
  .ob-field:focus-visible {
    outline: none;
    border-color: oklch(var(--ob-field-focus));
    box-shadow: 0 0 0 3px oklch(var(--ob-field-focus) / 0.18);
  }
.ob-field-soft {
    background: oklch(var(--ob-field-soft));
    color: oklch(var(--ob-field-soft-foreground));
    border-radius: calc(var(--radius) - 4px);
  }
.ob-helper {
    color: oklch(var(--ob-helper));
    font-family: var(--font-body);
    font-size: 0.82rem;
  }
/* Contract review paper (Step 3) */
.ob-paper {
    background: oklch(var(--ob-paper));
    color: oklch(var(--ob-paper-foreground));
    border: 1px solid oklch(var(--ob-paper-rule));
    border-radius: calc(var(--radius) + 4px);
    font-family: var(--font-body);
    line-height: 1.7;
  }
.ob-paper-header {
    background: oklch(var(--ob-paper-header));
    color: oklch(var(--ob-paper-header-foreground));
    border-bottom: 1px solid oklch(var(--ob-paper-rule));
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
  }
.ob-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--ob-scroll-thumb)) oklch(var(--ob-scroll-track));
  }
.ob-scroll::-webkit-scrollbar {
    width: 8px;
  }
.ob-scroll::-webkit-scrollbar-track {
    background: oklch(var(--ob-scroll-track));
    border-radius: 999px;
  }
.ob-scroll::-webkit-scrollbar-thumb {
    background: oklch(var(--ob-scroll-thumb));
    border-radius: 999px;
  }
.ob-scroll::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--ob-scroll-thumb-hover));
  }
.ob-accept-btn {
    background: oklch(var(--ob-accept));
    color: oklch(var(--ob-accept-foreground));
    border: 1px solid oklch(var(--ob-accept));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    box-shadow: 0 8px 22px -10px oklch(0.62 0.17 150 / 0.5);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-accept-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px oklch(0.62 0.17 150 / 0.6);
  }
.ob-changes-btn {
    background: oklch(var(--ob-changes));
    color: oklch(var(--ob-changes-foreground));
    border: 1px solid oklch(var(--ob-changes-border));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-changes-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: oklch(var(--ob-changes-foreground) / 0.4);
  }
/* Welcome package prose (Step 4) */
.ob-prose {
    background: oklch(var(--ob-prose));
    color: oklch(var(--ob-prose-foreground));
    border-radius: calc(var(--radius) + 2px);
    font-family: var(--font-body);
    line-height: 1.75;
  }
.ob-prose h1,
  .ob-prose h2,
  .ob-prose h3 {
    color: oklch(var(--ob-prose-heading));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
.ob-prose h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }
.ob-prose h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
.ob-prose a {
    color: oklch(var(--ob-prose-accent));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
.ob-prose strong {
    color: oklch(var(--ob-prose-heading));
    font-weight: 600;
  }
.ob-prose hr {
    border: none;
    border-top: 1px solid oklch(var(--ob-prose-rule));
    margin: 1.5rem 0;
  }
.ob-prose blockquote {
    border-left: 3px solid oklch(var(--ob-prose-quote));
    background: oklch(var(--ob-prose-quote-soft));
    padding: 0.75rem 1.1rem;
    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
    font-style: italic;
  }
.ob-prose ul,
  .ob-prose ol {
    padding-left: 1.4rem;
  }
.ob-prose li {
    margin-bottom: 0.4rem;
  }
/* Kickoff checklist card (Step 5) */
.ob-check-card {
    background: oklch(var(--ob-check-card));
    color: oklch(var(--ob-check-card-foreground));
    border: 1px solid oklch(var(--ob-check-card-border));
    border-radius: calc(var(--radius) + 2px);
  }
.ob-check-row {
    background: oklch(var(--ob-check-row));
    border-bottom: 1px solid oklch(var(--ob-check-rule));
    transition: background 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ob-check-row:nth-child(even) {
    background: oklch(var(--ob-check-row-stripe));
  }
.ob-check-row:hover {
    background: oklch(var(--ob-check-row-hover));
  }
.ob-check-row:last-child {
    border-bottom: none;
  }
.ob-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: calc(var(--radius) - 4px);
    background: oklch(var(--ob-check-box));
    border: 1.5px solid oklch(var(--ob-check-box-border));
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
  }
.ob-check-box[data-checked="true"] {
    background: oklch(var(--ob-check-box-checked));
    color: oklch(var(--ob-check-box-checked-foreground));
    border-color: oklch(var(--ob-check-box-checked));
    animation: onboard-check-burst 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.ob-check-text {
    color: oklch(var(--ob-check-text));
    font-family: var(--font-body);
  }
.ob-check-text[data-done="true"] {
    color: oklch(var(--ob-check-text-done));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
.ob-check-meta {
    color: oklch(var(--ob-check-meta));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
  }
.ob-check-progress {
    position: relative;
    height: 6px;
    background: oklch(var(--ob-check-progress-track));
    border-radius: 999px;
    overflow: hidden;
  }
.ob-check-progress-fill {
    height: 100%;
    background: oklch(var(--ob-check-progress));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-check-progress-label {
    color: oklch(var(--ob-check-progress-foreground));
    background: oklch(var(--ob-check-progress));
    border-radius: 999px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
  }
/* Onboarding action buttons — CTA + Skip */
.ob-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: var(--gradient-ob-cta);
    color: oklch(var(--ob-cta-foreground));
    border: 1px solid oklch(var(--ob-cta) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-ob-cta);
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
.ob-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-ob-cta-hover);
    filter: brightness(1.06);
  }
.ob-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--ob-cta) / 0.35);
  }
.ob-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
.ob-skip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--ob-skip);
    color: oklch(var(--ob-skip-foreground));
    border: 1px solid oklch(var(--ob-skip-border));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ob-skip-btn:hover:not(:disabled) {
    background: oklch(var(--ob-skip-hover));
    border-color: oklch(var(--ob-skip-foreground) / 0.3);
  }
.ob-skip-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--ob-skip-foreground) / 0.18);
  }
.ob-skip-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* Onboarding reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ob-step-dot[data-state="current"],
    .ob-video-play,
    .ob-check-box[data-checked="true"] {
      animation: none;
    }
  }
/* ── E-signature flow (typed-name signing + audit trail) ── */
.sig-signed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    background: oklch(var(--sig-signed-soft));
    color: oklch(var(--sig-signed-soft-foreground));
    border: 1px solid oklch(var(--sig-signed) / 0.35);
  }
.sig-signed-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--sig-signed-dot));
    animation: sig-signed-pulse 2.4s ease-in-out infinite;
  }
@keyframes sig-signed-pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 oklch(var(--sig-signed) / 0.5);
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 0 0 4px oklch(var(--sig-signed) / 0);
    }
  }
.sig-field {
    background: oklch(var(--sig-field));
    color: oklch(var(--sig-field-foreground));
    border: 1px solid oklch(var(--sig-field-border));
    border-radius: calc(var(--radius) - 2px);
    font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script",
      var(--font-body);
    font-style: italic;
    color: oklch(var(--sig-ink));
    transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
      0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
.sig-field:focus,
  .sig-field:focus-visible {
    outline: none;
    border-color: oklch(var(--sig-field-focus));
    box-shadow: 0 0 0 3px oklch(var(--sig-field-focus) / 0.18);
  }
.sig-field::-moz-placeholder {
    color: oklch(var(--sig-ink-soft));
    font-style: italic;
  }
.sig-field::placeholder {
    color: oklch(var(--sig-ink-soft));
    font-style: italic;
  }
.sig-panel {
    background: oklch(var(--sig-panel));
    color: oklch(var(--sig-panel-foreground));
    border: 1px solid oklch(var(--sig-panel-border));
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-sig-panel);
    overflow: hidden;
  }
.sig-panel .sig-panel-header {
    background: oklch(var(--sig-panel-header));
    color: oklch(var(--sig-panel-header-foreground));
    border-bottom: 1px solid oklch(var(--sig-panel-rule));
  }
.sig-panel .sig-panel-rule {
    border-color: oklch(var(--sig-panel-rule));
  }
.sig-panel .sig-line {
    border-bottom: 1.5px solid oklch(var(--sig-line));
  }
.sig-panel .sig-line[data-active="true"] {
    border-bottom-color: oklch(var(--sig-line-active));
  }
.sig-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: var(--gradient-sig-cta);
    color: oklch(var(--sig-cta-foreground));
    border: 1px solid oklch(var(--sig-cta) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-sig-cta);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.sig-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sig-cta-hover);
    filter: brightness(1.06);
  }
.sig-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--sig-cta) / 0.35);
  }
.sig-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
.sig-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(var(--sig-download));
    color: oklch(var(--sig-download-foreground));
    border: 1px solid oklch(var(--sig-download-border));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.sig-download-btn:hover:not(:disabled) {
    background: oklch(var(--sig-download-hover));
    border-color: oklch(var(--sig-cta) / 0.4);
    transform: translateY(-1px);
  }
.sig-download-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--sig-cta) / 0.22);
  }
.sig-download-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
.sig-audit-block {
    background: oklch(var(--sig-audit));
    color: oklch(var(--sig-audit-foreground));
    border: 1px solid oklch(var(--sig-audit-border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.sig-audit-block .sig-audit-row {
    border-bottom: 1px solid oklch(var(--sig-audit-rule));
  }
.sig-audit-block .sig-audit-row:last-child {
    border-bottom: none;
  }
.sig-audit-block .sig-audit-label {
    color: oklch(var(--sig-audit-label));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.sig-audit-block .sig-audit-value {
    color: oklch(var(--sig-audit-value));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.sig-audit-block .sig-audit-accent {
    color: oklch(var(--sig-audit-accent));
  }
.sig-audit-block .sig-audit-lock {
    color: oklch(var(--sig-audit-lock));
  }
/* E-signature reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sig-signed-badge::before {
      animation: none;
    }
  }
/* ── Scope Creep Protection — Change Order document + scope-locked card ── */
/* Change Order document surface — branded printable paper, mirrors
     .invoice-paper / .sig-panel treatment. Warmer-tinted (hue 75) so it
     reads as a distinct contract artifact beside invoices. */
.co-paper {
    background: oklch(var(--co-paper));
    color: oklch(var(--co-paper-foreground));
    border: 1px solid oklch(var(--co-rule));
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-co-paper);
    font-family: var(--font-body);
  }
.co-paper .co-header-band {
    background: oklch(var(--co-header));
    color: oklch(var(--co-header-foreground));
    border-bottom: 1px solid oklch(var(--co-rule));
  }
.co-paper .co-section-head {
    background: oklch(var(--co-section-head));
    color: oklch(var(--co-section-head-foreground));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid oklch(var(--co-rule));
  }
.co-paper .co-section-row {
    background: oklch(var(--co-section-row));
  }
.co-paper .co-section-row:nth-child(even) {
    background: oklch(var(--co-section-row-stripe));
  }
.co-paper .co-totals-band {
    background: oklch(var(--co-totals));
    color: oklch(var(--co-totals-foreground));
    border-radius: calc(var(--radius) - 2px);
  }
.co-paper .co-totals-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
/* Change Order status badges — draft / sent / approved / rejected.
     Approved reuses the e-sig green family (hue 152); rejected reuses the
     destructive red family (hue 22). Mirrors .invoice-status-badge. */
.co-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid transparent;
  }
.co-status-badge[data-tone="draft"] {
    background: oklch(var(--co-draft-soft));
    color: oklch(var(--co-draft-soft-foreground));
    border-color: oklch(var(--co-draft) / 0.25);
  }
.co-status-badge[data-tone="sent"] {
    background: oklch(var(--co-sent-soft));
    color: oklch(var(--co-sent-soft-foreground));
    border-color: oklch(var(--co-sent) / 0.25);
  }
.co-status-badge[data-tone="approved"] {
    background: oklch(var(--co-approved-soft));
    color: oklch(var(--co-approved-soft-foreground));
    border-color: oklch(var(--co-approved) / 0.35);
  }
.co-status-badge[data-tone="rejected"] {
    background: oklch(var(--co-rejected-soft));
    color: oklch(var(--co-rejected-soft-foreground));
    border-color: oklch(var(--co-rejected) / 0.35);
  }
.co-status-badge[data-tone="approved"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--co-approved));
    animation: co-approved-pulse 2.4s ease-in-out infinite;
  }
.co-status-badge[data-tone="rejected"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--co-rejected));
  }
.co-status-badge[data-tone="sent"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--co-sent));
    animation: co-sent-pulse 1.8s ease-in-out infinite;
  }
@keyframes co-approved-pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 oklch(var(--co-approved) / 0.5);
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 0 0 4px oklch(var(--co-approved) / 0);
    }
  }
@keyframes co-sent-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }
/* Scope-locked card badge — the "Agreed Scope is locked" indicator on the
     project detail page. Distinct indigo-lock tone (brand hue, deeper). */
.co-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
    background: oklch(var(--co-locked-soft));
    color: oklch(var(--co-locked-soft-foreground));
    border: 1px solid oklch(var(--co-locked) / 0.35);
  }
.co-locked-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--co-locked-dot));
  }
/* Scope-locked card surface — sits on the project detail page, lists
     each agreed deliverable with a numbered chip and the lock timestamp. */
.co-scope-card {
    background: oklch(var(--co-card));
    color: oklch(var(--co-card-foreground));
    border: 1px solid oklch(var(--co-card-border));
    border-radius: calc(var(--radius) + 2px);
  }
.co-scope-card .co-deliverable-row {
    background: oklch(var(--co-deliverable-row));
    border-bottom: 1px solid oklch(var(--co-deliverable-rule));
  }
.co-scope-card .co-deliverable-row:nth-child(even) {
    background: oklch(var(--co-deliverable-row-stripe));
  }
.co-scope-card .co-deliverable-row:last-child {
    border-bottom: none;
  }
.co-scope-card .co-deliverable-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(var(--radius) - 2px);
    background: oklch(var(--co-deliverable-num));
    color: oklch(var(--co-deliverable-num-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.78rem;
    flex-shrink: 0;
  }
.co-scope-card .co-lock-stamp {
    color: oklch(var(--co-lock-stamp));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
/* Flagged-message highlight — the scope-creep flag on a client message in
     the freelancer thread. Amber-tinted alert surface (hue 70) so it reads
     as "attention" without screaming error. The trigger phrase is
     emphasized with a deeper amber underline + tinted background. */
.co-flagged-message {
    background: oklch(var(--co-flag-soft));
    color: oklch(var(--co-flag-soft-foreground));
    border: 1px solid oklch(var(--co-flag-border));
    border-radius: calc(var(--radius) - 2px);
    border-left: 3px solid oklch(var(--co-flag));
  }
.co-flagged-message .co-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    line-height: 1;
    background: oklch(var(--co-flag-badge));
    color: oklch(var(--co-flag-badge-foreground));
  }
.co-flagged-message .co-flag-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.85);
    animation: co-flag-pulse 1.6s ease-in-out infinite;
  }
.co-flagged-message .co-flag-phrase {
    background: oklch(var(--co-flag-phrase-bg));
    color: oklch(var(--co-flag-phrase));
    border-bottom: 1.5px solid oklch(var(--co-flag-phrase));
    padding: 0 0.15rem;
    border-radius: 2px;
    font-weight: 600;
  }
@keyframes co-flag-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
/* Scope-creep banner — dismissible summary strip atop the Messages page
     shown when one or more client messages have been flagged. Amber-tinted
     alert surface matching the .co-flagged-message treatment. */
.co-flag-banner {
    background: oklch(var(--co-flag-banner));
    color: oklch(var(--co-flag-banner-foreground));
    border-color: oklch(var(--co-flag-banner-border));
  }
/* Standalone scope-creep dot — the inline status pip used inside a
     .co-flag-badge when the badge is rendered outside a
     .co-flagged-message (e.g. inside the banner). Mirrors the pulsing
     dot the .co-flag-badge::before pseudo draws inside flagged messages. */
.co-flag-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: oklch(var(--co-flag-dot));
    animation: co-flag-pulse 1.6s ease-in-out infinite;
  }
/* Audit timeline — immutable chronological scope-change log on the
     project detail page. Mirrors .sig-audit-block forensic treatment but on
     a vertical timeline rail with event-typed nodes. */
.co-audit-timeline {
    background: oklch(var(--co-audit));
    color: oklch(var(--co-audit-foreground));
    border: 1px solid oklch(var(--co-audit-border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.co-audit-timeline .co-audit-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.75rem;
    width: 2px;
    background: oklch(var(--co-audit-rail));
    border-radius: 999px;
  }
.co-audit-timeline .co-audit-entry {
    border-bottom: 1px solid oklch(var(--co-audit-rule));
    position: relative;
  }
.co-audit-timeline .co-audit-entry:last-child {
    border-bottom: none;
  }
.co-audit-timeline .co-audit-node {
    position: absolute;
    left: 0.25rem;
    top: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 2px solid oklch(var(--co-audit));
    font-size: 0;
    z-index: 1;
  }
.co-audit-timeline .co-audit-node[data-event="locked"] {
    background: oklch(var(--co-audit-node-locked));
  }
.co-audit-timeline .co-audit-node[data-event="flagged"] {
    background: oklch(var(--co-audit-node-flagged));
  }
.co-audit-timeline .co-audit-node[data-event="co"] {
    background: oklch(var(--co-audit-node-co));
  }
.co-audit-timeline .co-audit-node[data-event="signed"] {
    background: oklch(var(--co-audit-node-signed));
  }
.co-audit-timeline .co-audit-node[data-event="rejected"] {
    background: oklch(var(--co-audit-node-rejected));
  }
.co-audit-timeline .co-audit-label {
    color: oklch(var(--co-audit-label));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.co-audit-timeline .co-audit-value {
    color: oklch(var(--co-audit-value));
    font-family: var(--font-body);
  }
.co-audit-timeline .co-audit-meta {
    color: oklch(var(--co-audit-meta));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
.co-audit-timeline .co-audit-lock {
    color: oklch(var(--co-audit-lock));
  }
/* Change Order primary CTA — mirrors .sig-cta-btn */
.co-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: var(--gradient-co-cta);
    color: oklch(var(--co-cta-foreground));
    border: 1px solid oklch(var(--co-cta) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-co-cta);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.co-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-co-cta-hover);
    filter: brightness(1.06);
  }
.co-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--co-cta) / 0.35);
  }
.co-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
/* Change Order download PDF action — mirrors .sig-download-btn */
.co-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(var(--co-download));
    color: oklch(var(--co-download-foreground));
    border: 1px solid oklch(var(--co-download-border));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.co-download-btn:hover:not(:disabled) {
    background: oklch(var(--co-download-hover));
    border-color: oklch(var(--co-cta) / 0.4);
    transform: translateY(-1px);
  }
.co-download-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--co-cta) / 0.22);
  }
.co-download-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
/* Scope Creep Protection reduced motion */
@media (prefers-reduced-motion: reduce) {
    .co-status-badge[data-tone="approved"]::before,
    .co-status-badge[data-tone="sent"]::before,
    .co-flagged-message .co-flag-badge::before {
      animation: none;
    }
  }
/* ── Custom-domain DNS settings + redirect + verification utilities ── */
/* DNS records editor card — extends the existing custom-domain card in
     SettingsPage. Calm indigo-tinted table mirroring the invoice-line-table
     treatment. */
.dns-card {
    background: oklch(var(--dns-card));
    color: oklch(var(--dns-card-foreground));
    border: 1px solid oklch(var(--dns-card-border));
    border-radius: calc(var(--radius) + 2px);
  }
.dns-section-head {
    color: oklch(var(--dns-section-head-foreground));
    background: oklch(var(--dns-section-head));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.dns-table .dns-row {
    background: oklch(var(--dns-row));
    border-bottom: 1px solid oklch(var(--dns-rule));
  }
.dns-table .dns-row:nth-child(even) {
    background: oklch(var(--dns-row-stripe));
  }
.dns-table .dns-row:last-child {
    border-bottom: none;
  }
.dns-table .dns-row:hover {
    background: oklch(var(--dns-row-hover));
  }
/* Record-type pill — A / CNAME / TXT selector. Brand-tinted soft chip
     that solidifies on selection, mirroring the ret-unit toggle. */
.dns-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1;
    background: oklch(var(--dns-type-pill));
    color: oklch(var(--dns-type-pill-foreground));
    border: 1px solid oklch(var(--dns-type-pill) / 0.6);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.dns-type-pill[data-active="true"] {
    background: oklch(var(--dns-type-pill-active));
    color: oklch(var(--dns-type-pill-active-foreground));
    border-color: oklch(var(--dns-type-pill-active));
    box-shadow: 0 0 0 3px oklch(var(--dns-type-pill-ring) / 0.18);
  }
.dns-type-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--dns-type-pill-ring) / 0.3);
  }
/* DNS record input fields — name + value free-text with format hints */
.dns-field {
    background: oklch(var(--dns-field));
    color: oklch(var(--dns-field-foreground));
    border: 1px solid oklch(var(--dns-field-border));
    border-radius: calc(var(--radius) - 2px);
  }
.dns-field:focus {
    border-color: oklch(var(--dns-field-focus));
    box-shadow: 0 0 0 3px oklch(var(--dns-field-focus) / 0.18);
    outline: none;
  }
.dns-helper {
    color: oklch(var(--dns-helper));
    font-size: 0.72rem;
  }
/* Domain redirect toggle — single "Redirect to custom domain" switch.
     Mirrors the ret-unit toggle on/off treatment via a custom track/thumb. */
.dns-toggle-track {
    background: oklch(var(--dns-toggle-track));
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dns-toggle-track[data-on="true"] {
    background: oklch(var(--dns-toggle-track-on));
  }
.dns-toggle-thumb {
    background: oklch(var(--dns-toggle-thumb));
    color: oklch(var(--dns-toggle-thumb-foreground));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dns-toggle-track[data-on="true"] .dns-toggle-thumb {
    transform: translateX(1.25rem);
  }
.dns-toggle-track:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--dns-toggle-ring) / 0.3);
  }
/* Verification status tones — per-record resolved/failed + overall
     active/pending. Resolved reuses the e-sig green family (hue 152);
     failed reuses the destructive red (hue 22); pending reuses brand indigo. */
.dns-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    line-height: 1;
  }
.dns-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
  }
.dns-status-badge[data-tone="resolved"] {
    background: oklch(var(--dns-resolved-soft));
    color: oklch(var(--dns-resolved-soft-foreground));
    border: 1px solid oklch(var(--dns-resolved) / 0.35);
  }
.dns-status-badge[data-tone="resolved"]::before {
    background: oklch(var(--dns-resolved-dot));
  }
.dns-status-badge[data-tone="failed"] {
    background: oklch(var(--dns-failed-soft));
    color: oklch(var(--dns-failed-soft-foreground));
    border: 1px solid oklch(var(--dns-failed) / 0.35);
  }
.dns-status-badge[data-tone="failed"]::before {
    background: oklch(var(--dns-failed-dot));
  }
.dns-status-badge[data-tone="pending"] {
    background: oklch(var(--dns-pending-soft));
    color: oklch(var(--dns-pending-soft-foreground));
    border: 1px solid oklch(var(--dns-pending) / 0.35);
  }
.dns-status-badge[data-tone="pending"]::before {
    background: oklch(var(--dns-pending-dot));
  }
/* Domain active badge — overall "domain active" indicator once all
     records verify. Solid green, distinct from per-record resolved. */
.dns-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    line-height: 1;
    background: oklch(var(--dns-active));
    color: oklch(var(--dns-active-foreground));
    border: 1px solid oklch(var(--dns-active) / 0.5);
  }
.dns-active-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: oklch(var(--dns-active-dot));
  }
.dns-active-badge[data-active="false"] {
    background: oklch(var(--dns-pending-soft));
    color: oklch(var(--dns-pending-soft-foreground));
    border-color: oklch(var(--dns-pending) / 0.35);
  }
.dns-active-badge[data-active="false"]::before {
    background: oklch(var(--dns-pending-dot));
  }
/* Verify DNS CTA — brand CTA, mirrors .sig-cta-btn / .co-cta-btn */
.dns-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: var(--gradient-dns-cta);
    color: oklch(var(--dns-cta-foreground));
    border: 1px solid oklch(var(--dns-cta) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-dns-cta);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.dns-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dns-cta-hover);
    filter: brightness(1.06);
  }
.dns-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--dns-cta) / 0.35);
  }
.dns-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
/* Verification audit log — immutable on-canister record following the
     SignedContract allocate-write-return pattern. Mirrors .sig-audit-block /
     .co-audit-timeline forensic treatment but on a compact inline timeline. */
.dns-audit-timeline {
    background: oklch(var(--dns-audit));
    color: oklch(var(--dns-audit-foreground));
    border: 1px solid oklch(var(--dns-audit-border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.dns-audit-timeline .dns-audit-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.75rem;
    width: 2px;
    background: oklch(var(--dns-audit-rail));
    border-radius: 999px;
  }
.dns-audit-timeline .dns-audit-entry {
    border-bottom: 1px solid oklch(var(--dns-audit-rule));
    position: relative;
  }
.dns-audit-timeline .dns-audit-entry:last-child {
    border-bottom: none;
  }
.dns-audit-timeline .dns-audit-node {
    position: absolute;
    left: 0.25rem;
    top: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 2px solid oklch(var(--dns-audit));
    font-size: 0;
    z-index: 1;
  }
.dns-audit-timeline .dns-audit-node[data-active="true"] {
    background: oklch(var(--dns-audit-node-resolved));
  }
.dns-audit-timeline .dns-audit-node[data-active="false"] {
    background: oklch(var(--dns-audit-node-failed));
  }
.dns-audit-timeline .dns-audit-label {
    color: oklch(var(--dns-audit-label));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.dns-audit-timeline .dns-audit-value {
    color: oklch(var(--dns-audit-value));
    font-family: var(--font-body);
  }
.dns-audit-timeline .dns-audit-meta {
    color: oklch(var(--dns-audit-meta));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
.dns-audit-timeline .dns-audit-lock {
    color: oklch(var(--dns-audit-lock));
  }
/* DNS verification reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dns-status-badge[data-tone="resolved"]::before,
    .dns-active-badge[data-active="true"]::before {
      animation: none;
    }
  }
/* ── Dispute Evidence Package — disputed badge + cover page + stamp ── */
/* Disputed invoice badge — soft magenta-rose pill (hue 350) with a pulsing
     dot. Sits ALONGSIDE the existing --inv-* status badge, never replacing
     it. Mirrors .sig-signed-badge / .dns-status-badge treatment. */
.dispute-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1;
  }
.dispute-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    animation: dispute-stamp-pulse 2.4s ease-in-out infinite;
  }
.dispute-badge[data-tone="disputed"] {
    background: oklch(var(--dispute-soft));
    color: oklch(var(--dispute-soft-foreground));
    border: 1px solid oklch(var(--dispute) / 0.35);
  }
.dispute-badge[data-tone="disputed"]::before {
    background: oklch(var(--dispute-dot));
  }
/* Evidence package cover page — printable branded paper surface. Mirrors
     .sig-panel / .co-paper / .invoice-paper treatment. Warm-tinted (hue 75)
     so it reads as a distinct legal artifact beside invoices and change
     orders. Renders freelancer business name, client name, invoice
     reference, and a key-dates-and-facts summary block. */
.dispute-paper {
    background: oklch(var(--dispute-paper));
    color: oklch(var(--dispute-paper-foreground));
    border: 1px solid oklch(var(--dispute-rule));
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-dispute-paper);
  }
.dispute-header-band {
    background: oklch(var(--dispute-header));
    color: oklch(var(--dispute-header-foreground));
    border-bottom: 1px solid oklch(var(--dispute-rule));
  }
.dispute-fact-table {
    border: 1px solid oklch(var(--dispute-rule));
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
  }
.dispute-fact-row {
    background: oklch(var(--dispute-fact-row));
    border-bottom: 1px solid oklch(var(--dispute-rule));
  }
.dispute-fact-row:nth-child(even) {
    background: oklch(var(--dispute-fact-row-stripe));
  }
.dispute-fact-row:last-child {
    border-bottom: none;
  }
.dispute-fact-label {
    color: oklch(var(--dispute-fact-label));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.dispute-fact-value {
    color: oklch(var(--dispute-fact-value));
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
/* Blockchain verification stamp — circular double-ring seal (~120px) with
     arched "TAMPERPROOF" text. Brand glow via --shadow-dispute-stamp. Lists
     the on-canister audit record id + generation timestamp. */
.dispute-stamp {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: oklch(var(--dispute-stamp));
    color: oklch(var(--dispute-stamp-foreground));
    border: 2px solid oklch(var(--dispute-stamp-ring));
    box-shadow: var(--shadow-dispute-stamp);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    animation: dispute-stamp-pulse 3.6s ease-in-out infinite;
  }
.dispute-stamp::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    border: 1px solid oklch(var(--dispute-stamp-ring) / 0.55);
    pointer-events: none;
  }
.dispute-stamp .dispute-stamp-arch {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: oklch(var(--dispute-stamp-foreground) / 0.92);
  }
.dispute-stamp .dispute-stamp-meta {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: oklch(var(--dispute-stamp-meta));
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
  }
.dispute-stamp .dispute-stamp-lock {
    color: oklch(var(--dispute-stamp-lock));
    margin-top: 0.15rem;
  }
/* Verification audit block — immutable on-canister record following the
     SignedContract allocate-write-return pattern. Mirrors .sig-audit-block
     forensic treatment with key-value rows and a lock icon. */
.dispute-audit-block {
    background: oklch(var(--dispute-audit));
    color: oklch(var(--dispute-audit-foreground));
    border: 1px solid oklch(var(--dispute-audit-border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.dispute-audit-block .dispute-audit-row {
    border-bottom: 1px solid oklch(var(--dispute-audit-rule));
  }
.dispute-audit-block .dispute-audit-row:last-child {
    border-bottom: none;
  }
.dispute-audit-block .dispute-audit-label {
    color: oklch(var(--dispute-audit-label));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.dispute-audit-block .dispute-audit-value {
    color: oklch(var(--dispute-audit-value));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
.dispute-audit-block .dispute-audit-meta {
    color: oklch(var(--dispute-audit-meta));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
.dispute-audit-block .dispute-audit-lock {
    color: oklch(var(--dispute-audit-lock));
  }
/* Generate Evidence Package CTA — mirrors .sig-cta-btn / .co-cta-btn /
     .dns-cta-btn brand CTA pattern. */
.dispute-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: var(--gradient-dispute-cta);
    color: oklch(var(--dispute-cta-foreground));
    border: 1px solid oklch(var(--dispute-cta) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-dispute-cta);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.dispute-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dispute-cta-hover);
    filter: brightness(1.06);
  }
.dispute-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--dispute-cta) / 0.35);
  }
.dispute-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
/* Evidence package download PDF action — mirrors .sig-download-btn /
     .co-download-btn / .dns-download-btn. */
.dispute-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(var(--dispute-download));
    color: oklch(var(--dispute-download-foreground));
    border: 1px solid oklch(var(--dispute-download-border));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
  }
.dispute-download-btn:hover:not(:disabled) {
    background: oklch(var(--dispute-download-hover));
    border-color: oklch(var(--dispute-cta) / 0.4);
    transform: translateY(-1px);
  }
.dispute-download-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--dispute-cta) / 0.22);
  }
.dispute-download-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
@keyframes dispute-stamp-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.82;
      transform: scale(0.985);
    }
  }
/* Dispute evidence reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dispute-badge::before,
    .dispute-stamp {
      animation: none;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/SpaceGrotesk.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/DMSans.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono.woff2") format("woff2");
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}

.file\:inline-flex::file-selector-button {
  display: inline-flex;
}

.file\:h-7::file-selector-button {
  height: 1.75rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

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

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --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));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

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

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --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));
}

.hover\:border-\[oklch\(var\(--profile-card-hover-border\)\)\]:hover {
  border-color: oklch(var(--profile-card-hover-border));
}

.hover\:border-\[oklch\(var\(--ring\)\/0\.45\)\]:hover {
  border-color: oklch(var(--ring)/0.45);
}

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

.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}

.hover\:bg-\[oklch\(var\(--sig-panel-rule\)\)\]:hover {
  background-color: oklch(var(--sig-panel-rule));
}

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

.hover\:bg-accent\/10:hover {
  background-color: oklch(var(--accent) / 0.1);
}

.hover\:bg-destructive\/10:hover {
  background-color: oklch(var(--destructive) / 0.1);
}

.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/40:hover {
  background-color: oklch(var(--muted) / 0.4);
}

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

.hover\:bg-muted\/60:hover {
  background-color: oklch(var(--muted) / 0.6);
}

.hover\:bg-primary\/10:hover {
  background-color: oklch(var(--primary) / 0.1);
}

.hover\:bg-primary\/5:hover {
  background-color: oklch(var(--primary) / 0.05);
}

.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

.hover\:bg-profile-cta-hover:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--profile-cta-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-profile-service-row-hover:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--profile-service-row-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-500\/10:hover {
  background-color: rgb(244 63 94 / 0.1);
}

.hover\:bg-rose-500\/5:hover {
  background-color: rgb(244 63 94 / 0.05);
}

.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}

.hover\:bg-success\/90:hover {
  background-color: oklch(var(--success) / 0.9);
}

.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}

.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}

.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-muted-foreground\/90:hover {
  color: oklch(var(--muted-foreground) / 0.9);
}

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

.hover\:text-primary\/80:hover {
  color: oklch(var(--primary) / 0.8);
}

.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 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);
}

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

.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-\[var\(--shadow-profile-card-hover\)\]:hover {
  --tw-shadow-color: var(--shadow-profile-card-hover);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-profile-cta-hover:hover {
  --tw-shadow-color: oklch(var(--profile-cta-hover) / 1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:ring-4:hover {
  --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);
}

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

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

.focus\:border-\[oklch\(var\(--ob-field-border-focus\)\)\]:focus {
  border-color: oklch(var(--ob-field-border-focus));
}

.focus\:border-\[oklch\(var\(--profile-filter-field-focus\)\)\]:focus {
  border-color: oklch(var(--profile-filter-field-focus));
}

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

.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[oklch\(var\(--profile-filter-field-focus\)\/0\.35\)\]:focus {
  --tw-ring-color: oklch(var(--profile-filter-field-focus)/0.35);
}

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

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

.focus-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

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

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

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1: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(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-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-4: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(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-visible\:ring-\[3px\]: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(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);
}

.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-rose-500\/40:focus-visible {
  --tw-ring-color: rgb(244 63 94 / 0.4);
}

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

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

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}

.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

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

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

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

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:text-foreground {
  color: oklch(var(--foreground));
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

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

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  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));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --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));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --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);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(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);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --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);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\: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));
}

.group[data-side="right"] .group-data-\[side\=right\]\: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[data-state="open"] .group-data-\[state\=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[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

.dark\:border-amber-600\/40:is(.dark *) {
  border-color: rgb(217 119 6 / 0.4);
}

.dark\:border-emerald-600\/40:is(.dark *) {
  border-color: rgb(5 150 105 / 0.4);
}

.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:border-rose-600\/40:is(.dark *) {
  border-color: rgb(225 29 72 / 0.4);
}

.dark\:border-sky-600\/40:is(.dark *) {
  border-color: rgb(2 132 199 / 0.4);
}

.dark\:border-slate-600\/40:is(.dark *) {
  border-color: rgb(71 85 105 / 0.4);
}

.dark\:border-violet-600\/40:is(.dark *) {
  border-color: rgb(124 58 237 / 0.4);
}

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

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

.dark\:text-amber-400\/80:is(.dark *) {
  color: rgb(251 191 36 / 0.8);
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400\/80:is(.dark *) {
  color: rgb(52 211 153 / 0.8);
}

.dark\:text-emerald-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-sky-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:size-24 {
    width: 6rem;
    height: 6rem;
  }

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

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

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

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

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

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

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

  .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-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

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

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

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

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

  .sm\:items-baseline {
    align-items: baseline;
  }

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

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

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

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

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

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

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

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

  .sm\:gap-7 {
    gap: 1.75rem;
  }

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

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

  .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-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

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

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

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

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

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

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

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

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

  .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-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-\[0\.7rem\] {
    font-size: 0.7rem;
  }

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

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

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

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

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

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

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

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

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

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

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

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\: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);
  }
}

@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

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

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

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg {
  --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));
}

.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --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));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --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));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}