/* Adieu Fonts */
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-Light-426cee19f18bf94733ee3caebf4426932b2e2b6b40cdea18e5fa5ccf9ed4c776.woff2) format('woff2');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-LightSlanted-04c35d3f0a0785094c8dd515b59ed8ed775a33e46aaf30fd54698dcc7302df47.woff2) format('woff2');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-Regular-28a9574a49607097446c7d31b0148e78ab51a07ed9902206cf8ec0c5ed6baa47.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-RegularSlanted-6883510b4460b67e6e8a87da7c39c83af54a18572a26b9f0137dd82475b65c21.woff) format('woff');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-Bold-bbc0a93cc82bb397f3691c84d7237799fbdee638ff0360c033da07f6980d3838.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Adieu';
  src: url(/assets/Adieu-BoldSlanted-80d4761355f48f709d48193a228c1e56002c69acb60485c0022f60c06a90810c.woff2) format('woff2');
  font-weight: 700;
  font-style: italic;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans;
  }
}

/* Hide scrollbar for carousel */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Logo marquee */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  animation: marquee-scroll 15s linear infinite;
}

.payers-logo-marquee-track {
  width: max-content;
}

.hero-logo-cloud-mobile-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
}

@media (min-width: 640px) {
  .marquee-track {
    animation-duration: 30s;
  }
}

.marquee-track:hover {
  animation-play-state: paused;
}

.hero-logo-cloud-mobile-track:hover {
  animation-play-state: paused;
}

.testimonial-slide {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition:
    opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.testimonial-slide.is-exiting {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
}

.testimonial-slide__image {
  transform: scale(1.02) translateX(10px);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-slide.is-active .testimonial-slide__image {
  transform: scale(1.02) translateX(0);
}

.testimonial-slide.is-exiting .testimonial-slide__image {
  transform: scale(1.02) translateX(-10px);
}

/* Scroll reveal animations */
.scroll-reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-item.scroll-revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes funding-index-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.who-we-serve-card-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.who-we-serve-card-reveal.scroll-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Funding-deal status warmth scale.
   Single palette consumed by .funding-show-status-panel--*, .funding-status-badge-*,
   and progress accents in funding_deals_helper.rb / funding_deal_show_helper.rb.
   The deal warms up as it moves toward funding, peaks at offer_pending (full
   brand lime), settles into deep success greens. Negatives sit on a parallel
   clay scale. */
:root {
  /* Stop 1 — stone: draft, cancelled (inactive, not negative) */
  --state-stone-bg: #f6f5f3;
  --state-stone-icon-bg: #52525b;
  --state-stone-icon-fg: #ffffff;
  --state-stone-text: rgba(36, 34, 33, 0.78);
  --state-stone-border: rgba(36, 34, 33, 0.10);

  /* Stop 2 — cream: submitted (warming up) */
  --state-cream-bg: #f6f4ea;
  --state-cream-icon-bg: #8a7331;
  --state-cream-icon-fg: #ffffff;
  --state-cream-text: #6a5822;
  --state-cream-border: rgba(106, 88, 34, 0.18);

  /* Stop 3 — pale-lime: creating_offer (entered the brand family) */
  --state-pale-lime-bg: #f7ffda;
  --state-pale-lime-icon-bg: #7a8f3e;
  --state-pale-lime-icon-fg: #ffffff;
  --state-pale-lime-text: #55682a;
  --state-pale-lime-border: rgba(85, 104, 42, 0.18);

  /* Stop 4 — lime peak: offer_pending (your decision moment, full brand lime) */
  --state-lime-bg: #E4FF82;
  --state-lime-icon-bg: #242221;
  --state-lime-icon-fg: #E4FF82;
  --state-lime-text: #242221;
  --state-lime-border: rgba(36, 34, 33, 0.18);

  /* Stop 5 — olive: validating_invoice (system working, calmer) */
  --state-olive-bg: #e6f0c8;
  --state-olive-icon-bg: #7a8f3e;
  --state-olive-icon-fg: #ffffff;
  --state-olive-text: #55682a;
  --state-olive-border: rgba(85, 104, 42, 0.18);

  /* Stop 5b — olive-deep: preparing_funds (final compliance) */
  --state-olive-deep-bg: #dce9b2;
  --state-olive-deep-icon-bg: #5a6b2a;
  --state-olive-deep-icon-fg: #ffffff;
  --state-olive-deep-text: #4a5a22;
  --state-olive-deep-border: rgba(74, 90, 34, 0.20);

  /* Stop 6 — forest: funded (success surge, gradient hero) */
  --state-forest-bg: linear-gradient(90deg, #7f9641 0%, #93ad48 100%);
  --state-forest-solid: #7f9641;
  --state-forest-soft: #93ad48;
  --state-forest-icon-bg: #ffffff;
  --state-forest-icon-fg: #7f9641;
  --state-forest-title: #ffffff;
  --state-forest-copy: rgba(255, 255, 255, 0.78);
  --state-forest-text: #55682a;
  --state-forest-badge-bg: #d7e8a9;
  --state-forest-border: rgba(85, 104, 42, 0.18);

  /* Stop 6b — collected: paid, paid_settled (success, restful) */
  --state-collected-bg: linear-gradient(90deg, #f6f4ea 0%, #eef3dd 100%);
  --state-collected-icon-bg: #242221;
  --state-collected-icon-fg: #E4FF82;
  --state-collected-text: #6f8440;
  --state-collected-badge-bg: #dce9b2;
  --state-collected-border: rgba(127, 150, 65, 0.18);

  /* Negative n1 — clay-light: offer_declined, offer_cancelled (soft failure) */
  --state-clay-light-bg: #fff5f2;
  --state-clay-light-icon-bg: #a8543f;
  --state-clay-light-icon-fg: #ffffff;
  --state-clay-light-text: #8d3b2c;
  --state-clay-light-border: rgba(143, 60, 45, 0.14);

  /* Negative n2 — clay: rejected (hardest negative outcome) */
  --state-clay-bg: #fff0ee;
  --state-clay-icon-bg: #8d3b2c;
  --state-clay-icon-fg: #ffffff;
  --state-clay-text: #8d3b2c;
  --state-clay-border: rgba(143, 60, 45, 0.18);

  /* Progress / stepper accents derived from the scale */
  --state-progress-fill-pending: #d6e2a8;
  --state-progress-fill-success: #aac55a;
  --state-progress-fill-completed: #8ea552;
  --state-progress-fill-rejected: #c46b5a;
}

@layer components {
  .app-shell,
  .admin-content {
    --app-accent-text: #242221;
    --app-accent-text-muted: rgb(36 34 33 / 0.82);
    --app-accent-text-soft: rgb(36 34 33 / 0.64);
    --app-accent-text-hover: #121111;
  }

  :is(.app-shell, .admin-content) h1 {
    @apply font-heading;
  }

  .btn-primary,
  .btn-black,
  .btn-secondary,
  .btn-success,
  .btn-error,
  .btn-warning {
    @apply relative inline-flex justify-center px-10 py-3.5 font-sans text-sm font-semibold uppercase tracking-[0.08em] whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer;
    background: transparent;
    z-index: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .btn-primary::before,
  .btn-black::before,
  .btn-secondary::before,
  .btn-success::before,
  .btn-error::before,
  .btn-warning::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px 8px 4px 8px;
    transform: skewX(-20deg);
    z-index: -1;
    transition: opacity 0.2s ease;
    will-change: transform;
    backface-visibility: hidden;
  }

  .btn-primary:hover::before,
  .btn-black:hover::before,
  .btn-secondary:hover::before,
  .btn-success:hover::before,
  .btn-error:hover::before,
  .btn-warning:hover::before {
    opacity: 0.9;
  }

  .btn-black {
    @apply text-secondary;
  }

  .btn-primary {
    @apply text-white;
  }

  .btn-primary::before,
  .btn-black::before {
    background: #242221;
    border: 2px solid transparent;
  }

  .btn-success,
  .btn-secondary {
    @apply text-primary;
  }

  .btn-success::before,
  .btn-secondary::before {
    background: #E4FF82;
    border: 2px solid #242221;
  }

  .btn-no-border::before {
    border: none;
  }

  .btn-error::before {
    background: #EF4444;
  }

  .btn-error:hover::before {
    background: #F87171;
  }

  .btn-warning::before {
    background: #F59E0B;
  }

  .btn-warning:hover::before {
    background: #FCD34D;
  }

  .marketing-shell .btn-primary,
  .marketing-shell .btn-black,
  .marketing-shell .btn-secondary,
  .marketing-shell .btn-success,
  .marketing-shell .btn-error,
  .marketing-shell .btn-warning,
  .marketing-shell input[type="submit"].btn-primary,
  .marketing-shell input[type="submit"].btn-black,
  .marketing-shell input[type="submit"].btn-secondary,
  .marketing-shell input[type="submit"].btn-success,
  .marketing-shell input[type="submit"].btn-error,
  .marketing-shell input[type="submit"].btn-warning {
    @apply font-heading italic font-normal tracking-wider;
  }

  .auth-entry-surface .btn-primary,
  .auth-entry-surface .btn-black,
  .auth-entry-surface .btn-secondary,
  .auth-entry-surface .btn-success,
  .auth-entry-surface .btn-error,
  .auth-entry-surface .btn-warning,
  .auth-entry-surface input[type="submit"].btn-primary,
  .auth-entry-surface input[type="submit"].btn-black,
  .auth-entry-surface input[type="submit"].btn-secondary,
  .auth-entry-surface input[type="submit"].btn-success,
  .auth-entry-surface input[type="submit"].btn-error,
  .auth-entry-surface input[type="submit"].btn-warning {
    @apply font-sans not-italic font-semibold tracking-[0.08em];
  }

  .auth-entry-card,
  .auth-entry-card .font-sans,
  .auth-entry-card p,
  .auth-entry-card a,
  .auth-entry-card h1,
  .auth-entry-card h2,
  .auth-entry-card h3,
  .auth-entry-card li,
  .auth-entry-card input,
  .auth-entry-card textarea,
  .auth-entry-card select,
  .auth-entry-card button {
    @apply font-heading;
  }

  .auth-entry-card input::placeholder,
  .auth-entry-card textarea::placeholder {
    font-family: 'Adieu', sans-serif;
  }

  .auth-entry-card .btn-primary,
  .auth-entry-card .btn-black,
  .auth-entry-card .btn-secondary,
  .auth-entry-card .btn-success,
  .auth-entry-card .btn-error,
  .auth-entry-card .btn-warning,
  .auth-entry-card input[type="submit"].btn-primary,
  .auth-entry-card input[type="submit"].btn-black,
  .auth-entry-card input[type="submit"].btn-secondary,
  .auth-entry-card input[type="submit"].btn-success,
  .auth-entry-card input[type="submit"].btn-error,
  .auth-entry-card input[type="submit"].btn-warning {
    @apply font-heading italic font-normal tracking-wider;
  }

  .marketing-shell .btn-black.btn-animated-text,
  .marketing-shell .btn-secondary.btn-animated-text,
  .marketing-shell button[type="submit"].btn-black.btn-animated-text,
  .marketing-shell button[type="submit"].btn-secondary.btn-animated-text {
    transition: color 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .marketing-shell .btn-black.btn-animated-text::before,
  .marketing-shell .btn-secondary.btn-animated-text::before,
  .marketing-shell button[type="submit"].btn-black.btn-animated-text::before,
  .marketing-shell button[type="submit"].btn-secondary.btn-animated-text::before {
    transition:
      opacity 0.24s ease,
      transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.24s ease,
      border-color 0.24s ease;
  }

  .marketing-shell .btn-animated-text .btn-label-track {
    position: relative;
    display: grid;
    min-width: 100%;
    overflow: hidden;
    line-height: 1;
    text-align: center;
  }

  .marketing-shell .btn-animated-text .btn-label-current,
  .marketing-shell .btn-animated-text .btn-label-track::after {
    grid-area: 1 / 1;
    display: block;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .marketing-shell .btn-animated-text .btn-label-track::after {
    content: attr(data-text);
    transform: translateX(-115%);
    pointer-events: none;
  }

  @media (hover: hover) {
    .marketing-shell .btn-black.btn-animated-text:hover,
    .marketing-shell .btn-black.btn-animated-text:focus-visible,
    .marketing-shell .btn-secondary.btn-animated-text:hover,
    .marketing-shell .btn-secondary.btn-animated-text:focus-visible,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:hover,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:focus-visible,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:hover,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:focus-visible {
      transform: translateY(-1px);
    }

    .marketing-shell .btn-animated-text:hover .btn-label-current,
    .marketing-shell .btn-animated-text:focus-visible .btn-label-current {
      transform: translateX(115%);
    }

    .marketing-shell .btn-animated-text:hover .btn-label-track::after,
    .marketing-shell .btn-animated-text:focus-visible .btn-label-track::after {
      transform: translateX(0);
    }

    .marketing-shell .btn-black.btn-animated-text:hover,
    .marketing-shell .btn-black.btn-animated-text:focus-visible,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:hover,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:focus-visible {
      color: #242221;
    }

    .marketing-shell .btn-black.btn-animated-text:hover::before,
    .marketing-shell .btn-black.btn-animated-text:focus-visible::before,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:hover::before,
    .marketing-shell button[type="submit"].btn-black.btn-animated-text:focus-visible::before {
      opacity: 1;
      background: #E4FF82;
      border-color: #242221;
      transform: skewX(-20deg) scale(1.02);
    }

    .marketing-shell .btn-secondary.btn-animated-text:hover,
    .marketing-shell .btn-secondary.btn-animated-text:focus-visible,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:hover,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:focus-visible {
      color: #E4FF82;
    }

    .marketing-shell .btn-secondary.btn-animated-text:hover::before,
    .marketing-shell .btn-secondary.btn-animated-text:focus-visible::before,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:hover::before,
    .marketing-shell button[type="submit"].btn-secondary.btn-animated-text:focus-visible::before {
      opacity: 1;
      background: #242221;
      border-color: #242221;
      transform: skewX(-20deg) scale(1.02);
    }
  }

  input[type="submit"].btn-primary,
  input[type="submit"].btn-black,
  input[type="submit"].btn-secondary,
  input[type="submit"].btn-success,
  input[type="submit"].btn-error,
  input[type="submit"].btn-warning {
    appearance: none;
    border-radius: 4px 8px 4px 8px;
  }

  input[type="submit"].btn-primary,
  input[type="submit"].btn-black {
    background: #242221;
  }

  input[type="submit"].btn-primary {
    color: #ffffff;
    border: 0;
  }

  input[type="submit"].btn-black {
    color: #E4FF82;
    border: 0;
  }

  input[type="submit"].btn-success,
  input[type="submit"].btn-secondary {
    background: #E4FF82;
    border: 2px solid #242221;
    color: #242221;
  }

  input[type="submit"].btn-error {
    background: #EF4444;
    border: 0;
    color: #ffffff;
  }

  input[type="submit"].btn-warning {
    background: #F59E0B;
    border: 0;
    color: #242221;
  }

  .brand-surface {
    @apply rounded-2xl border border-primary/10 bg-[#f7ffda];
  }

  .brand-notice {
    @apply rounded-xl border border-primary/10 text-primary;
    background: radial-gradient(circle at center, #fffff0 0%, #f5ffc8 100%);
  }

  .app-page-hero {
    @apply rounded-[28px] border border-primary/10 bg-[#f7ffda] shadow-[0_24px_60px_rgba(36,34,33,0.07)];
  }

  .app-page-card {
    @apply rounded-[28px] border border-primary/10 bg-white shadow-[0_18px_44px_rgba(36,34,33,0.07)];
  }

  .funding-index-card {
    animation: funding-index-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .funding-index-amount {
    font-family: 'Adieu', sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.015em;
    font-feature-settings: normal;
    font-variant-numeric: normal;
  }

  .funding-show-display {
    font-family: 'Adieu', sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-feature-settings: normal;
    font-variant-numeric: normal;
  }

  .funding-show-kicker {
    @apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-primary/50;
  }

  .funding-show-status-panel,
  .funding-show-side-panel {
    @apply overflow-hidden rounded-[24px] border border-primary/10 bg-white shadow-[0_18px_44px_rgba(36,34,33,0.07)];
  }

  .funding-show-status-panel {
    --funding-show-hero-bg: #F2FFC3;
    --funding-show-icon-bg: #242221;
    --funding-show-icon-color: #E4FF82;
    --funding-show-title-color: #242221;
    --funding-show-copy-color: rgb(36 34 33 / 0.64);
    /* Inner accent cards default to the hero bg so panels read as duo-tone:
       white body + the state colour. Gradient states (funded, paid/settled)
       override this with a solid badge variant since gradients don't
       compose well on small inner surfaces. */
    --funding-show-accent-bg: var(--funding-show-hero-bg);
  }

  .funding-show-status-panel__hero {
    @apply px-4 py-5 sm:px-6;
    background: var(--funding-show-hero-bg);
  }

  .funding-show-status-icon {
    @apply flex size-11 shrink-0 items-center justify-center rounded-full sm:size-12;
    background: var(--funding-show-icon-bg);
    color: var(--funding-show-icon-color);
  }

  .funding-show-status-title {
    color: var(--funding-show-title-color);
  }

  .funding-show-status-copy {
    color: var(--funding-show-copy-color);
  }

  .funding-show-status-panel--draft,
  .funding-show-status-panel--cancelled {
    --funding-show-hero-bg: var(--state-stone-bg);
    --funding-show-icon-bg: var(--state-stone-icon-bg);
    --funding-show-icon-color: var(--state-stone-icon-fg);
  }

  .funding-show-status-panel--submitted {
    --funding-show-hero-bg: var(--state-cream-bg);
    --funding-show-icon-bg: var(--state-cream-icon-bg);
    --funding-show-icon-color: var(--state-cream-icon-fg);
  }

  .funding-show-status-panel--creating-offer {
    --funding-show-hero-bg: var(--state-pale-lime-bg);
    --funding-show-icon-bg: var(--state-pale-lime-icon-bg);
    --funding-show-icon-color: var(--state-pale-lime-icon-fg);
  }

  .funding-show-status-panel--offer-pending {
    --funding-show-hero-bg: var(--state-lime-bg);
    --funding-show-icon-bg: var(--state-lime-icon-bg);
    --funding-show-icon-color: var(--state-lime-icon-fg);
  }

  .funding-show-status-panel--validating-invoice {
    --funding-show-hero-bg: var(--state-olive-bg);
    --funding-show-icon-bg: var(--state-olive-icon-bg);
    --funding-show-icon-color: var(--state-olive-icon-fg);
  }

  .funding-show-status-panel--preparing-funds {
    --funding-show-hero-bg: var(--state-olive-deep-bg);
    --funding-show-icon-bg: var(--state-olive-deep-icon-bg);
    --funding-show-icon-color: var(--state-olive-deep-icon-fg);
  }

  .funding-show-status-panel--funded {
    --funding-show-hero-bg: var(--state-forest-bg);
    --funding-show-icon-bg: var(--state-forest-icon-bg);
    --funding-show-icon-color: var(--state-forest-icon-fg);
    --funding-show-title-color: var(--state-forest-title);
    --funding-show-copy-color: var(--state-forest-copy);
    --funding-show-accent-bg: var(--state-forest-badge-bg);
  }

  .funding-show-status-panel--paid,
  .funding-show-status-panel--settled {
    --funding-show-hero-bg: var(--state-collected-bg);
    --funding-show-icon-bg: var(--state-collected-icon-bg);
    --funding-show-icon-color: var(--state-collected-icon-fg);
    --funding-show-accent-bg: var(--state-collected-badge-bg);
  }

  .funding-show-status-panel--offer-declined,
  .funding-show-status-panel--offer-cancelled {
    --funding-show-hero-bg: var(--state-clay-light-bg);
    --funding-show-icon-bg: var(--state-clay-light-icon-bg);
    --funding-show-icon-color: var(--state-clay-light-icon-fg);
  }

  .funding-show-status-panel--rejected {
    --funding-show-hero-bg: var(--state-clay-bg);
    --funding-show-icon-bg: var(--state-clay-icon-bg);
    --funding-show-icon-color: var(--state-clay-icon-fg);
  }

  .funding-show-panel-body {
    @apply space-y-5 px-4 py-5 sm:px-6 sm:py-6;
  }

  .funding-show-feature-card {
    @apply mx-4 my-5 space-y-5 rounded-[18px] px-4 py-5 sm:mx-6 sm:px-6;
    background: radial-gradient(120% 140% at 50% 0%, #f6f4ea, #eef3dd 70%);
  }

  .funding-show-skew-button {
    @apply relative inline-flex h-11 items-center justify-center px-6 font-sans text-[12px] font-bold uppercase tracking-[0.08em] text-primary transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
    background: transparent;
    z-index: 0;
  }

  .funding-show-skew-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px 8px 4px 8px;
    transform: skewX(-20deg);
    z-index: -1;
    transition: opacity 0.2s ease;
  }

  .funding-show-skew-button:hover::before {
    opacity: 0.88;
  }

  .funding-show-skew-button--secondary::before {
    background: #fff;
    border: 1.5px solid #242221;
  }

  .funding-show-calc-cell dt {
    @apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-primary/45;
  }

  .funding-show-calc-cell dd {
    @apply mt-1 text-sm font-semibold text-primary tabular-nums;
  }

  .funding-show-side-panel__header {
    @apply flex items-center gap-2 bg-secondary px-4 py-3 text-sm font-bold text-primary;
  }

  .funding-show-side-panel__body {
    @apply space-y-3 px-4 py-4;
  }

  .funding-show-side-panel__footer {
    @apply border-t border-primary/10;
  }

  .funding-show-key-row {
    @apply flex items-center justify-between gap-4 text-[12.5px];
  }

  .funding-show-key-row dt {
    @apply shrink-0 text-primary/45;
  }

  .funding-show-key-row dd {
    @apply min-w-0 text-right font-semibold text-primary tabular-nums;
  }

  .funding-show-ok-pill {
    @apply inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10.5px] font-bold;
    background: #d8ebc4;
    color: #3f5a1b;
  }

  .funding-show-side-link {
    @apply flex h-10 w-full items-center justify-center gap-1.5 border-b border-primary/10 px-4 text-[12.5px] font-bold text-primary transition-colors last:border-b-0 hover:bg-accent;
  }

  .funding-show-side-link.is-primary {
    @apply bg-secondary hover:bg-secondary/80;
  }

  .funding-show-section-title {
    @apply mb-3 text-base font-bold text-primary;
  }

  .funding-show-soft-card {
    @apply rounded-[18px] bg-primary/[0.025] px-4 py-4 sm:px-5;
  }

  /* Accent cards inside .funding-show-status-panel inherit the panel's state
     colour via --funding-show-accent-bg. Both classes are kept (rather than
     consolidated) because the offer-card carries a visible border for
     "decision" emphasis, while lime-card is a flat success callout. */
  .funding-show-lime-card {
    @apply rounded-[18px] px-4 py-4 sm:px-5;
    background-color: var(--funding-show-accent-bg);
  }

  .funding-show-offer-card {
    @apply rounded-[18px] border border-primary/10 px-4 py-4 sm:px-5;
    background-color: var(--funding-show-accent-bg);
  }

  .funding-show-note-card {
    @apply rounded-[18px] border border-primary/10 bg-white px-4 py-4 sm:px-5;
  }

  .funding-show-list {
    @apply space-y-4;
  }

  .funding-show-list-item {
    @apply flex items-start gap-3;
  }

  .funding-show-list-icon {
    @apply mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-white text-primary shadow-[inset_0_0_0_1px_rgba(36,34,33,0.08)];
  }

  .funding-show-list-title {
    @apply text-sm font-bold text-primary;
  }

  .funding-show-list-copy {
    @apply mt-1 text-[12.5px] leading-5 text-primary/60;
  }

  .funding-show-action-row {
    @apply flex flex-col gap-3 sm:flex-row sm:flex-wrap;
  }

  .funding-show-action-button {
    @apply relative inline-flex h-11 items-center justify-center px-6 font-sans text-[12px] font-bold uppercase tracking-[0.08em] text-primary transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
    background: transparent;
    z-index: 0;
  }

  .funding-show-action-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px 8px 4px 8px;
    transform: skewX(-20deg);
    z-index: -1;
    transition: opacity 0.2s ease;
  }

  .funding-show-action-button:hover::before {
    opacity: 0.88;
  }

  .funding-show-action-button--primary::before {
    background: #242221;
    border: 1.5px solid #242221;
  }

  .funding-show-action-button--primary {
    /* Inline hex (not @apply text-secondary) so the lime survives the
       "text-secondary on light bg → dark" override at the bottom of this file,
       which would otherwise turn the label into soft-black on a soft-black
       button. */
    color: #E4FF82;
  }

  .funding-show-action-button--secondary::before {
    background: #fff;
    border: 1.5px solid #242221;
  }

  .funding-show-action-button--lime::before {
    background: #E4FF82;
    border: 1.5px solid #242221;
  }

  .funding-filter-option--active {
    color: #E4FF82 !important;
  }

  .funding-filter-option--active .funding-filter-option__count {
    color: rgb(228 255 130 / 0.72) !important;
  }

  .funding-view-toggle--active {
    color: #E4FF82 !important;
  }

  .invoice-form-display {
    font-family: 'Adieu', sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-feature-settings: normal;
    font-variant-numeric: normal;
  }

  .invoice-form-mono,
  .invoice-form-number-input,
  .invoice-form-item-input--number,
  .invoice-form-item-total {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
  }

  .invoice-form-hero {
    @apply flex flex-col gap-4 rounded-[24px] border border-primary/10 bg-accent px-5 py-5 shadow-[0_18px_44px_rgba(36,34,33,0.07)] sm:flex-row sm:items-center sm:justify-between sm:px-6;
  }

  .invoice-form-hero-icon {
    @apply flex size-12 shrink-0 items-center justify-center rounded-[14px] bg-primary text-secondary;
  }

  .invoice-form-kicker {
    @apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-primary/55;
  }

  .invoice-form-ghost-button {
    @apply inline-flex h-9 items-center justify-center gap-1.5 rounded-[10px] bg-white px-3.5 text-[12.5px] font-semibold text-primary shadow-[inset_0_-1px_0_rgba(36,34,33,0.08),0_8px_18px_rgba(36,34,33,0.06)] transition-colors hover:bg-white/80;
  }

  .invoice-form-card {
    @apply overflow-hidden rounded-[24px] border border-primary/10 bg-white shadow-[0_18px_44px_rgba(36,34,33,0.07)];
  }

  .invoice-form-band {
    @apply flex flex-col gap-5 bg-primary px-5 py-5 text-white sm:flex-row sm:items-center sm:justify-between sm:px-7;
  }

  .invoice-form-logo-preview,
  .invoice-form-logo-placeholder {
    @apply flex size-16 items-center justify-center overflow-hidden rounded-[14px];
  }

  .invoice-form-logo-preview {
    @apply bg-white p-2;
  }

  .invoice-form-logo-placeholder {
    @apply border border-dashed border-white/20 bg-white/10;
  }

  .invoice-form-upload-pill {
    @apply absolute -bottom-2 left-1/2 -translate-x-1/2 cursor-pointer rounded-full bg-white/20 px-2.5 py-0.5 text-[10.5px] font-semibold text-white shadow-sm transition-colors hover:bg-white/30;
  }

  .invoice-form-wordmark {
    @apply text-[22px] uppercase leading-none text-white;
    letter-spacing: 0.04em;
  }

  .invoice-form-number-group {
    @apply flex flex-col items-start gap-1 sm:items-end;
  }

  .invoice-form-number-input-wrap {
    @apply flex h-9 items-center gap-1 rounded-lg bg-white/10 px-2.5 text-[12.5px] tracking-[0.04em];
    color: #E4FF82;
  }

  .invoice-form-number-input {
    @apply h-auto w-[112px] border-0 bg-transparent p-0 text-[12.5px] font-semibold tracking-[0.04em] shadow-none placeholder:text-secondary/55 focus:border-0 focus:outline-none focus:ring-0;
    color: #E4FF82;
  }

  .invoice-form-number-input:focus {
    box-shadow: 0 0 0 1.5px #E4FF82;
  }

  .invoice-form-section {
    @apply border-b border-[#E7E4DC] px-5 py-6 last:border-b-0 sm:px-7;
  }

  .invoice-form-section-header {
    @apply mb-4 flex items-center justify-between gap-4;
  }

  .invoice-form-section-title {
    @apply text-[11px] font-bold uppercase tracking-[0.14em] text-primary/50;
  }

  .invoice-form-profile-note {
    @apply rounded-[18px] bg-[#f7ffda] px-4 py-3.5;
  }

  .invoice-form-field {
    @apply min-w-0;
  }

  .invoice-form-label {
    @apply mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.12em] text-primary/50;
  }

  .invoice-form-input {
    @apply block h-10 w-full rounded-[10px] border-[1.5px] border-[#E7E4DC] bg-white px-3.5 text-[13px] text-primary shadow-none transition-colors placeholder:text-primary/35 hover:border-[#D6D2C7] focus:border-primary focus:ring-0;
  }

  .invoice-form-input:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.5);
  }

  .invoice-form-textarea {
    @apply h-auto resize-y py-3 leading-5;
  }

  .invoice-form-select {
    @apply appearance-none pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23242221' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .invoice-form-add-item-button {
    @apply inline-flex h-8 items-center gap-1.5 rounded-lg border-[1.5px] border-primary bg-secondary px-3 text-xs font-bold text-primary transition-colors hover:bg-accent;
  }

  .invoice-form-items {
    @apply overflow-hidden rounded-[18px] border border-primary/10 bg-white;
  }

  .invoice-form-items-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .invoice-form-item-grid {
    display: grid;
    grid-template-columns: minmax(170px, 1.4fr) minmax(58px, 0.35fr) minmax(92px, 0.75fr) minmax(72px, 0.55fr) minmax(88px, 0.65fr) 48px;
    align-items: center;
  }

  .invoice-form-item-grid > * {
    min-width: 0;
  }

  .invoice-form-items-head {
    @apply bg-primary text-white;
  }

  .invoice-form-items-head th {
    @apply block px-4 py-3 text-left text-[10.5px] font-bold uppercase tracking-[0.12em];
  }

  .invoice-form-item-row {
    @apply border-t border-[#E7E4DC] bg-white transition-colors hover:bg-neutral-50;
  }

  .invoice-form-item-row td {
    @apply block px-3 py-2.5;
  }

  .invoice-form-item-row td.invoice-form-item-actions {
    @apply flex justify-center pl-2 pr-4;
  }

  .invoice-form-item-input {
    @apply h-9 w-full rounded-lg border-[1.5px] border-transparent bg-transparent px-2 text-[13px] text-primary shadow-none transition-colors placeholder:text-primary/35 hover:border-[#E7E4DC] hover:bg-white focus:border-primary focus:bg-white focus:ring-0;
  }

  .invoice-form-item-input:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.38);
  }

  .invoice-form-item-input--number {
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .invoice-form-item-input--number::-webkit-outer-spin-button,
  .invoice-form-item-input--number::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .invoice-form-money-input {
    @apply flex items-center justify-end gap-1 text-[12.5px] text-primary/50;
  }

  .invoice-form-item-total {
    @apply block text-[13.5px] font-bold text-primary;
  }

  .invoice-form-trash-button {
    @apply inline-flex size-8 items-center justify-center rounded-lg text-[#C0432F] transition-colors hover:bg-[#C0432F]/10;
  }

  .invoice-form-summary {
    @apply w-full max-w-xs overflow-hidden rounded-[18px] border border-primary/10 bg-white;
  }

  .invoice-form-summary-header {
    @apply bg-primary px-4 py-2.5 text-[10.5px] font-bold uppercase tracking-[0.14em] text-white;
  }

  .invoice-form-summary-row {
    @apply flex items-center justify-between gap-4 text-[13px] text-primary/60;
  }

  .invoice-form-summary-row .invoice-form-mono {
    @apply text-primary;
  }

  .invoice-form-summary-total {
    @apply mt-3 flex items-center justify-between gap-4 border-t border-[#E7E4DC] pt-3 text-sm font-bold text-primary;
  }

  .invoice-form-radio-card {
    @apply relative grid cursor-pointer grid-cols-[22px_minmax(0,1fr)] gap-3 rounded-[18px] border-[1.5px] border-[#E7E4DC] bg-white px-4 py-3.5 transition-colors;
  }

  .invoice-form-radio-card:hover {
    @apply border-[#D6D2C7];
  }

  .invoice-form-radio-native {
    @apply mt-0.5 size-[18px] shrink-0 cursor-pointer appearance-none rounded-full border-[1.5px] border-[#D6D2C7] bg-white p-0 text-primary shadow-none focus:ring-0;
    background-image: none;
  }

  .invoice-form-radio-native:checked {
    border-color: #242221;
    background-color: #242221;
    background-image: radial-gradient(circle, #E4FF82 0 3px, transparent 3.5px);
  }

  .invoice-form-radio-native:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.5);
  }

  .invoice-form-radio-card:has(input:checked) {
    @apply border-primary bg-[#f7ffda];
  }

  .invoice-form-footer {
    @apply flex flex-col gap-4 bg-primary px-5 py-5 text-white sm:flex-row sm:items-center sm:justify-between sm:px-7;
  }

  .invoice-form-submit-button {
    @apply h-[42px] items-center gap-2 px-6 py-0 text-[11.5px] tracking-[0.12em] shadow-[0_8px_18px_-10px_rgba(0,0,0,0.45)];
  }

  .invoice-show-header {
    @apply flex flex-col gap-4 rounded-[24px] border border-primary/10 bg-accent px-5 py-5 shadow-[0_18px_44px_rgba(36,34,33,0.07)] sm:px-6 lg:flex-row lg:items-start lg:justify-between;
  }

  .invoice-show-back-link {
    @apply inline-flex items-center gap-1.5 text-[12.5px] font-semibold text-primary/55 transition-colors hover:text-primary;
  }

  .invoice-show-actions {
    @apply flex flex-wrap items-center gap-2 lg:justify-end;
  }

  .invoice-show-action-button {
    @apply h-9 items-center px-4 py-0 text-[11px] tracking-[0.1em];
  }

  .invoice-show-status-pill {
    @apply inline-flex rounded-full border border-primary/10 bg-white/60 px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.08em] text-primary/65;
  }

  .invoice-show-notice {
    @apply flex flex-col gap-4 rounded-[18px] border border-primary/10 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(36,34,33,0.05)] sm:flex-row sm:items-center sm:justify-between;
  }

  .invoice-show-detail-list {
    @apply rounded-[18px] border border-primary/10 bg-white px-4 py-3;
  }

  .invoice-show-detail-list > div {
    @apply flex items-center justify-between gap-4 border-b border-[#E7E4DC] py-2.5 last:border-b-0;
  }

  .invoice-show-detail-list dt {
    @apply text-[12.5px] font-semibold text-primary/55;
  }

  .invoice-show-detail-list dd {
    @apply text-right text-[13px] font-semibold text-primary;
  }

  .invoice-show-item-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 80px 130px 120px 130px;
    align-items: center;
  }

  .invoice-show-item-grid > * {
    min-width: 0;
  }

  .finance-workflow-display {
    font-family: 'Adieu', sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-feature-settings: normal;
    font-variant-numeric: normal;
  }

  .finance-workflow-shell {
    @apply mx-auto w-full max-w-[1180px];
  }

  .finance-workflow-stack {
    @apply space-y-8;
  }

  .finance-workflow-stepper-card {
    @apply overflow-hidden rounded-[24px] border border-primary/10 bg-white px-4 py-4 shadow-[0_18px_44px_rgba(36,34,33,0.07)] sm:px-7 sm:py-5;
  }

  .finance-workflow-stepper-scroll {
    @apply overflow-x-auto pb-2;
  }

  .finance-workflow-stepper-grid {
    display: grid;
    grid-template-columns: repeat(var(--finance-step-count, 8), minmax(0, 1fr));
    min-width: min(100%, calc(var(--finance-step-count, 8) * 130px));
  }

  .finance-workflow-step-cell {
    @apply min-w-0 pr-2 last:pr-0;
  }

  .finance-workflow-step-row {
    @apply flex items-center;
  }

  .finance-workflow-step-dot {
    @apply relative flex size-7 shrink-0 items-center justify-center rounded-full border-[1.5px] border-[#D6D2C7] bg-white text-primary;
  }

  .finance-workflow-step-dot svg {
    @apply hidden size-4;
  }

  .finance-workflow-step-rail {
    @apply mx-2 h-0.5 flex-1 bg-[#E7E4DC];
  }

  .finance-workflow-step-caption {
    @apply mt-3 block pr-3 text-[11.5px] font-semibold leading-[1.3] text-primary/45;
  }

  .finance-workflow-step-cell.is-done .finance-workflow-step-dot {
    @apply border-primary bg-primary text-white;
  }

  .finance-workflow-step-cell.is-done .finance-workflow-step-dot svg {
    @apply block;
  }

  .finance-workflow-step-cell.is-done .finance-workflow-step-rail {
    @apply bg-primary;
  }

  .finance-workflow-step-cell.is-active .finance-workflow-step-dot {
    @apply border-primary bg-primary;
    box-shadow: 0 0 0 6px rgba(228, 255, 130, 0.45);
  }

  .finance-workflow-step-cell.is-active .finance-workflow-step-dot::after {
    content: '';
    @apply block size-2 rounded-full bg-secondary;
  }

  .finance-workflow-step-cell.is-active .finance-workflow-step-caption {
    @apply font-bold text-primary;
  }

  .finance-workflow-step-cell.is-done .finance-workflow-step-caption {
    @apply text-primary/65;
  }

  .finance-workflow-body {
    @apply grid items-start gap-8 lg:grid-cols-[320px_minmax(0,1fr)];
  }

  .finance-workflow-intro {
    @apply space-y-3 lg:sticky lg:top-5;
  }

  .finance-workflow-eyebrow {
    @apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-primary/45;
  }

  .finance-workflow-title {
    @apply text-[28px] leading-[1.1] text-primary;
  }

  .finance-workflow-copy {
    @apply max-w-[36ch] space-y-3 text-[13px] leading-[1.6] text-primary/70;
  }

  .finance-workflow-card {
    @apply overflow-hidden rounded-[24px] border border-primary/10 bg-white shadow-[0_18px_44px_rgba(36,34,33,0.07)];
  }

  .finance-workflow-card-body {
    @apply grid grid-cols-1 gap-x-6 gap-y-5 px-5 py-6 sm:grid-cols-6 sm:px-7;
  }

  .onboarding-workflow-card-body {
    @apply px-5 py-6 sm:p-8;
  }

  .onboarding-workflow-fields {
    @apply grid w-full grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-6;
  }

  .onboarding-workflow-money-select {
    @apply absolute inset-y-0 right-0 h-full rounded-r-[10px] border-0 bg-transparent pl-2 pr-8 text-[11.5px] font-semibold uppercase tracking-[0.04em] text-primary/45 shadow-none focus:ring-0;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23242221' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .finance-workflow-check-card {
    @apply grid cursor-pointer grid-cols-[22px_minmax(0,1fr)] gap-3 rounded-[18px] border-[1.5px] border-[#E7E4DC] bg-white px-4 py-3.5 transition-colors hover:border-[#D6D2C7];
  }

  .finance-workflow-check-card:has(input:checked) {
    @apply border-primary bg-[#f7ffda];
  }

  .finance-workflow-checkbox-native {
    @apply mt-0.5 size-[18px] shrink-0 cursor-pointer appearance-none rounded-[6px] border-[1.5px] border-[#D6D2C7] bg-white p-0 text-primary shadow-none focus:ring-0;
  }

  .finance-workflow-checkbox-native:checked {
    border-color: #242221;
    background-color: #242221;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 10.5 3 3 7-7' stroke='%23E4FF82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .finance-workflow-checkbox-native:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.5);
  }

  .finance-workflow-error {
    @apply mx-5 mt-5 rounded-[18px] border border-[#C0432F]/15 bg-[#fff0ee] px-4 py-3 text-primary sm:mx-7;
  }

  .finance-workflow-footer {
    @apply flex flex-col gap-4 border-t border-[#E7E4DC] px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-7;
  }

  .finance-workflow-footer-group {
    @apply flex flex-col gap-3 sm:flex-row sm:items-center;
  }

  .finance-workflow-text-button {
    @apply inline-flex h-9 items-center justify-center gap-1.5 rounded-[10px] px-1 text-[12.5px] font-bold text-primary/75 transition-colors hover:text-primary;
  }

  .finance-workflow-ghost-button {
    @apply inline-flex h-9 items-center justify-center gap-1.5 rounded-[10px] border-[1.5px] border-[#E7E4DC] bg-white px-3.5 text-[12.5px] font-bold text-primary transition-colors hover:border-[#D6D2C7] hover:bg-[#fbffea];
  }

  .finance-workflow-submit-button {
    @apply h-[42px] items-center gap-2 px-6 py-0 text-[11.5px] tracking-[0.12em] shadow-[0_8px_18px_-10px_rgba(0,0,0,0.35)];
    white-space: nowrap;
  }

  .finance-workflow-label {
    @apply mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.12em] text-primary/50;
  }

  .finance-workflow-hint {
    @apply mt-1 text-xs leading-5 text-primary/60;
  }

  .finance-workflow-input {
    @apply block h-11 w-full rounded-[10px] border-[1.5px] border-transparent bg-[#fbffea] px-3.5 text-[13.5px] text-primary shadow-none transition-colors placeholder:text-primary/40 hover:border-[#E7E4DC] focus:border-primary focus:bg-white focus:ring-0;
  }

  .finance-workflow-input:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.5);
  }

  .finance-workflow-input--plain {
    @apply border-[#E7E4DC] bg-white hover:border-[#D6D2C7];
  }

  .finance-workflow-select {
    @apply appearance-none pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23242221' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .finance-workflow-radio-card {
    @apply relative grid cursor-pointer grid-cols-[22px_minmax(0,1fr)] gap-3 rounded-[18px] border-[1.5px] border-[#E7E4DC] bg-white px-4 py-3.5 transition-colors hover:border-[#D6D2C7];
  }

  .finance-workflow-radio-card:has(input:checked) {
    @apply border-primary bg-[#f7ffda];
  }

  .finance-workflow-radio-native {
    @apply mt-0.5 size-[18px] shrink-0 cursor-pointer appearance-none rounded-full border-[1.5px] border-[#D6D2C7] bg-white p-0 text-primary shadow-none focus:ring-0;
    background-image: none;
  }

  .finance-workflow-radio-native:checked {
    border-color: #242221;
    background-color: #242221;
    background-image: radial-gradient(circle, #E4FF82 0 3px, transparent 3.5px);
  }

  .finance-workflow-radio-native:focus {
    box-shadow: 0 0 0 3px rgba(228, 255, 130, 0.5);
  }

  .finance-workflow-choice-grid {
    @apply grid gap-3 sm:grid-cols-2;
  }

  .finance-workflow-choice-card {
    @apply flex h-full cursor-pointer flex-col rounded-[18px] border-[1.5px] border-[#E7E4DC] bg-white px-4 py-3.5 text-primary transition-colors hover:border-[#D6D2C7];
  }

  .peer:checked + .finance-workflow-choice-card {
    @apply border-primary bg-[#f7ffda];
  }

  .finance-workflow-notice {
    @apply flex flex-col gap-3 rounded-[18px] border border-primary/10 bg-primary/[0.025] px-4 py-3 text-primary sm:flex-row sm:items-center sm:justify-between;
  }

  .finance-workflow-callout {
    @apply rounded-[18px] bg-primary/[0.04] px-4 py-3.5 text-[13px] leading-6 text-primary/80;
  }

  .finance-workflow-info-panel {
    @apply rounded-[18px] border border-primary/10 bg-primary/[0.025] px-4 py-3.5;
  }

  .finance-workflow-soft-panel {
    @apply rounded-[18px] border border-primary/10 bg-primary/[0.025] px-4 py-3.5;
  }

  .finance-workflow-dropzone {
    @apply flex justify-center rounded-[18px] border-[1.5px] border-dashed border-[#D6D2C7] bg-white px-5 py-8 text-center transition-colors hover:border-[#7a8f3e] hover:bg-[#fbffea];
  }

  .finance-workflow-dropzone.is-dragging {
    @apply border-primary bg-secondary/25;
  }

  .finance-workflow-upload-icon {
    @apply mx-auto flex size-11 items-center justify-center rounded-[12px] border-[1.5px] border-[#D6D2C7] bg-white text-primary transition-colors;
  }

  .finance-workflow-dropzone:hover .finance-workflow-upload-icon,
  .finance-workflow-dropzone.is-dragging .finance-workflow-upload-icon {
    @apply border-[#7a8f3e] bg-[#fbffea];
  }

  .finance-workflow-file-preview {
    @apply mb-4 flex items-center gap-4 rounded-[18px] bg-[#f7ffda] px-4 py-3.5;
  }

  .finance-workflow-file-preview--inline {
    @apply mb-0 mt-4;
  }

  .finance-workflow-money-wrap {
    @apply relative;
  }

  .finance-workflow-money-prefix {
    @apply pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 font-mono text-[13.5px] text-primary/80;
  }

  .finance-workflow-money-suffix {
    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3.5 text-[11.5px] font-semibold uppercase tracking-[0.04em] text-primary/45;
  }

  .finance-workflow-money-input {
    @apply pl-9 pr-16 font-mono tabular-nums;
  }

  .finance-workflow-review-list {
    @apply overflow-hidden rounded-[18px] border border-[#E7E4DC] bg-white;
  }

  .finance-workflow-review-row {
    @apply grid grid-cols-1 gap-2 border-t border-[#E7E4DC] px-4 py-3.5 first:border-t-0 sm:grid-cols-[1fr_1fr_auto] sm:items-center sm:gap-3;
  }

  .finance-workflow-review-key {
    @apply text-[12.5px] text-primary/50;
  }

  .finance-workflow-review-value {
    @apply text-[13px] font-bold text-primary;
  }

  .finance-workflow-submit-panel {
    @apply col-span-full flex flex-col items-center px-4 py-10 text-center;
  }

  .finance-workflow-submit-icon {
    @apply mb-5 flex size-16 items-center justify-center rounded-full bg-secondary text-primary;
    box-shadow: 0 0 0 8px rgba(228, 255, 130, 0.4);
  }

  @media (max-width: 1180px) {
    .finance-workflow-stepper-grid {
      grid-template-columns: repeat(var(--finance-step-count, 8), 130px);
      min-width: calc(var(--finance-step-count, 8) * 130px);
    }
  }

  @media (min-width: 981px) {
    .finance-workflow-body {
      min-height: max(560px, calc(100svh - 170px));
      padding-bottom: clamp(24px, 5svh, 56px);
      align-content: center;
      align-items: start;
    }
  }

  @media (max-width: 980px) {
    .finance-workflow-body {
      @apply grid-cols-1;
      min-height: 0;
      align-items: start;
    }

    .finance-workflow-intro {
      @apply static;
    }

    .finance-workflow-choice-grid {
      @apply grid-cols-1;
    }
  }

  @media (max-width: 767px) {
    .app-page-hero,
    .app-page-card,
    .funding-show-status-panel,
    .funding-show-side-panel,
    .finance-workflow-card,
    .finance-workflow-stepper-card,
    .invoice-form-card,
    .invoice-form-hero,
    .invoice-show-header {
      border-radius: 18px;
    }

    .funding-index-amount,
    .funding-show-display,
    .invoice-form-display {
      overflow-wrap: anywhere;
    }

    .funding-show-status-panel__hero {
      @apply px-4 py-4;
    }

    .funding-show-status-icon {
      @apply size-10;
    }

    .funding-show-status-title {
      font-size: 20px;
      line-height: 1.12;
    }

    .funding-show-status-copy {
      font-size: 12.5px;
      line-height: 1.45;
    }

    .funding-show-panel-body {
      @apply space-y-4 px-4 py-4;
    }

    .funding-show-feature-card {
      @apply mx-3 my-4 space-y-4 px-4 py-4;
    }

    .funding-show-action-row,
    .invoice-show-actions {
      @apply grid grid-cols-1 gap-2;
    }

    .funding-show-action-button,
    .funding-show-skew-button,
    .invoice-show-action-button,
    .invoice-show-actions .invoice-form-ghost-button {
      width: 100%;
      min-height: 44px;
      padding-inline: 16px;
      text-align: center;
    }

    .funding-show-action-button span,
    .funding-show-skew-button span {
      justify-content: center;
    }

    .funding-show-key-row {
      @apply items-start gap-3;
    }

    .funding-show-key-row dd,
    .funding-show-calc-cell dd,
    .invoice-show-detail-list dd {
      overflow-wrap: anywhere;
    }

    .finance-workflow-stack {
      @apply space-y-5;
    }

    .finance-workflow-shell {
      overflow-x: clip;
    }

    .finance-workflow-stepper-card {
      @apply px-3 py-3;
      overflow: hidden;
    }

    .finance-workflow-stepper-scroll {
      @apply overflow-visible pb-0;
    }

    .finance-workflow-stepper-grid {
      grid-template-columns: repeat(var(--finance-step-count, 8), minmax(0, 1fr));
      min-width: 0;
    }

    .finance-workflow-step-cell {
      @apply pr-0;
    }

    .finance-workflow-step-dot {
      @apply size-5;
    }

    .finance-workflow-step-dot svg {
      @apply size-3;
    }

    .finance-workflow-step-cell.is-active .finance-workflow-step-dot {
      box-shadow: 0 0 0 4px rgba(228, 255, 130, 0.45);
    }

    .finance-workflow-step-cell.is-active .finance-workflow-step-dot::after {
      @apply size-1.5;
    }

    .finance-workflow-step-rail {
      @apply mx-1;
    }

    .finance-workflow-step-caption,
    .finance-workflow-step-cell.is-active .finance-workflow-step-caption {
      @apply hidden;
    }

    .finance-workflow-title {
      @apply text-[24px];
    }

    .finance-workflow-copy {
      @apply max-w-none text-[12.5px];
    }

    .finance-workflow-card-body,
    .onboarding-workflow-card-body {
      @apply px-4 py-5;
    }

    .finance-workflow-footer {
      @apply gap-3 px-4;
    }

    .finance-workflow-footer-group {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.5rem;
    }

    .finance-workflow-footer-group--step-nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-workflow-footer-group,
    .finance-workflow-footer-group > *,
    .finance-workflow-submit-button,
    .finance-workflow-text-button,
    .finance-workflow-ghost-button {
      width: 100%;
    }

    .finance-workflow-text-button {
      @apply h-10 rounded-[10px] border-[1.5px] border-[#E7E4DC] bg-white px-3 text-primary shadow-[0_8px_18px_rgba(36,34,33,0.04)] hover:border-[#D6D2C7] hover:bg-[#f7ffda];
    }

    .finance-workflow-footer-group--actions .finance-workflow-text-button {
      @apply border-primary/15 bg-primary/[0.025] font-bold;
    }

    .finance-workflow-ghost-button {
      @apply h-10;
    }

    .finance-workflow-submit-button {
      @apply mt-0 h-11;
    }

    .finance-workflow-dropzone {
      @apply px-4 py-6;
    }

    .invoice-form-hero,
    .invoice-form-band,
    .invoice-form-footer {
      @apply px-4 py-4;
    }

    .invoice-form-section {
      @apply px-4 py-5;
    }

    .invoice-form-section-header {
      @apply flex-col items-start gap-3;
    }

    .invoice-form-add-item-button,
    .invoice-form-ghost-button,
    .invoice-form-footer .btn-secondary {
      width: 100%;
      justify-content: center;
    }

    .invoice-form-items {
      margin-inline: -0.25rem;
      border-radius: 14px;
    }

    .invoice-form-items-table {
      min-width: 0;
    }

    .invoice-form-items-head {
      display: none;
    }

    .invoice-form-item-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
      align-items: start;
    }

    .invoice-form-item-row {
      @apply gap-x-2 gap-y-1 border-t px-2 py-3 first:border-t-0;
    }

    .invoice-form-item-row td {
      @apply px-1 py-1.5;
    }

    .invoice-form-item-row td:nth-child(1) {
      grid-column: 1 / -1;
    }

    .invoice-form-item-row td:nth-child(2),
    .invoice-form-item-row td:nth-child(4) {
      grid-column: 1;
    }

    .invoice-form-item-row td:nth-child(3),
    .invoice-form-item-row td:nth-child(5) {
      grid-column: 2;
    }

    .invoice-form-item-row td.invoice-form-item-actions {
      grid-column: 3;
      grid-row: 2 / span 2;
      align-self: center;
      @apply px-0;
    }

    .invoice-form-money-input {
      @apply justify-start;
    }

    .invoice-form-item-input--number {
      @apply text-left;
    }

    .invoice-form-item-total {
      @apply h-9 rounded-lg bg-primary/[0.035] px-2 py-2 text-left text-[13px];
    }

    .invoice-show-actions,
    .invoice-show-actions > *,
    .invoice-show-actions form,
    .invoice-show-actions form button,
    .invoice-show-notice .invoice-form-ghost-button,
    .invoice-show-notice form,
    .invoice-show-notice form button {
      width: 100%;
    }

    .invoice-show-detail-list > div {
      @apply items-start;
    }

    .invoice-show-detail-list dd {
      max-width: 58%;
    }

    .invoice-show-item-grid {
      grid-template-columns: minmax(200px, 1fr) 64px 112px 112px 120px;
    }
  }

  .app-page-card-muted {
    @apply rounded-[22px] border border-primary/10 bg-white;
  }

  .app-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/60;
  }

  .app-notice-info {
    @apply rounded-[22px] border border-primary/10 bg-[#f7ffda] text-primary;
  }

  .app-notice-warning {
    @apply rounded-[22px] border border-primary/10 bg-[#f7ffda] text-primary;
  }

  .app-notice-error {
    @apply rounded-[22px] border border-error/15 bg-[#fff0ee] text-primary;
  }

  .app-form-label {
    @apply mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-neutral-500;
  }

  .app-form-input {
    @apply block w-full rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm text-primary shadow-none placeholder:text-neutral-400 focus:border-secondary focus:ring-2 focus:ring-secondary/20;
  }

  .app-form-hint {
    @apply mt-2 text-xs leading-5 text-neutral-500;
  }

  .app-action-link {
    @apply inline-flex items-center text-sm font-medium text-primary transition-colors hover:text-primary/70;
  }

  .app-chip {
    @apply inline-flex items-center rounded-full border border-primary/10 bg-[#f7ffda] px-3 py-1 text-xs font-medium text-primary;
  }

  .status-pill-pending {
    @apply border border-primary/10 bg-white text-primary;
  }

  .status-pill-success {
    @apply border border-primary/10 bg-[#f7ffda] text-primary;
  }

  .status-pill-rejected {
    color: #8f3c2d;
    background-color: #fff0ee;
    border: 1px solid rgba(143, 60, 45, 0.18);
  }

  .status-pill-active {
    @apply border border-primary/10 bg-[#f7ffda] text-primary;
  }

  .status-pill-completed {
    @apply border border-primary/10 text-primary;
    background-color: #ecf7cf;
  }

  .status-pill-neutral {
    @apply border border-primary/10 bg-white text-primary/70;
  }

  .funding-status-badge-draft,
  .funding-status-badge-cancelled {
    background-color: var(--state-stone-bg);
    color: var(--state-stone-text);
    border: 1px solid var(--state-stone-border);
  }

  /* State-coloured surface — for "Current step" and similar callouts on the
     funding deals index that should adopt the deal's state colour. Sets only
     background; nested text is expected to use its own classes (text-primary,
     etc.) which read fine against every state bg in the warmth scale. */
  .funding-state-surface-draft,
  .funding-state-surface-cancelled {
    background-color: var(--state-stone-bg);
  }

  .funding-state-surface-submitted {
    background-color: var(--state-cream-bg);
  }

  .funding-state-surface-creating-offer {
    background-color: var(--state-pale-lime-bg);
  }

  .funding-state-surface-offer-pending {
    background-color: var(--state-lime-bg);
  }

  .funding-state-surface-validating-invoice {
    background-color: var(--state-olive-bg);
  }

  .funding-state-surface-preparing-funds {
    background-color: var(--state-olive-deep-bg);
  }

  .funding-state-surface-funded {
    background-color: var(--state-forest-badge-bg);
  }

  .funding-state-surface-paid,
  .funding-state-surface-settled {
    background-color: var(--state-collected-badge-bg);
  }

  .funding-state-surface-offer-declined,
  .funding-state-surface-offer-cancelled {
    background-color: var(--state-clay-light-bg);
  }

  .funding-state-surface-rejected {
    background-color: var(--state-clay-bg);
  }

  .funding-status-badge-submitted {
    background-color: var(--state-cream-bg);
    color: var(--state-cream-text);
    border: 1px solid var(--state-cream-border);
  }

  .funding-status-badge-creating-offer {
    background-color: var(--state-pale-lime-bg);
    color: var(--state-pale-lime-text);
    border: 1px solid var(--state-pale-lime-border);
  }

  .funding-status-badge-offer-pending {
    background-color: var(--state-lime-bg);
    color: var(--state-lime-text);
    border: 1px solid var(--state-lime-border);
  }

  .funding-status-badge-validating {
    background-color: var(--state-olive-bg);
    color: var(--state-olive-text);
    border: 1px solid var(--state-olive-border);
  }

  .funding-status-badge-preparing {
    background-color: var(--state-olive-deep-bg);
    color: var(--state-olive-deep-text);
    border: 1px solid var(--state-olive-deep-border);
  }

  .funding-status-badge-funded {
    background-color: var(--state-forest-badge-bg);
    color: var(--state-forest-text);
    border: 1px solid var(--state-forest-border);
  }

  .funding-status-badge-paid {
    background-color: var(--state-collected-badge-bg);
    color: var(--state-collected-text);
    border: 1px solid var(--state-collected-border);
  }

  .funding-status-badge-offer-declined {
    background-color: var(--state-clay-light-bg);
    color: var(--state-clay-light-text);
    border: 1px solid var(--state-clay-light-border);
  }

  .funding-status-badge-rejected {
    background-color: var(--state-clay-bg);
    color: var(--state-clay-text);
    border: 1px solid var(--state-clay-border);
  }

  .funding-status-panel {
    @apply rounded-[28px] border border-primary/10 bg-white shadow-[0_18px_44px_rgba(36,34,33,0.07)] overflow-hidden;
  }

  .funding-status-panel .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    border-color: rgba(68, 87, 109, 0.16);
    background: #e8eef7;
  }

  .funding-status-panel .bg-gradient-to-r.from-secondary\/10.to-primary\/10 {
    border-color: rgb(36 34 33 / 0.1);
    background: #f7ffda;
  }

  .funding-status-panel .bg-gradient-to-r.from-amber-50.to-orange-50 {
    border-color: rgba(106, 88, 34, 0.16);
    background: #f3e8c5;
  }

  .funding-status-panel .bg-gradient-to-r.from-purple-50.to-pink-50 {
    border-color: rgba(83, 101, 148, 0.16);
    background: #eef1fb;
  }

  .funding-status-panel .bg-gradient-to-r.from-green-50.to-emerald-50 {
    border-color: rgba(85, 104, 42, 0.16);
    background: #e6f0c8;
  }

  .funding-status-panel .bg-gradient-to-r.from-green-600.to-emerald-600 {
    border-color: #6f8440;
    background: linear-gradient(90deg, #7f9641 0%, #93ad48 100%);
  }

  .funding-status-panel .bg-gradient-to-br.from-secondary\/5.to-secondary\/10 {
    border-color: rgb(36 34 33 / 0.1);
    background: #fff;
  }

  .funding-status-panel .bg-gradient-to-br.from-green-50.to-emerald-50 {
    border-color: rgba(85, 104, 42, 0.16);
    background: #e6f0c8;
  }

  .funding-status-panel .bg-blue-50 {
    border-color: rgba(68, 87, 109, 0.16);
    background: #eef2f8;
  }

  .funding-status-panel .bg-green-50 {
    border-color: rgba(85, 104, 42, 0.16);
    background: #e6f0c8;
  }

  .funding-status-panel .bg-amber-50,
  .funding-status-panel .bg-yellow-50 {
    border-color: rgba(106, 88, 34, 0.16);
    background: #f6edd0;
  }

  .funding-status-panel .bg-red-50 {
    border-color: rgba(143, 60, 45, 0.18);
    background: #fff0ee;
  }

  .funding-status-panel .border-blue-100,
  .funding-status-panel .border-blue-200,
  .funding-status-panel .border-blue-400 {
    border-color: rgba(68, 87, 109, 0.16);
  }

  .funding-status-panel .border-green-100,
  .funding-status-panel .border-green-200,
  .funding-status-panel .border-green-700 {
    border-color: rgba(85, 104, 42, 0.16);
  }

  .funding-status-panel .border-amber-100,
  .funding-status-panel .border-amber-200,
  .funding-status-panel .border-amber-400,
  .funding-status-panel .border-yellow-200 {
    border-color: rgba(106, 88, 34, 0.16);
  }

  .funding-status-panel .border-purple-100 {
    border-color: rgba(83, 101, 148, 0.16);
  }

  .funding-status-panel .border-secondary\/20,
  .funding-status-panel .border-secondary\/10 {
    border-color: rgb(36 34 33 / 0.1);
  }

  .funding-status-panel .bg-green-600 {
    background-color: #8ea552;
  }

  .funding-status-panel .bg-green-600\/10 {
    background-color: rgb(142 165 82 / 0.16);
  }

  .funding-status-panel .bg-blue-600 {
    background-color: #5d7693;
  }

  .funding-status-panel .bg-purple-600 {
    background-color: #6f7eb0;
  }

  .funding-status-panel .bg-amber-600 {
    background-color: #8a7331;
  }

  .funding-status-panel .text-blue-600,
  .funding-status-panel .text-blue-700,
  .funding-status-panel .text-blue-800,
  .funding-status-panel .text-blue-900 {
    color: #44576d;
  }

  .funding-status-panel .text-purple-600,
  .funding-status-panel .text-purple-700,
  .funding-status-panel .text-purple-800,
  .funding-status-panel .text-purple-900 {
    color: #536594;
  }

  .funding-status-panel .text-amber-600,
  .funding-status-panel .text-amber-700,
  .funding-status-panel .text-amber-800,
  .funding-status-panel .text-amber-900,
  .funding-status-panel .text-yellow-600,
  .funding-status-panel .text-yellow-700,
  .funding-status-panel .text-yellow-800,
  .funding-status-panel .text-yellow-900 {
    color: #6a5822;
  }

  .funding-status-panel .text-green-50 {
    color: rgba(255, 255, 255, 0.74);
  }

  .funding-status-panel .text-green-600 {
    color: #8ea552;
  }

  .funding-status-panel .text-green-700 {
    color: #7f9641;
  }

  .funding-status-panel .text-green-800,
  .funding-status-panel .text-green-900 {
    color: #55682a;
  }

  :is(.app-shell, .admin-content) .bg-white .text-secondary,
  :is(.app-shell, .admin-content) .bg-neutral-50 .text-secondary,
  :is(.app-shell, .admin-content) .bg-neutral-100 .text-secondary,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .text-secondary,
  :is(.app-shell, .admin-content) .bg-accent .text-secondary,
  :is(.app-shell, .admin-content) .bg-accent\/70 .text-secondary,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .text-secondary,
  :is(.app-shell, .admin-content) .bg-success-light .text-secondary,
  :is(.app-shell, .admin-content) .text-secondary-on-light {
    color: var(--app-accent-text);
  }

  :is(.app-shell, .admin-content) .bg-white .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-neutral-50 .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-neutral-100 .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-accent .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-accent\/70 .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .text-secondary\/80,
  :is(.app-shell, .admin-content) .bg-success-light .text-secondary\/80 {
    color: var(--app-accent-text-muted);
  }

  :is(.app-shell, .admin-content) .bg-white .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-neutral-50 .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-neutral-100 .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-accent .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-accent\/70 .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .text-secondary\/60,
  :is(.app-shell, .admin-content) .bg-success-light .text-secondary\/60 {
    color: var(--app-accent-text-soft);
  }

  :is(.app-shell, .admin-content) .bg-white .text-accent,
  :is(.app-shell, .admin-content) .bg-neutral-50 .text-accent,
  :is(.app-shell, .admin-content) .bg-neutral-100 .text-accent,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .text-accent,
  :is(.app-shell, .admin-content) .bg-accent .text-accent,
  :is(.app-shell, .admin-content) .bg-accent\/70 .text-accent,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .text-accent,
  :is(.app-shell, .admin-content) .bg-success-light .text-accent,
  :is(.app-shell, .admin-content) .text-accent-on-light {
    color: var(--app-accent-text);
  }

  :is(.app-shell, .admin-content) .bg-white .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-neutral-50 .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-neutral-100 .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-accent .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-accent\/70 .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-success-light .hover\:text-secondary:hover,
  :is(.app-shell, .admin-content) .bg-white .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-neutral-50 .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-neutral-100 .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-accent .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-accent\/70 .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-success-light .hover\:text-secondary\/80:hover,
  :is(.app-shell, .admin-content) .bg-white .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-neutral-50 .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-neutral-100 .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-accent .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-accent\/70 .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .hover\:text-accent:hover,
  :is(.app-shell, .admin-content) .bg-success-light .hover\:text-accent:hover {
    color: var(--app-accent-text-hover);
  }

  :is(.app-shell, .admin-content) .bg-white .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-neutral-50 .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-neutral-100 .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-accent .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-accent\/70 .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .group:hover .group-hover\:text-secondary,
  :is(.app-shell, .admin-content) .bg-success-light .group:hover .group-hover\:text-secondary {
    color: var(--app-accent-text-hover);
  }

  :is(.app-shell, .admin-content) .bg-white .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-neutral-50 .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-neutral-100 .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-accent .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-accent\/70 .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .focus\:ring-secondary:focus,
  :is(.app-shell, .admin-content) .bg-success-light .focus\:ring-secondary:focus {
    --tw-ring-color: rgb(228 255 130 / 0.28);
  }

  :is(.app-shell, .admin-content) .bg-white .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-neutral-50 .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-neutral-100 .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-\[\#edeee9\] .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-accent .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-accent\/70 .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-secondary\/10 .focus\:border-secondary:focus,
  :is(.app-shell, .admin-content) .bg-success-light .focus\:border-secondary:focus {
    border-color: var(--app-accent-text);
  }

  .app-shell .bg-blue-50,
  .app-shell .bg-blue-100 {
    background-color: #fff;
  }

  .app-shell .border-blue-100,
  .app-shell .border-blue-200,
  .app-shell .border-blue-400 {
    border-color: rgb(36 34 33 / 0.14);
  }

  .app-shell .text-blue-600,
  .app-shell .text-blue-700,
  .app-shell .text-blue-800,
  .app-shell .text-blue-900 {
    color: #242221;
  }

  .app-shell .bg-amber-50 {
    background-color: rgb(228 255 130 / 0.42);
  }

  .app-shell .border-amber-200,
  .app-shell .border-amber-400 {
    border-color: rgb(36 34 33 / 0.14);
  }

  .app-shell .text-amber-600,
  .app-shell .text-amber-700,
  .app-shell .text-amber-800,
  .app-shell .text-amber-900 {
    color: #242221;
  }

  .app-shell .bg-red-50 {
    background-color: #fff0ee;
  }

  .app-shell .border-red-100,
  .app-shell .border-red-200,
  .app-shell .border-red-300 {
    border-color: rgb(190 72 56 / 0.18);
  }

  .app-shell .text-red-600,
  .app-shell .text-red-700,
  .app-shell .text-red-800,
  .app-shell .text-red-900 {
    color: #8d3b2c;
  }

  .bg-secondary.text-white,
  .bg-secondary.text-background,
  .bg-secondary .text-white,
  .bg-secondary .text-background {
    color: #242221;
  }

  .hover\:bg-secondary:hover,
  .hover\:bg-secondary\/90:hover,
  .hover\:bg-secondary\/80:hover {
    color: #242221;
  }

  .hover\:bg-secondary:hover .text-background,
  .hover\:bg-secondary:hover .group-hover\:text-background,
  .hover\:bg-secondary\/90:hover .text-white,
  .hover\:bg-secondary\/90:hover .group-hover\:text-white,
  .hover\:bg-secondary\/80:hover .text-white,
  .hover\:bg-secondary\/80:hover .group-hover\:text-white {
    color: #242221;
  }

  .marketing-nav-link {
    position: relative;
    display: inline-block;
  }

  .marketing-sticky-nav {
    margin-top: -8px;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 200ms ease,
      margin-top 200ms ease,
      visibility 200ms ease;
    visibility: hidden;
  }

  .marketing-sticky-nav.is-visible {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
  }

  .marketing-sticky-nav.is-visible .marketing-sticky-nav__content {
    pointer-events: auto;
  }

  .marketing-sticky-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 120px;
    pointer-events: none;
  }

  .marketing-sticky-nav--dark::before {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0.88) 0%,
      rgb(0 0 0 / 0.58) 38%,
      rgb(0 0 0 / 0) 100%
    );
  }

  .marketing-sticky-nav--light::before {
    background: linear-gradient(
      180deg,
      rgb(228 255 130 / 0.96) 0%,
      rgb(242 255 195 / 0.72) 42%,
      rgb(255 255 255 / 0) 100%
    );
  }

  .marketing-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .marketing-nav-link:hover::after,
  .marketing-nav-link:focus-visible::after,
  .marketing-nav-link-active::after {
    transform: scaleX(1);
  }

  .heading-hero {
    @apply text-5xl sm:text-6xl lg:text-7xl;
  }
}
/* Custom scrollbar styling for audit log */
.audit-log-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.audit-log-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.audit-log-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.audit-log-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* For Firefox */
.audit-log-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f1f1f1;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */