@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@import url("https://use.typekit.net/dtt5jxg.css");

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:opsz,wght,SOFT@9..144,100..900,100&display=swap");

*, ::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: var(--grove-font-sans, "Plus Jakarta Sans"), 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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, [data-brand="v1"]{
  --c-primary-green: 4 98 64;
  --c-primary-teal: 4 98 98;
  --c-primary-white: 255 255 255;
  --c-primary-yellow: 255 207 131;
  --c-gray-000: 252 252 252;
  --c-gray-100: 248 249 250;
  --c-gray-150: 234 236 238;
  --c-gray-200: 206 212 218;
  --c-gray-300: 173 181 189;
  --c-gray-400: 108 117 125;
  --c-gray-500: 73 80 87;
  --c-gray-600: 52 58 64;
  --c-gray-700: 33 37 41;
  --c-gray-800: 16 16 16;
  --c-green-50: 238 246 236;
  --c-green-100: 219 232 227;
  --c-green-200: 175 198 195;
  --c-green-300: 118 168 140;
  --c-green-400: 49 135 104;
  --c-green-500: 25 124 94;
  --c-green-700: 1 78 50;
  --c-green-800: 13 52 40;
  --c-sage-100: 247 255 234;
  --c-sage-200: 213 236 175;
  --c-sage-300: 126 198 164;
  --c-sage-400: 66 163 117;
  --c-sage-500: 77 154 89;
  --c-sage-600: 26 147 46;
  --c-sage-700: 57 89 80;
  --c-sage-800: 17 58 45;
  --c-teal-100: 220 244 244;
  --c-teal-200: 144 217 218;
  --c-teal-300: 103 168 169;
  --c-teal-400: 67 169 170;
  --c-teal-500: 16 127 127;
  --c-teal-700: 2 79 79;
  --c-teal-800: 1 59 59;
  --c-yellow-50: 255 253 244;
  --c-yellow-100: 250 242 205;
  --c-yellow-150: 255 244 155;
  --c-yellow-200: 234 211 109;
  --c-yellow-300: 245 195 56;
  --c-yellow-500: 255 195 101;
  --c-yellow-600: 253 185 57;
  --c-yellow-700: 243 156 17;
  --c-yellow-800: 90 68 4;
  --c-purple-200: 207 178 231;
  --c-pillb-aqua: 231 250 251;
  --c-pillb-blue: 225 242 253;
  --c-pillb-gray: 235 235 235;
  --c-pillb-green: 237 251 235;
  --c-pillb-orange: 255 240 224;
  --c-pillb-purple: 246 236 248;
  --c-pillb-red: 251 238 238;
  --c-pillb-teal: 229 241 237;
  --c-pillt-aqua: 2 86 90;
  --c-pillt-blue: 18 71 94;
  --c-pillt-gray: 64 64 64;
  --c-pillt-green: 13 95 2;
  --c-pillt-orange: 162 87 17;
  --c-pillt-purple: 75 4 98;
  --c-pillt-red: 138 25 0;
  --c-pillt-teal: 3 84 65;
  --c-cream: 248 246 235;
  --c-beige: 234 224 203;
  --c-light-pink: 255 209 242;
  --c-pink: 255 160 228;
  --c-hover-dark-green: 2 35 23;
  --c-hover-primary-green: 13 208 117;
  --c-hover-light-green: 153 240 153;
  --c-hover-yellow: 244 223 38;
  --c-hover-white: 239 239 239;
  --c-hover-cream: 234 224 203;
  --c-hover-beige: 216 196 155;
  --c-hover-red: 157 11 3;
  --c-light-red: 255 221 221;
  --c-hover-light-red: 255 202 202;
  --c-hairline: 233 234 235;
  --c-icon-muted: 174 174 174;
  --c-text-on-primary: 255 255 255;
  --c-green-pressed: 1 78 50;
  --c-sage-pressed: 26 147 46;
  --c-yellow-pressed: 253 185 57;
  --c-clear-pressed: 220 244 244;
  --c-carousel-dot: 217 217 217;
  --c-chart-line: 137 212 188;
  --c-chart-line-soft: 134 213 188;
  --c-chart-fill: 137 212 188;
  --c-chart-fill-tint: 224 242 236;
  --c-chart-gold: 254 214 149;
  --c-chart-appreciation: 217 242 229;
  --c-chart-tooltip: 11 126 84;
  --c-teal-pressed: 2 79 79;
  --c-nav-active: 240 242 238;
  --c-disabled-bg: 207 207 207;
  --c-red: 195 29 20;
  --c-msgbox-bg: 255 255 255;
  --c-msgbox-border: 206 212 218;
  --c-msgbox-text: 108 117 125;
  --grove-font-sans: "Plus Jakarta Sans";
  --grove-font-inter: Inter;
  --grove-font-btn: "Plus Jakarta Sans";
  --grove-font-lindsey: lindsey-signature;
  --grove-font-roboto: Roboto;
}

[data-brand="v2"]{
  --c-primary-green: 73 232 133;
  --c-primary-teal: 12 136 59;
  --c-primary-white: 255 255 255;
  --c-primary-yellow: 255 245 104;
  --c-gray-000: 255 255 255;
  --c-gray-100: 242 242 242;
  --c-gray-150: 242 242 242;
  --c-gray-200: 224 224 224;
  --c-gray-300: 224 224 224;
  --c-gray-400: 110 110 110;
  --c-gray-500: 110 110 110;
  --c-gray-600: 34 34 34;
  --c-gray-700: 34 34 34;
  --c-gray-800: 34 34 34;
  --c-green-50: 202 255 202;
  --c-green-100: 202 255 202;
  --c-green-200: 202 255 202;
  --c-green-300: 73 232 133;
  --c-green-400: 73 232 133;
  --c-green-500: 73 232 133;
  --c-green-700: 18 63 46;
  --c-green-800: 18 63 46;
  --c-sage-100: 202 255 202;
  --c-sage-200: 202 255 202;
  --c-sage-300: 202 255 202;
  --c-sage-400: 73 232 133;
  --c-sage-500: 73 232 133;
  --c-sage-600: 73 232 133;
  --c-sage-700: 18 63 46;
  --c-sage-800: 18 63 46;
  --c-teal-100: 201 232 255;
  --c-teal-200: 201 232 255;
  --c-teal-300: 90 183 255;
  --c-teal-400: 90 183 255;
  --c-teal-500: 90 183 255;
  --c-teal-700: 18 63 46;
  --c-teal-800: 18 63 46;
  --c-yellow-50: 248 246 235;
  --c-yellow-100: 255 238 156;
  --c-yellow-150: 255 238 156;
  --c-yellow-200: 255 238 156;
  --c-yellow-300: 255 238 156;
  --c-yellow-500: 255 245 104;
  --c-yellow-600: 255 133 0;
  --c-yellow-700: 255 133 0;
  --c-yellow-800: 90 68 4;
  --c-purple-200: 207 178 231;
  --c-pillb-aqua: 201 232 255;
  --c-pillb-blue: 201 232 255;
  --c-pillb-gray: 242 242 242;
  --c-pillb-green: 202 255 202;
  --c-pillb-orange: 255 217 176;
  --c-pillb-purple: 246 236 248;
  --c-pillb-red: 255 221 221;
  --c-pillb-teal: 201 232 255;
  --c-pillt-aqua: 18 63 46;
  --c-pillt-blue: 18 63 46;
  --c-pillt-gray: 34 34 34;
  --c-pillt-green: 10 116 51;
  --c-pillt-orange: 143 74 11;
  --c-pillt-purple: 75 4 98;
  --c-pillt-red: 195 29 20;
  --c-pillt-teal: 18 63 46;
  --c-cream: 248 246 235;
  --c-beige: 234 224 203;
  --c-light-pink: 255 209 242;
  --c-pink: 255 160 228;
  --c-hover-dark-green: 2 35 23;
  --c-hover-primary-green: 13 208 117;
  --c-hover-light-green: 153 240 153;
  --c-hover-yellow: 244 223 38;
  --c-hover-white: 239 239 239;
  --c-hover-cream: 234 224 203;
  --c-hover-beige: 216 196 155;
  --c-hover-red: 157 11 3;
  --c-light-red: 255 221 221;
  --c-hover-light-red: 255 202 202;
  --c-hairline: 233 234 235;
  --c-icon-muted: 174 174 174;
  --c-text-on-primary: 18 63 46;
  --c-green-pressed: 13 208 117;
  --c-sage-pressed: 13 208 117;
  --c-yellow-pressed: 244 223 38;
  --c-clear-pressed: 242 242 242;
  --c-carousel-dot: 234 226 208;
  --c-chart-line: 73 232 133;
  --c-chart-line-soft: 73 232 133;
  --c-chart-fill: 202 255 202;
  --c-chart-fill-tint: 202 255 202;
  --c-chart-gold: 255 245 104;
  --c-chart-appreciation: 202 255 202;
  --c-chart-tooltip: 73 232 133;
  --c-teal-pressed: 10 116 51;
  --c-nav-active: 202 255 202;
  --c-disabled-bg: 207 207 207;
  --c-red: 195 29 20;
  --c-msgbox-bg: 201 232 255;
  --c-msgbox-border: 201 232 255;
  --c-msgbox-text: 18 63 46;
  --grove-font-sans: Fraunces;
  --grove-font-inter: Figtree;
  --grove-font-btn: Figtree;
  --grove-font-lindsey: lindsey-signature;
  --grove-font-roboto: Figtree;
}

.\!container{
  width: 100% !important;
}

.container{
  width: 100%;
}

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

  .container{
    max-width: 640px;
  }
}

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

  .container{
    max-width: 768px;
  }
}

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

  .container{
    max-width: 1024px;
  }
}

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

  .container{
    max-width: 1280px;
  }
}

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

  .container{
    max-width: 1536px;
  }
}

/* Poppins */

/* Brand v2 fonts (App Rebrand, objective 25219): Figtree replaces Inter/Plus Jakarta
   Sans, Fraunces replaces the display face. Loaded UNCONDITIONALLY alongside v1 for
   the duration of the flagged period — a CSS variable names a family, it does not
   fetch it, so without this the flag would swap every colour and silently leave all
   typography on the system fallback stack, with no error anywhere.
   
   The axis lists are copied verbatim from grove-ui's catalog layout, which is the
   reference: `SOFT@...,100` is Fraunces' ROUNDED cut, and that axis lives in this
   request rather than in the token — drop it and v2 renders the wrong Fraunces.
   
   Remove the v1 families here in Phase 8, once v1 is retired. */

/**
 * Swiper 12.1.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 24, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-slide,
  .swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

/* CSS Mode */

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
}

/* For Internet Explorer and Edge */

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-slides-offset-before);
  scroll-margin-inline-start: var(--swiper-slides-offset-before);
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child {
  margin-inline-end: var(--swiper-slides-offset-after);
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-slides-offset-before);
  scroll-margin-block-start: var(--swiper-slides-offset-before);
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child {
  margin-block-end: var(--swiper-slides-offset-after);
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */

/* 3D Shadows */

.swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom,
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}

.swiper-button-prev ::slotted(svg),
  .swiper-button-prev svg,
  .swiper-button-next ::slotted(svg),
  .swiper-button-next svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center;
  fill: currentColor;
  pointer-events: none;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
}

.swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-button-prev .swiper-navigation-icon {
  transform: rotate(180deg);
}

.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}

.swiper-horizontal .swiper-button-prev,
  .swiper-horizontal .swiper-button-next,
  .swiper-horizontal ~ .swiper-button-prev,
  .swiper-horizontal ~ .swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  margin-left: 0;
}

.swiper-horizontal .swiper-button-prev,
  .swiper-horizontal ~ .swiper-button-prev,
  .swiper-horizontal.swiper-rtl .swiper-button-next,
  .swiper-horizontal.swiper-rtl ~ .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
}

.swiper-horizontal .swiper-button-next,
  .swiper-horizontal ~ .swiper-button-next,
  .swiper-horizontal.swiper-rtl .swiper-button-prev,
  .swiper-horizontal.swiper-rtl ~ .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}

.swiper-horizontal .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-horizontal .swiper-button-prev .swiper-navigation-icon,
    .swiper-horizontal ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-horizontal ~ .swiper-button-prev .swiper-navigation-icon,
    .swiper-horizontal.swiper-rtl .swiper-button-next ::slotted(.swiper-navigation-icon),
    .swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon,
    .swiper-horizontal.swiper-rtl ~ .swiper-button-next ::slotted(.swiper-navigation-icon),
    .swiper-horizontal.swiper-rtl ~ .swiper-button-next .swiper-navigation-icon {
  transform: rotate(180deg);
}

.swiper-horizontal.swiper-rtl .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon,
    .swiper-horizontal.swiper-rtl ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-horizontal.swiper-rtl ~ .swiper-button-prev .swiper-navigation-icon {
  transform: rotate(0deg);
}

.swiper-vertical .swiper-button-prev,
  .swiper-vertical .swiper-button-next,
  .swiper-vertical ~ .swiper-button-prev,
  .swiper-vertical ~ .swiper-button-next {
  left: var(--swiper-navigation-top-offset, 50%);
  right: auto;
  margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
  margin-top: 0;
}

.swiper-vertical .swiper-button-prev,
  .swiper-vertical ~ .swiper-button-prev {
  top: var(--swiper-navigation-sides-offset, 4px);
  bottom: auto;
}

.swiper-vertical .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-vertical .swiper-button-prev .swiper-navigation-icon,
    .swiper-vertical ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
    .swiper-vertical ~ .swiper-button-prev .swiper-navigation-icon {
  transform: rotate(-90deg);
}

.swiper-vertical .swiper-button-next,
  .swiper-vertical ~ .swiper-button-next {
  bottom: var(--swiper-navigation-sides-offset, 4px);
  top: auto;
}

.swiper-vertical .swiper-button-next ::slotted(.swiper-navigation-icon),
    .swiper-vertical .swiper-button-next .swiper-navigation-icon,
    .swiper-vertical ~ .swiper-button-next ::slotted(.swiper-navigation-icon),
    .swiper-vertical ~ .swiper-button-next .swiper-navigation-icon {
  transform: rotate(90deg);
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
  .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

/* Common Styles */

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

/* Bullets */

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition:
        200ms transform,
        200ms top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
        200ms transform,
        200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}

/* Fraction */

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

/* Progress */

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
  .swiper-pagination-progressbar.swiper-pagination-horizontal,
  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
  .swiper-pagination-progressbar.swiper-pagination-vertical,
  .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

/* Bottom safe-area inset for bottom-anchored modal surfaces.
   Adds the device's bottom safe-area inset on top of an element's base
   bottom padding so action footers/panels clear the native iOS tab bar
   in the Hotwire Native shell. Set the base via the --grove-safe-bottom-base
   custom property (e.g. Tailwind's [--grove-safe-bottom-base:0.75rem]); it
   defaults to 0, so on web/desktop — where env(safe-area-inset-bottom)
   resolves to 0 — the element keeps its original bottom padding. The inset
   is additive and env()-driven only: no native detection or tab-bar
   constant is hardcoded here. */

/* THE BASE MUST NOT INHERIT, and this registration is what stops it.
   A plain custom property inherits down the whole DOM tree, and the `var(…, 0px)`
   fallback below only applies when the property is UNSET — not when some ancestor
   set it. So an ancestor declaring a base silently re-based every descendant that
   opts into this utility without declaring its own: brand v2's layout reserves 79px
   for the mobile bottom bar on the wrapper around the page body, which handed every
   ModalComponent panel inside it 79px of phantom padding (found in review of #288,
   sc-26474, and reproduced at 375px: 79px inside the layout, 0px outside).

   `inherits: false` scopes each declaration to the element that makes it, which is
   how all callers already use it — every one sets the base on the same element that
   carries `.grove-safe-bottom`. `initial-value: 0px` keeps the unset case identical
   to the old fallback. Where @property is unsupported the declaration is ignored and
   behaviour is exactly as before, which is why base-less callers (ModalComponent)
   also declare `0px` explicitly rather than relying on this alone. */

@property --grove-safe-bottom-base {
  syntax: "<length>";

  inherits: false;

  initial-value: 0px;
}

.grove-safe-bottom {
  padding-bottom: calc(var(--grove-safe-bottom-base, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Top safe-area inset for top-anchored full-screen surfaces.
   Adds the device's top safe-area inset on top of an element's base top
   padding so headers and top-anchored controls (e.g. a modal close button)
   clear the notch / Dynamic Island / status bar in the Hotwire Native shell
   (viewport-fit=cover). Set the base via the --grove-safe-top-base custom
   property (e.g. Tailwind's [--grove-safe-top-base:1.5rem]); it defaults to
   0, so on web/desktop — where env(safe-area-inset-top) resolves to 0 — the
   element keeps its original top padding. The inset is additive and
   env()-driven only: no native detection or status-bar constant is
   hardcoded here. */

/* Same guard as --grove-safe-bottom-base above, for the same reason: without it a
   base declared on an ancestor (the layout header's 0.5rem, say) would be inherited by
   any descendant carrying `.grove-safe-top` with no base of its own. Added in 0.114.1
   when ModalComponent started using the utility (sc-28778). */

@property --grove-safe-top-base {
  syntax: "<length>";

  inherits: false;

  initial-value: 0px;
}

.grove-safe-top {
  padding-top: calc(var(--grove-safe-top-base, 0px) + env(safe-area-inset-top, 0px));
}

/* LayoutComponent's real, rendered header height (sc-27664) — published so a
   consumer pinning content under the sticky header (a jump nav, a `scroll-mt`)
   reads the actual number instead of holding its own guess that goes stale
   whenever the header changes (sc-26960, roots#5149). Set on the layout's content
   column (an ancestor of both the header and the page content) via Tailwind's
   `[--grove-header-height:...]`, per brand/breakpoint — see
   LayoutComponent#header_height_classes for the values and where the property is
   declared. Pin against it with e.g. `top-[var(--grove-header-height)]` or
   `top-[calc(var(--grove-header-height)-12px)]`.

   UNLIKE the safe-area bases above, this is left to inherit normally (the
   default `inherits: true`): the whole point is that page content, rendered well
   outside LayoutComponent's own template, can read the value its ancestor set.
   `initial-value: 0px` only matters where no ancestor set it at all, so an
   unguarded consumer degrades to "no offset" rather than an invalid calc(). */

@property --grove-header-height {
  syntax: "<length>";

  inherits: true;

  initial-value: 0px;
}

/* Image banner uniform frame (ImageBannerComponent). Matches the For You
   banner frame that shipped in marketplace (carousel.css): 367x90 mobile,
   759x102 desktop. Height derives from width via aspect-ratio so every banner
   is the same height at a given screen size and scales cleanly; banner art is
   authored at these ratios so object-cover fills the frame with nothing
   cropped. */

.grove-image-banner-frame {
  aspect-ratio: 367 / 90;
}

@media (min-width: 768px) {
  .grove-image-banner-frame {
    aspect-ratio: 759 / 102;
  }
}

/* Tall banner frame variant — a much taller ratio than the default For You frame;
   rendering this art in the default frame crops the copy. Same width-derived-height
   mechanics.

   sc-26880 brought it down from 328x140 / 700x160 (Investing file node 2552-3953) to
   328x120 / 700x136. Both numbers are the sizes the art is now exported at — 1312x480
   and 2800x544 at 4x — taken from the design system's Banners section 652:1602 and
   confirmed against the twelve in-context instances on For You 446:35451.

   Shared by For You, the invest dashboard and Learn, deliberately: one frame, one set
   of art. The art has to be re-exported with any change here, or object-cover crops it. */

.grove-image-banner-frame--tall {
  aspect-ratio: 328 / 120;
}

@media (min-width: 768px) {
  .grove-image-banner-frame--tall {
    aspect-ratio: 700 / 136;
  }
}

/* Grove UI Card border */

.grove-card-border {
  border-width: 1px;
  border-style: solid;
}

@supports (border-width: 0.5px) {
  .grove-card-border {
    border-width: 0.5px;
  }
}

/* Mobile-only card border — removed at md breakpoint */

.grove-card-border-mobile {
  border-width: 1px;
  border-style: solid;
}

@supports (border-width: 0.5px) {
  .grove-card-border-mobile {
    border-width: 0.5px;
  }
}

@media (min-width: 768px) {
  .grove-card-border-mobile {
    border-width: 0;
    border-style: none;
  }
}

/* Grove UI Swiper/Carousel Styles */

:root {
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 30px;
  --swiper-navigation-color: rgb(16, 16, 16);
}

/* Pagination dot colours are scoped to the carousel wrapper (not :root) so a
   single carousel can be themed via inline custom properties on its wrapper
   (see CarouselComponent#pagination_style) without recolouring every other
   carousel in the app. These wrapper-level values are the defaults. */

.grove-carousel-wrapper {
  /* The active dot follows the brand's primary-yellow token (v1 value is the
     old literal #ffcf83, so v1 rendering is unchanged; v2 swaps it with the
     flag). The c-* variables hold space-separated RGB channels. The inactive
     fill goes through the carousel-dot token (v1 value is the old literal
     #d9d9d9, so v1 rendering is unchanged). */
  --swiper-pagination-color: rgb(var(--c-primary-yellow, 255 207 131));
  --swiper-pagination-bullet-inactive-color: rgb(var(--c-carousel-dot, 217 217 217));
  --swiper-pagination-bullet-inactive-opacity: 0.6;
}

/* Brand v2 pagination dots (sc-26577, Figma 2830:18106 / invest comps
   2553:5087): active = a primary-green rounded pill (~22x10), inactive =
   10px carousel-dot circles at full opacity. Scoped to [data-brand="v2"], so
   v1 keeps the yellow 8px dots above; per-carousel inline overrides
   (CarouselComponent#pagination_style) still win over both. */

[data-brand="v2"] .grove-carousel-wrapper {
  --swiper-pagination-color: rgb(var(--c-primary-green, 73 232 133));
  --swiper-pagination-bullet-inactive-opacity: 1;
}

[data-brand="v2"] .grove-carousel-wrapper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
}

[data-brand="v2"] .grove-carousel-wrapper .swiper-pagination-bullet-active {
  width: 22px;
}

.grove-carousel-wrapper .swiper-button-prev,
.grove-carousel-wrapper .swiper-button-next {
  top: 100px;
  top: calc(50% - 30px);
  bottom: auto;
  z-index: 10;
  margin: 0;
  transform: none;
  width: 36px;
  height: 36px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.grove-carousel-wrapper .swiper .swiper-slide {
  opacity: 0;
}

.grove-carousel-wrapper .swiper.swiper-initialized .swiper-slide {
  opacity: 1;
}

.grove-carousel-wrapper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
}

.grove-carousel-wrapper .swiper-button-prev svg,
.grove-carousel-wrapper .swiper-button-next svg {
  width: auto;
  height: auto;
}

.grove-carousel-wrapper .swiper-button-disabled.swiper-button-prev,
.grove-carousel-wrapper .swiper-button-disabled.swiper-button-next {
  opacity: 0 !important;
}

.grove-carousel-wrapper .swiper-slide > div,
.grove-carousel-wrapper .swiper-slide > a,
.grove-carousel-wrapper .swiper-slide > button {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make cards stretch to equal height within carousel slides */

.grove-carousel-wrapper .swiper-slide > div > .h-full,
.grove-carousel-wrapper .swiper-slide > a > .h-full,
.grove-carousel-wrapper .swiper-slide > button > .h-full {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push footer/button to the bottom by growing the text content area */

.grove-carousel-wrapper .swiper-slide > div > .h-full > .flex.flex-col:first-child,
.grove-carousel-wrapper .swiper-slide > a > .h-full > .flex.flex-col:first-child,
.grove-carousel-wrapper .swiper-slide > button > .h-full > .flex.flex-col:first-child {
  flex: 1;
}

.grove-carousel-wrapper .swiper-wrapper {
  align-items: stretch;
}

.grove-carousel-wrapper .swiper-autoheight .swiper-wrapper {
  height: auto !important;
}

.grove-carousel-wrapper .swiper-slide {
  height: auto;
}

.grove-carousel-wrapper .swiper-button-prev {
  left: 12px;
}

.grove-carousel-wrapper .swiper-button-next {
  right: 12px;
  margin-top: 0;
  transform: rotate(0deg) !important;
}

.grove-carousel-wrapper .swiper-button-prev:after,
.grove-carousel-wrapper .swiper-button-next:after {
  content: ''
}

/* Hide scrollbar while preserving scroll functionality */

.grove-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.grove-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media all and (min-width: 768px) {
  .grove-carousel-wrapper:hover .swiper-button-prev,
  .grove-carousel-wrapper:hover .swiper-button-next {
    opacity: 1;
  }
}

/* Overlay arrows are opacity 0 until `.grove-carousel-wrapper:hover` reveals them —
   a reveal touch devices can never trigger. Carousels that opt into mobile
   navigation paint them below the md breakpoint instead, matching the desktop
   hover state (Emily 2026-08-18). Desktop is untouched: at >=768px the hover rule
   above still governs. `swiper-button-disabled` keeps its `!important` opacity 0,
   so an arrow with nowhere to go stays hidden here too. */

@media all and (max-width: 767px) {
  .grove-carousel-wrapper--mobile-arrows .swiper-button-prev,
  .grove-carousel-wrapper--mobile-arrows .swiper-button-next {
    opacity: 1;
  }
}

.wealth-coach-shadow-sm {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.wealth-coach-shadow-lg {
  box-shadow: 0 3px 3px rgba(0,0,0,0.25);
}

/* Small arrows variant — inline with pagination, always visible */

.grove-carousel-small-arrow.swiper-button-prev,
.grove-carousel-small-arrow.swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
  opacity: 1;
  width: 24px;
  height: 24px;
}

.grove-carousel-small-arrow.swiper-button-prev:after,
.grove-carousel-small-arrow.swiper-button-next:after {
  content: '';
  display: none;
}

.grove-carousel-small-arrow.swiper-button-disabled.swiper-button-prev,
.grove-carousel-small-arrow.swiper-button-disabled.swiper-button-next {
  opacity: 0.35 !important;
  cursor: default;
}

/* Toolkit icon tile shadow */

.grove-toolkit-icon-shadow {
  box-shadow:
    0 2.403px 3.604px 0 rgba(72, 29, 4, 0.05),
    0 4px 14.416px 0 rgba(72, 29, 4, 0.12),
    0 7.208px 7.208px 0.601px rgba(255, 255, 255, 0.30) inset,
    0 -7.208px 7.208px 1.802px rgba(188, 126, 68, 0.10) inset;
}

.grove-toolkit-icon-shadow-alt {
  filter: drop-shadow(0px 4px 5px rgba(10, 10, 10, 0.2));
}

/* Cloud Graphic Screen — on load the clouds drop down from above, overshoot
   past their resting spot, then wiggle/bounce a couple of times into place.
   Pure CSS, no JS. */

@keyframes groveCloudsDrop {
  0% {
    transform: translateY(-12vw);
  }

  58% {
    transform: translateY(4vw);
  }

  76% {
    transform: translateY(-2.2vw);
  }

  90% {
    transform: translateY(1vw);
  }

  100% {
    transform: translateY(0);
  }
}

.grove-clouds-drop {
  transform: translateY(-12vw);
  animation: groveCloudsDrop 0.85s cubic-bezier(0.33, 0, 0.3, 1) 0.1s both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .grove-clouds-drop {
    animation: none;
    transform: translateY(0);
  }
}

/* Cloud Graphic Screen — the graphic stays hidden until the clouds have finished
   animating in (~0.95s), then pops/zooms in quickly with a slight overshoot. */

@keyframes groveGraphicPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.grove-graphic-pop {
  opacity: 0;
  transform-origin: center;
  animation: groveGraphicPop 0.4s ease-in-out 0.95s both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .grove-graphic-pop {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}

/* AWB Streak Hit modal — the coin spins on Rooty's fingertip and the paparazzi
   flashes pop. Everything lives inside prefers-reduced-motion: no-preference,
   so under reduced motion the elements simply keep their base styles: the coin
   and both flash bursts rest visible and motionless at their full pose, which
   is the frame's own static composition. */

@media (prefers-reduced-motion: no-preference) {
  /* Basketball-on-finger: the wrapper is the perspective camera AND wobbles
     a few degrees to sell the balance; the inner element does the flat-coin
     rotateY loop. The static design rotation stays on the markup's outermost
     wrapper so it composes with both. */

  .grove-awb-coin-wobble {
    perspective: 300px;
    animation: groveAwbCoinWobble 2.6s ease-in-out infinite alternate;
    will-change: transform;
  }

  .grove-awb-coin-spin {
    transform-style: preserve-3d;
    animation: groveAwbCoinSpin 1.6s linear infinite;
    will-change: transform;
  }

  /* Flash pop: a quick bloom that decays fast, invisible for most of the
     cycle. `backwards` keeps a delayed flash invisible until its first pop.
     The two cameras get different durations AND delays (.grove-awb-flash-late)
     so the stagger never locks into sync — a press scrum, not a metronome. */

  .grove-awb-flash {
    animation: groveAwbFlashPop 2.8s ease-out infinite backwards;
    transform-origin: 70% 20%;
    will-change: transform, opacity;
  }

  .grove-awb-flash-late {
    animation-duration: 3.7s;
    animation-delay: 1.9s;
  }
}

@keyframes groveAwbCoinWobble {
  from {
    transform: rotate(-3.5deg);
  }

  to {
    transform: rotate(3.5deg);
  }
}

@keyframes groveAwbCoinSpin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

@keyframes groveAwbFlashPop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  6% {
    opacity: 1;
    transform: scale(1.15);
  }

  10% {
    transform: scale(1);
  }

  16% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Info popover, brand v2 (sc-27149, Figma Onboarding 1219:3943).
   Two things Tailwind utilities cannot do from the component template.

   1. THE TAIL. Popper positions `[data-popper-arrow]` and writes an inline
      transform onto it, so the visible shape has to live on a pseudo-element or
      Popper's transform and ours fight. Flowbite ships CSS for this arrow, but it
      is the host app's dependency, not grove-ui's — the catalog has flowbite's JS
      and no flowbite CSS, and the arrow rendered 0x0 and transparent. Owning the
      shape here means the tail is grove-ui's regardless of what the host loads.

   2. THE LINKS. Popover content is a caller-supplied block, and some of it is
      Sanity-authored (roots' CMS::Types::InfoPopOverType), so the component can
      never reach the anchors to add a class. The frame underlines them. An
      arbitrary variant (`[&_a]:underline`) is not an option: Tailwind's extractor
      does not emit it from an ERB class list, verified against a clean build.

   Colour comes through the same CSS variable Tailwind's `bg-c-pillb-blue` uses, so
   the tail follows the brand rather than pinning a hex. The fallback channels are
   v2's Light Blue. */

.grove-info-tail,
.grove-info-tail::before {
  width: 0.5rem;
  height: 0.5rem;
  background: inherit;
}

/* THE ARROW BOX ITSELF MUST NOT PAINT. `background: inherit` above lands on the
   element as well as the pseudo, and the element is a direct child of the popover
   root that carries the bubble fill — so the un-rotated 8x8 box painted solid, and
   offset half-outside the bubble it read as a flat rectangular notch rather than a
   point. Popper's and Flowbite's canonical recipe pairs `visibility: hidden` on the
   arrow with `visibility: visible` on the pseudo-element; the second half was
   missing. Found in review of #313.

   This also settles the host-Flowbite question: if a host app does load Flowbite's
   arrow CSS, its own `background: inherit` on this element is neutralised by the
   same `visibility: hidden`, so it cannot reintroduce the square. */

.grove-info-tail {
  visibility: hidden;
}

.grove-info-tail::before {
  content: "";
  position: absolute;
  visibility: visible;
  transform: rotate(45deg);
  background: rgb(var(--c-pillb-blue, 201 232 255));
}

/* THE TAIL SITS ON THE EDGE FACING THE TRIGGER, so it points back at the info
   icon. Popper writes `data-popper-placement` on the popover root and positions the
   arrow along the cross axis; the main-axis offset is the stylesheet's job, and
   without it the tail collects at the element's static position (which is how it
   ended up under the bubble instead of above it).

   Half the tail's 8px, so it overhangs the bubble edge by 4px and reads as a point
   rather than a notch. Every placement callers pass is covered: :bottom and :top on
   the metric squares and the rewards page, :left on the paginated table, :right the
   component default. */

[data-popper-placement^="bottom"] > .grove-info-tail {
  top: -0.25rem;
}

[data-popper-placement^="top"] > .grove-info-tail {
  bottom: -0.25rem;
}

[data-popper-placement^="left"] > .grove-info-tail {
  right: -0.25rem;
}

[data-popper-placement^="right"] > .grove-info-tail {
  left: -0.25rem;
}

/* DARK TEXT IS FORCED ON EVERYTHING INSIDE THE BUBBLE, descendants included.
   The v2 bubble is Light Blue, so any white text inside it is invisible, and the
   component cannot prevent that at the call site: the content is a caller-supplied
   block and some of it is Sanity-authored (roots' CMS::Types::InfoPopOverType), so
   an author can introduce white text without touching code and no lint rule would
   ever see it.

   `!important`, and deliberately. The first version of this relied on
   `.grove-info-body *` out-specifying `.text-white`, which is simply wrong: per
   Selectors L3 the universal selector contributes nothing, so that compound is
   (0,1,0) — a TIE with `.text-white`, resolved only by source order, i.e. by the
   accident of this stylesheet being linked after Tailwind's. Worse, a variant
   utility like `hover:text-white` compiles to (0,2,0) and beats it outright at any
   order. Tailwind v3's `@layer` is a build-time sort that is stripped from the
   emitted CSS, so there is no layer to lean on either. Caught in review of #313.

   The frame draws exactly one text colour in this bubble, so forcing it is the
   design rather than a workaround — and the guarantee has to hold against content
   this component cannot see. */

.grove-info-body,
.grove-info-body * {
  color: rgb(var(--c-gray-800, 34 34 34)) !important;
}

.grove-info-body a {
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* ToastComponent's entrance (sc-29312 follow-up).

   The toast shipped with a dismissal but no arrival: the controller's connect()
   only schedules the fade-out, and the single `transition: opacity` in
   utils/toast_dismissal.js is set at fade-OUT time. So the pill painted at full
   opacity, in its final position, on the very first frame — it did not enter, it
   was simply suddenly there, which reads as a glitch rather than a notification.

   CSS, NOT THE STIMULUS CONTROLLER, and that is the load-bearing choice. A
   JS-driven enter has to render the element in its from-state first and then
   transition it, so a controller that never connects — a failed bundle, a
   consumer that forgot registerGroveUiControllers, Stimulus still booting on a
   slow first paint — leaves the toast stuck at opacity 0, i.e. an invisible
   notification. An animation ends at the element's natural state, so the failure
   mode here is "no animation", never "no toast".

   `both` fill: the from-state applies on the first frame, before the animation
   starts, so there is no flash of the final position. With no delay this only
   matters for that first frame, which is exactly the frame the flash would be on.

   Applied to the SURFACE, not the fixed wrapper. The wrapper is full-bleed and
   pointer-events-none; the pill is the thing a viewer sees move. It also keeps
   this clear of fadeOut(), which sets inline opacity on the wrapper — the two
   never touch the same element, so a dismissal landing mid-enter still fades
   rather than fighting the animation. */

@keyframes grove-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.grove-toast-enter {
  animation: grove-toast-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Motion is the part that is unwelcome here, not the toast. Dropping the
   animation entirely lands the pill at its natural state — visible, in place —
   so a reduced-motion viewer still gets the notification, just without the
   travel. */

@media (prefers-reduced-motion: reduce) {
  .grove-toast-enter {
    animation: none;
  }
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

.pointer-events-auto{
  pointer-events: auto;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.\!relative{
  position: relative !important;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-\[3px\]{
  inset: 3px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-x-6{
  left: 1.5rem;
  right: 1.5rem;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.\!bottom-0{
  bottom: 0px !important;
}

.-bottom-4{
  bottom: -1rem;
}

.-bottom-\[22px\]{
  bottom: -22px;
}

.-top-2{
  top: -0.5rem;
}

.-top-\[151px\]{
  top: -151px;
}

.-top-\[177px\]{
  top: -177px;
}

.-top-\[51px\]{
  top: -51px;
}

.-top-\[98px\]{
  top: -98px;
}

.bottom-0{
  bottom: 0px;
}

.bottom-1{
  bottom: 0.25rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-\[-28px\]{
  bottom: -28px;
}

.bottom-\[-93px\]{
  bottom: -93px;
}

.bottom-\[10\.5px\]{
  bottom: 10.5px;
}

.bottom-full{
  bottom: 100%;
}

.left-0{
  left: 0px;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-2{
  left: 0.5rem;
}

.left-3{
  left: 0.75rem;
}

.left-5{
  left: 1.25rem;
}

.left-6{
  left: 1.5rem;
}

.left-\[-100px\]{
  left: -100px;
}

.left-\[-11\.42\%\]{
  left: -11.42%;
}

.left-\[-120\.03px\]{
  left: -120.03px;
}

.left-\[-21px\]{
  left: -21px;
}

.left-\[-231\.82px\]{
  left: -231.82px;
}

.left-\[-25\.45\%\]{
  left: -25.45%;
}

.left-\[-29\.75px\]{
  left: -29.75px;
}

.left-\[-6px\]{
  left: -6px;
}

.left-\[1\.86px\]{
  left: 1.86px;
}

.left-\[109\.5px\]{
  left: 109.5px;
}

.left-\[10px\]{
  left: 10px;
}

.left-\[11px\]{
  left: 11px;
}

.left-\[122\.73px\]{
  left: 122.73px;
}

.left-\[129\.08px\]{
  left: 129.08px;
}

.left-\[132\.87px\]{
  left: 132.87px;
}

.left-\[16\.4px\]{
  left: 16.4px;
}

.left-\[263\.83px\]{
  left: 263.83px;
}

.left-\[270px\]{
  left: 270px;
}

.left-\[29\.2px\]{
  left: 29.2px;
}

.left-\[29px\]{
  left: 29px;
}

.left-\[2px\]{
  left: 2px;
}

.left-\[31\%\]{
  left: 31%;
}

.left-\[328\.53px\]{
  left: 328.53px;
}

.left-\[35\.48px\]{
  left: 35.48px;
}

.left-\[36px\]{
  left: 36px;
}

.left-\[43\.11px\]{
  left: 43.11px;
}

.left-\[54px\]{
  left: 54px;
}

.left-\[55px\]{
  left: 55px;
}

.left-\[56\.87px\]{
  left: 56.87px;
}

.left-\[60\.18px\]{
  left: 60.18px;
}

.left-\[61px\]{
  left: 61px;
}

.left-\[65\.04px\]{
  left: 65.04px;
}

.left-\[87\.53px\]{
  left: 87.53px;
}

.left-\[96\.76px\]{
  left: 96.76px;
}

.left-\[96px\]{
  left: 96px;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.right-6{
  right: 1.5rem;
}

.right-\[-45px\]{
  right: -45px;
}

.right-\[10\.7px\]{
  right: 10.7px;
}

.right-\[10px\]{
  right: 10px;
}

.right-\[17px\]{
  right: 17px;
}

.right-\[4px\]{
  right: 4px;
}

.right-\[6px\]{
  right: 6px;
}

.top-0{
  top: 0px;
}

.top-1{
  top: 0.25rem;
}

.top-1\/2{
  top: 50%;
}

.top-12{
  top: 3rem;
}

.top-2{
  top: 0.5rem;
}

.top-28{
  top: 7rem;
}

.top-3{
  top: 0.75rem;
}

.top-4{
  top: 1rem;
}

.top-5{
  top: 1.25rem;
}

.top-6{
  top: 1.5rem;
}

.top-\[-125\.52px\]{
  top: -125.52px;
}

.top-\[-13\.74\%\]{
  top: -13.74%;
}

.top-\[-23px\]{
  top: -23px;
}

.top-\[-36px\]{
  top: -36px;
}

.top-\[-4px\]{
  top: -4px;
}

.top-\[-66px\]{
  top: -66px;
}

.top-\[-92px\]{
  top: -92px;
}

.top-\[-99\.84px\]{
  top: -99.84px;
}

.top-\[108px\]{
  top: 108px;
}

.top-\[110\.54px\]{
  top: 110.54px;
}

.top-\[112\.79px\]{
  top: 112.79px;
}

.top-\[116px\]{
  top: 116px;
}

.top-\[118px\]{
  top: 118px;
}

.top-\[141\.63px\]{
  top: 141.63px;
}

.top-\[143px\]{
  top: 143px;
}

.top-\[15px\]{
  top: 15px;
}

.top-\[160\.28px\]{
  top: 160.28px;
}

.top-\[1px\]{
  top: 1px;
}

.top-\[214\.47px\]{
  top: 214.47px;
}

.top-\[24\.56px\]{
  top: 24.56px;
}

.top-\[30\.4px\]{
  top: 30.4px;
}

.top-\[310px\]{
  top: 310px;
}

.top-\[344px\]{
  top: 344px;
}

.top-\[367\.88px\]{
  top: 367.88px;
}

.top-\[36px\]{
  top: 36px;
}

.top-\[387\.87px\]{
  top: 387.87px;
}

.top-\[4\.5px\]{
  top: 4.5px;
}

.top-\[40px\]{
  top: 40px;
}

.top-\[447px\]{
  top: 447px;
}

.top-\[47\.15px\]{
  top: 47.15px;
}

.top-\[474\.85px\]{
  top: 474.85px;
}

.top-\[517px\]{
  top: 517px;
}

.top-\[53px\]{
  top: 53px;
}

.top-\[64\%\]{
  top: 64%;
}

.top-\[65\.3px\]{
  top: 65.3px;
}

.top-\[71\.06px\]{
  top: 71.06px;
}

.top-\[79\.12px\]{
  top: 79.12px;
}

.top-\[79px\]{
  top: 79px;
}

.top-\[80px\]{
  top: 80px;
}

.top-\[85px\]{
  top: 85px;
}

.top-\[88px\]{
  top: 88px;
}

.top-\[calc\(1rem\+env\(safe-area-inset-top\2c 0px\)\)\]{
  top: calc(1rem + env(safe-area-inset-top,0px));
}

.top-\[calc\(47px\+env\(safe-area-inset-top\2c 0px\)\)\]{
  top: calc(47px + env(safe-area-inset-top,0px));
}

.top-\[calc\(var\(--grove-header-height\)\+env\(safe-area-inset-top\2c 0px\)\)\]{
  top: calc(var(--grove-header-height) + env(safe-area-inset-top,0px));
}

.top-\[var\(--grove-header-height\)\]{
  top: var(--grove-header-height);
}

.top-auto{
  top: auto;
}

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

.\!z-\[1100\]{
  z-index: 1100 !important;
}

.z-0{
  z-index: 0;
}

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

.z-20{
  z-index: 20;
}

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

.z-40{
  z-index: 40;
}

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

.z-\[1000\]{
  z-index: 1000;
}

.z-\[1001\]{
  z-index: 1001;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[1100\]{
  z-index: 1100;
}

.z-\[1200\]{
  z-index: 1200;
}

.z-\[1\]{
  z-index: 1;
}

.z-\[2\]{
  z-index: 2;
}

.z-\[41\]{
  z-index: 41;
}

.z-\[42\]{
  z-index: 42;
}

.z-\[999\]{
  z-index: 999;
}

.order-first{
  order: -9999;
}

.order-last{
  order: 9999;
}

.m-4{
  margin: 1rem;
}

.-mx-1\.5{
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}

.-my-1\.5{
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-\[-24px\]{
  margin-left: -24px;
  margin-right: -24px;
}

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

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.-mb-4{
  margin-bottom: -1rem;
}

.-ml-\[31\.7\%\]{
  margin-left: -31.7%;
}

.-mt-\[30\%\]{
  margin-top: -30%;
}

.mb-1{
  margin-bottom: 0.25rem;
}

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

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-7{
  margin-bottom: 1.75rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-\[18px\]{
  margin-bottom: 18px;
}

.mb-\[52px\]{
  margin-bottom: 52px;
}

.mb-\[57px\]{
  margin-bottom: 57px;
}

.me-6{
  margin-inline-end: 1.5rem;
}

.ml-0\.5{
  margin-left: 0.125rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

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

.ml-\[14px\]{
  margin-left: 14px;
}

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

.mr-0{
  margin-right: 0px;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.ms-auto{
  margin-inline-start: auto;
}

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

.mt-0\.5{
  margin-top: 0.125rem;
}

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

.mt-10{
  margin-top: 2.5rem;
}

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

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-\[13px\]{
  margin-top: 13px;
}

.mt-\[17px\]{
  margin-top: 17px;
}

.mt-\[21px\]{
  margin-top: 21px;
}

.mt-\[25px\]{
  margin-top: 25px;
}

.mt-\[26px\]{
  margin-top: 26px;
}

.mt-\[36px\]{
  margin-top: 36px;
}

.mt-\[40px\]{
  margin-top: 40px;
}

.mt-\[46px\]{
  margin-top: 46px;
}

.mt-\[calc\(-1\.5rem-6\.82\%\)\]{
  margin-top: calc(-1.5rem - 6.82%);
}

.mt-auto{
  margin-top: auto;
}

.mt-px{
  margin-top: 1px;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.line-clamp-5{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.line-clamp-6{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.line-clamp-7{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.line-clamp-none{
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}

.block{
  display: block;
}

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

.inline{
  display: inline;
}

.flex{
  display: flex;
}

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

.table{
  display: table;
}

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

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

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-\[2\/1\]{
  aspect-ratio: 2/1;
}

.aspect-\[208\/100\]{
  aspect-ratio: 208/100;
}

.aspect-\[280\/170\]{
  aspect-ratio: 280/170;
}

.aspect-\[393\/176\]{
  aspect-ratio: 393/176;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-10{
  width: 2.5rem;
  height: 2.5rem;
}

.size-16{
  width: 4rem;
  height: 4rem;
}

.size-2{
  width: 0.5rem;
  height: 0.5rem;
}

.size-3{
  width: 0.75rem;
  height: 0.75rem;
}

.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-\[19\.687px\]{
  width: 19.687px;
  height: 19.687px;
}

.size-\[19\.929px\]{
  width: 19.929px;
  height: 19.929px;
}

.size-\[3\.75rem\]{
  width: 3.75rem;
  height: 3.75rem;
}

.size-\[30\.783px\]{
  width: 30.783px;
  height: 30.783px;
}

.\!h-8{
  height: 2rem !important;
}

.h-0{
  height: 0px;
}

.h-0\.5{
  height: 0.125rem;
}

.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-24{
  height: 6rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-32{
  height: 8rem;
}

.h-4{
  height: 1rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[100px\]{
  height: 100px;
}

.h-\[101px\]{
  height: 101px;
}

.h-\[104px\]{
  height: 104px;
}

.h-\[10px\]{
  height: 10px;
}

.h-\[118px\]{
  height: 118px;
}

.h-\[11px\]{
  height: 11px;
}

.h-\[120px\]{
  height: 120px;
}

.h-\[129px\]{
  height: 129px;
}

.h-\[138px\]{
  height: 138px;
}

.h-\[13px\]{
  height: 13px;
}

.h-\[140\.442px\]{
  height: 140.442px;
}

.h-\[14px\]{
  height: 14px;
}

.h-\[15px\]{
  height: 15px;
}

.h-\[171px\]{
  height: 171px;
}

.h-\[17px\]{
  height: 17px;
}

.h-\[180px\]{
  height: 180px;
}

.h-\[187px\]{
  height: 187px;
}

.h-\[18px\]{
  height: 18px;
}

.h-\[20\.2634px\]{
  height: 20.2634px;
}

.h-\[20\.3694px\]{
  height: 20.3694px;
}

.h-\[20px\]{
  height: 20px;
}

.h-\[21px\]{
  height: 21px;
}

.h-\[22px\]{
  height: 22px;
}

.h-\[230px\]{
  height: 230px;
}

.h-\[232\.5px\]{
  height: 232.5px;
}

.h-\[23px\]{
  height: 23px;
}

.h-\[240\.767px\]{
  height: 240.767px;
}

.h-\[260px\]{
  height: 260px;
}

.h-\[269px\]{
  height: 269px;
}

.h-\[26px\]{
  height: 26px;
}

.h-\[277px\]{
  height: 277px;
}

.h-\[291px\]{
  height: 291px;
}

.h-\[298px\]{
  height: 298px;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[3\.75rem\]{
  height: 3.75rem;
}

.h-\[305\.609px\]{
  height: 305.609px;
}

.h-\[307px\]{
  height: 307px;
}

.h-\[30px\]{
  height: 30px;
}

.h-\[328\.643px\]{
  height: 328.643px;
}

.h-\[337px\]{
  height: 337px;
}

.h-\[345\.609px\]{
  height: 345.609px;
}

.h-\[34px\]{
  height: 34px;
}

.h-\[35px\]{
  height: 35px;
}

.h-\[38px\]{
  height: 38px;
}

.h-\[397px\]{
  height: 397px;
}

.h-\[39px\]{
  height: 39px;
}

.h-\[40px\]{
  height: 40px;
}

.h-\[41\.21px\]{
  height: 41.21px;
}

.h-\[41px\]{
  height: 41px;
}

.h-\[42\.624px\]{
  height: 42.624px;
}

.h-\[42px\]{
  height: 42px;
}

.h-\[43px\]{
  height: 43px;
}

.h-\[453px\]{
  height: 453px;
}

.h-\[45px\]{
  height: 45px;
}

.h-\[50px\]{
  height: 50px;
}

.h-\[53px\]{
  height: 53px;
}

.h-\[54px\]{
  height: 54px;
}

.h-\[558px\]{
  height: 558px;
}

.h-\[595px\]{
  height: 595px;
}

.h-\[60px\]{
  height: 60px;
}

.h-\[61px\]{
  height: 61px;
}

.h-\[62px\]{
  height: 62px;
}

.h-\[63px\]{
  height: 63px;
}

.h-\[71px\]{
  height: 71px;
}

.h-\[74px\]{
  height: 74px;
}

.h-\[78px\]{
  height: 78px;
}

.h-\[82\.5061px\]{
  height: 82.5061px;
}

.h-\[850\.204px\]{
  height: 850.204px;
}

.h-\[87px\]{
  height: 87px;
}

.h-\[91px\]{
  height: 91px;
}

.h-\[92px\]{
  height: 92px;
}

.h-\[96px\]{
  height: 96px;
}

.h-\[98px\]{
  height: 98px;
}

.h-\[99px\]{
  height: 99px;
}

.h-\[calc\(100vh-var\(--grove-header-height\)\)\]{
  height: calc(100vh - var(--grove-header-height));
}

.h-\[calc\(100vh-\2026\)\]{
  height: calc(100vh - …);
}

.h-\[calc\(95dvh-env\(safe-area-inset-top\2c 0px\)\)\]{
  height: calc(95dvh - env(safe-area-inset-top,0px));
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-screen{
  height: 100vh;
}

.max-h-\[100dvh\]{
  max-height: 100dvh;
}

.max-h-\[120px\]{
  max-height: 120px;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.max-h-\[calc\(100dvh-env\(safe-area-inset-top\2c 0px\)\)\]{
  max-height: calc(100dvh - env(safe-area-inset-top,0px));
}

.max-h-\[calc\(100vh-80px\)\]{
  max-height: calc(100vh - 80px);
}

.max-h-\[\2026\]{
  max-height: …;
}

.max-h-full{
  max-height: 100%;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-0{
  min-height: 0px;
}

.min-h-16{
  min-height: 4rem;
}

.min-h-\[100vh\]{
  min-height: 100vh;
}

.min-h-\[143px\]{
  min-height: 143px;
}

.min-h-\[53px\]{
  min-height: 53px;
}

.min-h-\[56px\]{
  min-height: 56px;
}

.min-h-\[60px\]{
  min-height: 60px;
}

.min-h-\[63px\]{
  min-height: 63px;
}

.min-h-\[73\.6px\]{
  min-height: 73.6px;
}

.min-h-\[88px\]{
  min-height: 88px;
}

.min-h-\[calc\(100dvh-4rem\)\]{
  min-height: calc(100dvh - 4rem);
}

.min-h-\[calc\(595px\+env\(safe-area-inset-bottom\)\)\]{
  min-height: calc(595px + env(safe-area-inset-bottom));
}

.min-h-dvh{
  min-height: 100dvh;
}

.min-h-full{
  min-height: 100%;
}

.min-h-screen{
  min-height: 100vh;
}

.\!w-auto{
  width: auto !important;
}

.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-24{
  width: 6rem;
}

.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-44{
  width: 11rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[108px\]{
  width: 108px;
}

.w-\[10px\]{
  width: 10px;
}

.w-\[118px\]{
  width: 118px;
}

.w-\[11px\]{
  width: 11px;
}

.w-\[121px\]{
  width: 121px;
}

.w-\[127\.45\%\]{
  width: 127.45%;
}

.w-\[132\.536px\]{
  width: 132.536px;
}

.w-\[13px\]{
  width: 13px;
}

.w-\[144px\]{
  width: 144px;
}

.w-\[149\.87\%\]{
  width: 149.87%;
}

.w-\[14px\]{
  width: 14px;
}

.w-\[150px\]{
  width: 150px;
}

.w-\[15px\]{
  width: 15px;
}

.w-\[162px\]{
  width: 162px;
}

.w-\[163\.1\%\]{
  width: 163.1%;
}

.w-\[174px\]{
  width: 174px;
}

.w-\[179\.36px\]{
  width: 179.36px;
}

.w-\[187px\]{
  width: 187px;
}

.w-\[18px\]{
  width: 18px;
}

.w-\[204px\]{
  width: 204px;
}

.w-\[212px\]{
  width: 212px;
}

.w-\[21px\]{
  width: 21px;
}

.w-\[22\.9843px\]{
  width: 22.9843px;
}

.w-\[225px\]{
  width: 225px;
}

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

.w-\[23\.0018px\]{
  width: 23.0018px;
}

.w-\[23px\]{
  width: 23px;
}

.w-\[247px\]{
  width: 247px;
}

.w-\[254\.981px\]{
  width: 254.981px;
}

.w-\[259px\]{
  width: 259px;
}

.w-\[26px\]{
  width: 26px;
}

.w-\[273px\]{
  width: 273px;
}

.w-\[284\.638px\]{
  width: 284.638px;
}

.w-\[289px\]{
  width: 289px;
}

.w-\[303px\]{
  width: 303px;
}

.w-\[305px\]{
  width: 305px;
}

.w-\[322px\]{
  width: 322px;
}

.w-\[323px\]{
  width: 323px;
}

.w-\[336\.645px\]{
  width: 336.645px;
}

.w-\[34px\]{
  width: 34px;
}

.w-\[37px\]{
  width: 37px;
}

.w-\[39\.575px\]{
  width: 39.575px;
}

.w-\[393px\]{
  width: 393px;
}

.w-\[39px\]{
  width: 39px;
}

.w-\[41\.4\%\]{
  width: 41.4%;
}

.w-\[42px\]{
  width: 42px;
}

.w-\[464\.351px\]{
  width: 464.351px;
}

.w-\[46px\]{
  width: 46px;
}

.w-\[4px\]{
  width: 4px;
}

.w-\[50px\]{
  width: 50px;
}

.w-\[52px\]{
  width: 52px;
}

.w-\[54px\]{
  width: 54px;
}

.w-\[589px\]{
  width: 589px;
}

.w-\[59\.0858px\]{
  width: 59.0858px;
}

.w-\[60px\]{
  width: 60px;
}

.w-\[629px\]{
  width: 629px;
}

.w-\[62px\]{
  width: 62px;
}

.w-\[65px\]{
  width: 65px;
}

.w-\[672px\]{
  width: 672px;
}

.w-\[6px\]{
  width: 6px;
}

.w-\[71px\]{
  width: 71px;
}

.w-\[74px\]{
  width: 74px;
}

.w-\[78px\]{
  width: 78px;
}

.w-\[80px\]{
  width: 80px;
}

.w-\[85px\]{
  width: 85px;
}

.w-\[86px\]{
  width: 86px;
}

.w-\[88px\]{
  width: 88px;
}

.w-\[91\.46px\]{
  width: 91.46px;
}

.w-\[91px\]{
  width: 91px;
}

.w-\[923\.445px\]{
  width: 923.445px;
}

.w-\[92px\]{
  width: 92px;
}

.w-\[calc\(100vw-1rem\)\]{
  width: calc(100vw - 1rem);
}

.w-auto{
  width: auto;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.min-w-0{
  min-width: 0px;
}

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

.min-w-\[3\.75rem\]{
  min-width: 3.75rem;
}

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

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

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

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

.\!max-w-none{
  max-width: none !important;
}

.max-w-36{
  max-width: 9rem;
}

.max-w-40{
  max-width: 10rem;
}

.max-w-48{
  max-width: 12rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-72{
  max-width: 18rem;
}

.max-w-7xl{
  max-width: 80rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-w-full{
  max-width: 100%;
}

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

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

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

.max-w-prose{
  max-width: 65ch;
}

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

.max-w-xl{
  max-width: 36rem;
}

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

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

.flex-none{
  flex: none;
}

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

.shrink{
  flex-shrink: 1;
}

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

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

.grow{
  flex-grow: 1;
}

.basis-1\/4{
  flex-basis: 25%;
}

.basis-3\/4{
  flex-basis: 75%;
}

.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-\[53px\]{
  --tw-translate-x: -53px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.translate-x-full{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full{
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-\[11\.85deg\]{
  --tw-rotate: -11.85deg;
  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-\[17\.67deg\]{
  --tw-rotate: -17.67deg;
  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-\[48\.36deg\]{
  --tw-rotate: -48.36deg;
  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-\[6\.23deg\]{
  --tw-rotate: -6.23deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-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-\[33\.88deg\]{
  --tw-rotate: 33.88deg;
  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-\[6\.31deg\]{
  --tw-rotate: 6.31deg;
  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-\[var\(--toggle-caret-rotation\2c 0deg\)\]{
  --tw-rotate: var(--toggle-caret-rotation,0deg);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-125{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.3\]{
  --tw-scale-x: 1.3;
  --tw-scale-y: 1.3;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

@keyframes bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce{
  animation: bounce 1s infinite;
}

@keyframes movebottomLeft{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 20%;
    left: -15%;
    opacity: 0;
    transform: rotate(-15deg) scale(1.5);
  }
}

.animate-likebottomleft{
  animation: movebottomLeft 3.5s 4.8s forwards;
}

@keyframes movebottomRight{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 40%;
    left: 90%;
    transform: rotate(15deg) scale(1.5);
    opacity: 0;
  }
}

.animate-likebottomright{
  animation: movebottomRight 2.5s 1.7s forwards;
}

@keyframes movedown{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
    transform: rotate(0deg);
  }

  100%{
    top: 20%;
    left: 45%;
    opacity: 0;
    transform: scale(1.5) rotate(350deg);
  }
}

.animate-likedown{
  animation: movedown 3.5s 3.5s forwards;
}

@keyframes moveleft{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 5%;
    left: 10%;
    opacity: 0;
    transform: rotate(-45deg) scale(1.5);
  }
}

.animate-likeleft{
  animation: moveleft 3.5s 1.9s forwards;
}

@keyframes moveright{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 15%;
    left: 97%;
    opacity: 0;
    transform: rotate(45deg) scale(1.5);
  }
}

.animate-likeright{
  animation: moveright 4.5s 1.4s forwards;
}

@keyframes movetopLeft{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 10%;
    left: 10%;
    opacity: 0;
    transform: rotate(-15deg) scale(1.5);
  }
}

.animate-liketopleft{
  animation: movetopLeft 4.5s 3.4s forwards;
}

@keyframes movetopRight{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
  }

  100%{
    top: 10%;
    left: 80%;
    transform: rotate(15deg) scale(1.0);
    opacity: 0;
  }
}

.animate-liketopright{
  animation: movetopRight 4.5s 1s forwards;
}

@keyframes moveup{
  0%{
    top: 64%;
    left: 31%;
    opacity: 0.9;
    transform: scale(1.5);
  }

  100%{
    top: 0%;
    left: 32%;
    opacity: 0;
  }
}

.animate-likeup{
  animation: moveup 4.5s 0.2s forwards;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

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

.cursor-pointer{
  cursor: pointer;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize{
  resize: both;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

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

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

.grid-rows-\[0fr\]{
  grid-template-rows: 0fr;
}

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

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

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

.flex-nowrap{
  flex-wrap: nowrap;
}

.place-items-center{
  place-items: center;
}

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

.\!items-end{
  align-items: flex-end !important;
}

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

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

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

.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-7{
  gap: 1.75rem;
}

.gap-8{
  gap: 2rem;
}

.gap-\[14px\]{
  gap: 14px;
}

.gap-\[18px\]{
  gap: 18px;
}

.gap-\[21px\]{
  gap: 21px;
}

.gap-\[5px\]{
  gap: 5px;
}

.gap-\[7px\]{
  gap: 7px;
}

.gap-\[9px\]{
  gap: 9px;
}

.gap-px{
  gap: 1px;
}

.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-y-0\.5{
  row-gap: 0.125rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-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-c-gray-150 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(var(--c-gray-150) / var(--tw-divide-opacity, 1));
}

.divide-c-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(var(--c-gray-200) / var(--tw-divide-opacity, 1));
}

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

.self-stretch{
  align-self: stretch;
}

.justify-self-start{
  justify-self: start;
}

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

.text-ellipsis{
  text-overflow: ellipsis;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre{
  white-space: pre;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.text-balance{
  text-wrap: balance;
}

.break-words{
  overflow-wrap: break-word;
}

.\!rounded-full{
  border-radius: 9999px !important;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[11px\]{
  border-radius: 11px;
}

.rounded-\[14px\]{
  border-radius: 14px;
}

.rounded-\[20px\]{
  border-radius: 20px;
}

.rounded-\[22px\]{
  border-radius: 22px;
}

.rounded-\[29\.7px\]{
  border-radius: 29.7px;
}

.rounded-\[4px\]{
  border-radius: 4px;
}

.rounded-\[50\%\]{
  border-radius: 50%;
}

.rounded-full{
  border-radius: 9999px;
}

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

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

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-b-\[20px\]{
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.rounded-b-full{
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

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

.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-3xl{
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-t-\[12px\]{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.rounded-t-\[20px\]{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.rounded-t-full{
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}

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

.rounded-t-none{
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-bl-lg{
  border-bottom-left-radius: 0.5rem;
}

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

.rounded-br-none{
  border-bottom-right-radius: 0px;
}

.rounded-tl-2xl{
  border-top-left-radius: 1rem;
}

.rounded-tl-lg{
  border-top-left-radius: 0.5rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-\[0\.864px\]{
  border-width: 0.864px;
}

.border-\[2\.5px\]{
  border-width: 2.5px;
}

.border-\[3px\]{
  border-width: 3px;
}

.border-\[5px\]{
  border-width: 5px;
}

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

.border-b-\[3px\]{
  border-bottom-width: 3px;
}

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

.border-t{
  border-top-width: 1px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-none{
  border-style: none;
}

.\!border-transparent{
  border-color: transparent !important;
}

.border-c-gray-150{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-gray-150) / var(--tw-border-opacity, 1));
}

.border-c-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-gray-200) / var(--tw-border-opacity, 1));
}

.border-c-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-gray-300) / var(--tw-border-opacity, 1));
}

.border-c-green-100{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-green-100) / var(--tw-border-opacity, 1));
}

.border-c-green-400{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-green-400) / var(--tw-border-opacity, 1));
}

.border-c-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-green-500) / var(--tw-border-opacity, 1));
}

.border-c-green-700{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-green-700) / var(--tw-border-opacity, 1));
}

.border-c-msgbox-border{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-msgbox-border) / var(--tw-border-opacity, 1));
}

.border-c-nav-active{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-nav-active) / var(--tw-border-opacity, 1));
}

.border-c-pillb-gray{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-pillb-gray) / var(--tw-border-opacity, 1));
}

.border-c-pillb-green{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-pillb-green) / var(--tw-border-opacity, 1));
}

.border-c-pink{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-pink) / var(--tw-border-opacity, 1));
}

.border-c-primary-green{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-primary-green) / var(--tw-border-opacity, 1));
}

.border-c-primary-white{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-primary-white) / var(--tw-border-opacity, 1));
}

.border-c-primary-yellow{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-primary-yellow) / var(--tw-border-opacity, 1));
}

.border-c-sage-500{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-sage-500) / var(--tw-border-opacity, 1));
}

.border-c-sage-600{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-sage-600) / var(--tw-border-opacity, 1));
}

.border-c-teal-500{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-teal-500) / var(--tw-border-opacity, 1));
}

.border-c-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-yellow-500) / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-400{
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

.border-transparent{
  border-color: transparent;
}

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

.\!border-b-transparent{
  border-bottom-color: transparent !important;
}

.\!bg-c-cream{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-cream) / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-c-green-700{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-c-pillb-gray\/40{
  background-color: rgb(var(--c-pillb-gray) / 0.4) !important;
}

.\!bg-c-pillb-red{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-pillb-red) / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-c-primary-green{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--c-primary-green) / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#E0EEFB\]{
  --tw-bg-opacity: 1;
  background-color: rgb(224 238 251 / var(--tw-bg-opacity, 1));
}

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

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/\[0\.41\]{
  background-color: rgb(0 0 0 / 0.41);
}

.bg-c-beige{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-beige) / var(--tw-bg-opacity, 1));
}

.bg-c-cream{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-cream) / var(--tw-bg-opacity, 1));
}

.bg-c-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-100) / var(--tw-bg-opacity, 1));
}

.bg-c-gray-150{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-150) / var(--tw-bg-opacity, 1));
}

.bg-c-gray-150\/40{
  background-color: rgb(var(--c-gray-150) / 0.4);
}

.bg-c-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-200) / var(--tw-bg-opacity, 1));
}

.bg-c-gray-200\/50{
  background-color: rgb(var(--c-gray-200) / 0.5);
}

.bg-c-gray-600\/50{
  background-color: rgb(var(--c-gray-600) / 0.5);
}

.bg-c-gray-700\/80{
  background-color: rgb(var(--c-gray-700) / 0.8);
}

.bg-c-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-800) / var(--tw-bg-opacity, 1));
}

.bg-c-gray-800\/60{
  background-color: rgb(var(--c-gray-800) / 0.6);
}

.bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

.bg-c-green-300{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-300) / var(--tw-bg-opacity, 1));
}

.bg-c-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-400) / var(--tw-bg-opacity, 1));
}

.bg-c-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-50) / var(--tw-bg-opacity, 1));
}

.bg-c-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-500) / var(--tw-bg-opacity, 1));
}

.bg-c-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1));
}

.bg-c-hairline{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hairline) / var(--tw-bg-opacity, 1));
}

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

.bg-c-light-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-light-pink) / var(--tw-bg-opacity, 1));
}

.bg-c-msgbox-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-msgbox-bg) / var(--tw-bg-opacity, 1));
}

.bg-c-nav-active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-nav-active) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-aqua{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-aqua) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-blue{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-blue) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-gray{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-gray) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-green{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-green) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-orange{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-orange) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-purple{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-purple) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-red{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-red) / var(--tw-bg-opacity, 1));
}

.bg-c-pillb-teal{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-teal) / var(--tw-bg-opacity, 1));
}

.bg-c-pillt-red{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillt-red) / var(--tw-bg-opacity, 1));
}

.bg-c-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pink) / var(--tw-bg-opacity, 1));
}

.bg-c-primary-green{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-green) / var(--tw-bg-opacity, 1));
}

.bg-c-primary-teal{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-teal) / var(--tw-bg-opacity, 1));
}

.bg-c-primary-white{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-white) / var(--tw-bg-opacity, 1));
}

.bg-c-primary-white\/20{
  background-color: rgb(var(--c-primary-white) / 0.2);
}

.bg-c-primary-white\/90{
  background-color: rgb(var(--c-primary-white) / 0.9);
}

.bg-c-primary-yellow{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-yellow) / var(--tw-bg-opacity, 1));
}

.bg-c-red{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-red) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-100) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-200{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-200) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-400{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-400) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-500{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-500) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-600{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-600) / var(--tw-bg-opacity, 1));
}

.bg-c-sage-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-700) / var(--tw-bg-opacity, 1));
}

.bg-c-teal-200{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-teal-200) / var(--tw-bg-opacity, 1));
}

.bg-c-teal-400{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-teal-400) / var(--tw-bg-opacity, 1));
}

.bg-c-teal-500{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-teal-500) / var(--tw-bg-opacity, 1));
}

.bg-c-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-yellow-100) / var(--tw-bg-opacity, 1));
}

.bg-c-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-yellow-500) / var(--tw-bg-opacity, 1));
}

.bg-c-yellow-600{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-yellow-600) / var(--tw-bg-opacity, 1));
}

.bg-c-yellow-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-yellow-700) / var(--tw-bg-opacity, 1));
}

.bg-current{
  background-color: currentColor;
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

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

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

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

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

.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

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

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-c-cream{
  --tw-gradient-from: rgb(var(--c-cream) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-cream) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-c-primary-white{
  --tw-gradient-from: rgb(var(--c-primary-white) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-primary-white) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-c-primary-white\/0{
  --tw-gradient-from: rgb(var(--c-primary-white) / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-primary-white) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-c-primary-yellow{
  --tw-gradient-from: rgb(var(--c-primary-yellow) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-primary-yellow) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-c-primary-white{
  --tw-gradient-to: rgb(var(--c-primary-white) / 1) var(--tw-gradient-to-position);
}

.to-c-yellow-200{
  --tw-gradient-to: rgb(var(--c-yellow-200) / 1) var(--tw-gradient-to-position);
}

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

.bg-no-repeat{
  background-repeat: no-repeat;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center{
  -o-object-position: center;
     object-position: center;
}

.p-0{
  padding: 0px;
}

.p-1{
  padding: 0.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-16{
  padding: 4rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

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

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

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

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

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

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

.px-\[18px\]{
  padding-left: 18px;
  padding-right: 18px;
}

.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-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

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

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

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

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

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

.pb-0{
  padding-bottom: 0px;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-16{
  padding-bottom: 4rem;
}

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

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

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

.pb-4{
  padding-bottom: 1rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-7{
  padding-bottom: 1.75rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pb-\[11px\]{
  padding-bottom: 11px;
}

.pb-\[18px\]{
  padding-bottom: 18px;
}

.pb-\[calc\(1rem\+env\(\.\.\.\)\)\]{
  padding-bottom: calc(1rem + env(...));
}

.pb-\[calc\(1rem\+env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.pe-4{
  padding-inline-end: 1rem;
}

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

.pl-0\.5{
  padding-left: 0.125rem;
}

.pl-1\.5{
  padding-left: 0.375rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-16{
  padding-left: 4rem;
}

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

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

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

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

.pl-5{
  padding-left: 1.25rem;
}

.pl-\[22px\]{
  padding-left: 22px;
}

.pr-0{
  padding-right: 0px;
}

.pr-12{
  padding-right: 3rem;
}

.pr-14{
  padding-right: 3.5rem;
}

.pr-16{
  padding-right: 4rem;
}

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

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

.pr-32{
  padding-right: 8rem;
}

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

.ps-6{
  padding-inline-start: 1.5rem;
}

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

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-1\.5{
  padding-top: 0.375rem;
}

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

.pt-14{
  padding-top: 3.5rem;
}

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

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-\[44px\]{
  padding-top: 44px;
}

.pt-\[60px\]{
  padding-top: 60px;
}

.pt-\[calc\(0\.5rem\+env\(safe-area-inset-top\2c 0px\)\)\]{
  padding-top: calc(0.5rem + env(safe-area-inset-top,0px));
}

.pt-\[calc\(1\.5rem\+env\(safe-area-inset-top\)\)\]{
  padding-top: calc(1.5rem + env(safe-area-inset-top));
}

.pt-\[calc\(1rem\+env\(safe-area-inset-top\)\)\]{
  padding-top: calc(1rem + env(safe-area-inset-top));
}

.pt-\[calc\(1rem\+env\(safe-area-inset-top\2c 0px\)\)\]{
  padding-top: calc(1rem + env(safe-area-inset-top,0px));
}

.pt-\[calc\(\2026\+env\(safe-area-inset-top\)\)\]{
  padding-top: calc(…+env(safe-area-inset-top));
}

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

.text-center{
  text-align: center;
}

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

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

.font-inter{
  font-family: var(--grove-font-inter, Inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-poppins{
  font-family: Poppins, sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-sans{
  font-family: var(--grove-font-sans, "Plus Jakarta Sans"), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

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

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

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

.text-2xs{
  font-size: 0.625rem;
}

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

.text-3xs{
  font-size: 0.5rem;
}

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

.text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[14\.775px\]{
  font-size: 14.775px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[16px\]{
  font-size: 16px;
}

.text-\[18px\]{
  font-size: 18px;
}

.text-\[19px\]{
  font-size: 19px;
}

.text-\[20px\]{
  font-size: 20px;
}

.text-\[22px\]{
  font-size: 22px;
}

.text-\[24px\]{
  font-size: 24px;
}

.text-\[28px\]{
  font-size: 28px;
}

.text-\[32px\]{
  font-size: 32px;
}

.text-\[90px\]{
  font-size: 90px;
}

.text-\[9px\]{
  font-size: 9px;
}

.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-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

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

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

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

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-4{
  line-height: 1rem;
}

.leading-5{
  line-height: 1.25rem;
}

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

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

.leading-\[1\.15\]{
  line-height: 1.15;
}

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

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

.leading-\[1\.3\]{
  line-height: 1.3;
}

.leading-\[13px\]{
  line-height: 13px;
}

.leading-\[17px\]{
  line-height: 17px;
}

.leading-\[18\.9px\]{
  line-height: 18.9px;
}

.leading-\[18px\]{
  line-height: 18px;
}

.leading-\[19px\]{
  line-height: 19px;
}

.leading-\[22px\]{
  line-height: 22px;
}

.leading-\[32\.046px\]{
  line-height: 32.046px;
}

.leading-none{
  line-height: 1;
}

.leading-normal{
  line-height: 1.5;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[-0\.01em\]{
  letter-spacing: -0.01em;
}

.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}

.tracking-\[-0\.03em\]{
  letter-spacing: -0.03em;
}

.tracking-\[-0\.28px\]{
  letter-spacing: -0.28px;
}

.tracking-\[-0\.32px\]{
  letter-spacing: -0.32px;
}

.tracking-\[-0\.3547px\]{
  letter-spacing: -0.3547px;
}

.tracking-\[-0\.35px\]{
  letter-spacing: -0.35px;
}

.tracking-\[-0\.36px\]{
  letter-spacing: -0.36px;
}

.tracking-\[-0\.42px\]{
  letter-spacing: -0.42px;
}

.tracking-\[-0\.48px\]{
  letter-spacing: -0.48px;
}

.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-c-gray-700{
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-gray-700) / var(--tw-text-opacity, 1)) !important;
}

.\!text-c-green-700{
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-green-700) / var(--tw-text-opacity, 1)) !important;
}

.\!text-c-primary-white{
  --tw-text-opacity: 1 !important;
  color: rgb(var(--c-primary-white) / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#05505C\]{
  --tw-text-opacity: 1;
  color: rgb(5 80 92 / var(--tw-text-opacity, 1));
}

.text-\[\#197c5e\]{
  --tw-text-opacity: 1;
  color: rgb(25 124 94 / var(--tw-text-opacity, 1));
}

.text-\[\#343A40\]{
  --tw-text-opacity: 1;
  color: rgb(52 58 64 / var(--tw-text-opacity, 1));
}

.text-\[\#4B87B7\]{
  --tw-text-opacity: 1;
  color: rgb(75 135 183 / var(--tw-text-opacity, 1));
}

.text-\[\#6C757D\]{
  --tw-text-opacity: 1;
  color: rgb(108 117 125 / var(--tw-text-opacity, 1));
}

.text-\[\#6c757d\]{
  --tw-text-opacity: 1;
  color: rgb(108 117 125 / var(--tw-text-opacity, 1));
}

.text-\[\#feeede\]{
  --tw-text-opacity: 1;
  color: rgb(254 238 222 / var(--tw-text-opacity, 1));
}

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

.text-c-cream{
  --tw-text-opacity: 1;
  color: rgb(var(--c-cream) / var(--tw-text-opacity, 1));
}

.text-c-gray-300{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-300) / var(--tw-text-opacity, 1));
}

.text-c-gray-400{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-400) / var(--tw-text-opacity, 1));
}

.text-c-gray-500{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-500) / var(--tw-text-opacity, 1));
}

.text-c-gray-600{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-600) / var(--tw-text-opacity, 1));
}

.text-c-gray-700{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-700) / var(--tw-text-opacity, 1));
}

.text-c-gray-800{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-800) / var(--tw-text-opacity, 1));
}

.text-c-green-100{
  --tw-text-opacity: 1;
  color: rgb(var(--c-green-100) / var(--tw-text-opacity, 1));
}

.text-c-green-400{
  --tw-text-opacity: 1;
  color: rgb(var(--c-green-400) / var(--tw-text-opacity, 1));
}

.text-c-green-500{
  --tw-text-opacity: 1;
  color: rgb(var(--c-green-500) / var(--tw-text-opacity, 1));
}

.text-c-green-700{
  --tw-text-opacity: 1;
  color: rgb(var(--c-green-700) / var(--tw-text-opacity, 1));
}

.text-c-green-800{
  --tw-text-opacity: 1;
  color: rgb(var(--c-green-800) / var(--tw-text-opacity, 1));
}

.text-c-icon-muted{
  --tw-text-opacity: 1;
  color: rgb(var(--c-icon-muted) / var(--tw-text-opacity, 1));
}

.text-c-msgbox-text{
  --tw-text-opacity: 1;
  color: rgb(var(--c-msgbox-text) / var(--tw-text-opacity, 1));
}

.text-c-pillt-aqua{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-aqua) / var(--tw-text-opacity, 1));
}

.text-c-pillt-blue{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-blue) / var(--tw-text-opacity, 1));
}

.text-c-pillt-gray{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-gray) / var(--tw-text-opacity, 1));
}

.text-c-pillt-green{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-green) / var(--tw-text-opacity, 1));
}

.text-c-pillt-orange{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-orange) / var(--tw-text-opacity, 1));
}

.text-c-pillt-purple{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-purple) / var(--tw-text-opacity, 1));
}

.text-c-pillt-red{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-red) / var(--tw-text-opacity, 1));
}

.text-c-pillt-teal{
  --tw-text-opacity: 1;
  color: rgb(var(--c-pillt-teal) / var(--tw-text-opacity, 1));
}

.text-c-primary-green{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-green) / var(--tw-text-opacity, 1));
}

.text-c-primary-teal{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-teal) / var(--tw-text-opacity, 1));
}

.text-c-primary-white{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-white) / var(--tw-text-opacity, 1));
}

.text-c-primary-white\/90{
  color: rgb(var(--c-primary-white) / 0.9);
}

.text-c-primary-yellow{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-yellow) / var(--tw-text-opacity, 1));
}

.text-c-red{
  --tw-text-opacity: 1;
  color: rgb(var(--c-red) / var(--tw-text-opacity, 1));
}

.text-c-sage-300{
  --tw-text-opacity: 1;
  color: rgb(var(--c-sage-300) / var(--tw-text-opacity, 1));
}

.text-c-sage-500{
  --tw-text-opacity: 1;
  color: rgb(var(--c-sage-500) / var(--tw-text-opacity, 1));
}

.text-c-sage-600{
  --tw-text-opacity: 1;
  color: rgb(var(--c-sage-600) / var(--tw-text-opacity, 1));
}

.text-c-sage-700{
  --tw-text-opacity: 1;
  color: rgb(var(--c-sage-700) / var(--tw-text-opacity, 1));
}

.text-c-sage-800{
  --tw-text-opacity: 1;
  color: rgb(var(--c-sage-800) / var(--tw-text-opacity, 1));
}

.text-c-text-on-primary{
  --tw-text-opacity: 1;
  color: rgb(var(--c-text-on-primary) / var(--tw-text-opacity, 1));
}

.text-c-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(var(--c-yellow-500) / var(--tw-text-opacity, 1));
}

.text-c-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(var(--c-yellow-600) / var(--tw-text-opacity, 1));
}

.text-c-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(var(--c-yellow-700) / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-inherit{
  color: inherit;
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

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

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

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

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

.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

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

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

.underline-offset-2{
  text-underline-offset: 2px;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-c-gray-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-gray-400) / var(--tw-placeholder-opacity, 1));
}

.placeholder-c-gray-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-gray-400) / var(--tw-placeholder-opacity, 1));
}

.caret-c-green-700{
  caret-color: rgb(var(--c-green-700) / 1);
}

.accent-c-green-700{
  accent-color: rgb(var(--c-green-700) / 1);
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-80{
  opacity: 0.8;
}

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

.shadow-\[0_0_6px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]{
  --tw-shadow: 0 0 6px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 0 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-\[0px_2px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{
  --tw-shadow: 0px 2px 10px 0px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0px 2px 10px 0px 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-\[0px_2px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\]{
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 2px 6px 0px 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-\[0px_2px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0px 2px 6px 0px 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-\[0px_3px_9px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]{
  --tw-shadow: 0px 3px 9px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 3px 9px 0px 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-\[0px_4px_20px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{
  --tw-shadow: 0px 4px 20px 0px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0px 4px 20px 0px 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-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);
}

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

.outline{
  outline-style: solid;
}

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

.ring-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-4{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[2\.5px\]{
  --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(2.5px + 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-c-cream{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-cream) / var(--tw-ring-opacity, 1));
}

.ring-c-primary-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-primary-white) / var(--tw-ring-opacity, 1));
}

.ring-c-red{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-red) / var(--tw-ring-opacity, 1));
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

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

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

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

.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-\[grid-template-rows\]{
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[height\]{
  transition-property: height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[max-height\2c margin\]{
  transition-property: max-height,margin;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-\[450ms\]{
  transition-duration: 450ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.will-change-transform{
  will-change: transform;
}

.\[--grove-header-height\:0px\]{
  --grove-header-height: 0px;
}

.\[--grove-header-height\:56px\]{
  --grove-header-height: 56px;
}

.\[--grove-safe-bottom-base\:0\.75rem\]{
  --grove-safe-bottom-base: 0.75rem;
}

.\[--grove-safe-bottom-base\:0px\]{
  --grove-safe-bottom-base: 0px;
}

.\[--grove-safe-bottom-base\:1\.5rem\]{
  --grove-safe-bottom-base: 1.5rem;
}

.\[--grove-safe-bottom-base\:17px\]{
  --grove-safe-bottom-base: 17px;
}

.\[--grove-safe-bottom-base\:1rem\]{
  --grove-safe-bottom-base: 1rem;
}

.\[--grove-safe-bottom-base\:2rem\]{
  --grove-safe-bottom-base: 2rem;
}

.\[--grove-safe-bottom-base\:79px\]{
  --grove-safe-bottom-base: 79px;
}

.\[--grove-safe-bottom-base\:8rem\]{
  --grove-safe-bottom-base: 8rem;
}

.\[--grove-safe-bottom-base\:95px\]{
  --grove-safe-bottom-base: 95px;
}

.\[--grove-safe-top-base\:0\.5rem\]{
  --grove-safe-top-base: 0.5rem;
}

.\[--grove-safe-top-base\:0px\]{
  --grove-safe-top-base: 0px;
}

.\[--grove-safe-top-base\:1\.5rem\]{
  --grove-safe-top-base: 1.5rem;
}

.\[--grove-safe-top-base\:1rem\]{
  --grove-safe-top-base: 1rem;
}

.\[clip-path\:polygon\(0_0\2c 100\%_0\2c 100\%_100\%\)\]{
  clip-path: polygon(0 0,100% 0,100% 100%);
}

.\[corner-shape\:squircle\]{
  corner-shape: squircle;
}

.\[font-variation-settings\:\'SOFT\'_100\2c \'WONK\'_1\2c \'opsz\'_9\]{
  font-variation-settings: 'SOFT' 100,'WONK' 1,'opsz' 9;
}

.\[font-variation-settings\:\'opsz\'_9\]{
  font-variation-settings: 'opsz' 9;
}

/***********************************************************************************************************************
  This styles rails wrapping of input with validation errors in <div class='field_with_errors'/>
  B/c styles are wrapped, it can break layout. Assigning w-full seems to fix the often shrunk elements.
  Alternative solution is to remove wrapping using ActionView::Base.field_error_proc

  @see https://github.com/baoagency/polaris_view_components/pull/188
  @see https://stackoverflow.com/questions/12252286/how-to-change-the-default-rails-error-div-field-with-errors
*/

.field_with_errors{
  width: 100%;
}

.field_with_errors label {
}

.field_with_errors input:not(.silent), .field_with_errors textarea:not(.silent), .field_with_errors select:not(.silent){
  width: 100%;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

/**********************************************************************************************************************/

input::-moz-placeholder {
}

input::placeholder {
}

input:focus::-moz-placeholder {
  opacity: 0;
}

input:focus::placeholder {
  opacity: 0;
}

/***********************************************************************************************************************
  Two-factor (onboarding_v3) paper-plane flight animation.

  The plane follows the dashed trail (Line 262) via `offset-path`, while the dotted trail itself is revealed
  progressively by animating the `stroke-dashoffset` of a white mask path drawn over it. Both animations share the
  same duration and easing and are arc-length parametrized, so the dots appear exactly as the plane passes over them.
*/

.two-factor-plane {
  offset-path: path("M0.166663 74.2685C9.9935 72.6083 62.5183 22.1304 58.0142 8.15885C53.5102 -5.81274 25.6956 2.35102 33.268 18.1681C40.8405 33.9851 92.3382 25.2606 92.3382 15.0977");
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: two-factor-plane-fly 2.4s ease-in-out forwards;
}

@keyframes two-factor-plane-fly {
  to {
    offset-distance: 100%;
  }
}

.two-factor-trail-mask-path {
  animation: two-factor-trail-draw 2.4s ease-in-out forwards;
}

@keyframes two-factor-trail-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .two-factor-plane {
    animation: none;
    offset-distance: 100%;
  }

  .two-factor-trail-mask-path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/**********************************************************************************************************************/

/***********************************************************************************************************************
  Splash page (sign in / sign up) intro.

  Two states, from design's Onboarding/Loading and Onboarding/SignIn frames:

    HOLD  the flower centred in the viewport, wordmark and tagline below it, NO form.
    REST  wordmark and tagline at the top, the form below, no flower — i.e. the page exactly as it is without an intro.

  The intro moves between them: the hero rises into place while the flower fades off the top edge, and the form fades in
  behind it. TWO LAYERS, not one rigid block. Four earlier attempts all failed on that single point, in different ways:
    * a full-screen cover lifting away over an identical wordmark underneath — read as a wipe;
    * collapsing the flower's wrapper height — crops it from the bottom and pins its top, the opposite motion;
    * translating the whole column as one piece — the form then either rode along visibly through the hold, or, with a
      distance big enough to hide it, swept in from the very bottom of the screen;
    * top-aligning the page to make the arithmetic easier — wrong at rest on desktop, which must stay centred.

  `--splash-intro-travel` is MEASURED at load (see the inline head script): it is how far the column must start below its
  resting place for the FLOWER to be centred. It depends on viewport height and the hero's own height, so no constant
  works — every fixed value tried was wrong at some viewport.

  Timing measured off design's reference recording (60fps extract): static until ~850ms; the flower still full opacity at
  1000ms but already clipping off the top edge; ~50% at 1050ms, gone by ~1150ms; the column crossing its resting point
  and peaking a few px past it at ~1470ms; settled by ~1970ms.
*/

/* Paint the document canvas green whenever a splash screen is mounted. The screen div sizes itself with `min-h-dvh`,
   and inside the native apps' webviews the viewport units resolve to the window MINUS the OS safe areas (status bar /
   home indicator) while the webview itself is laid out full-bleed under them — so the div comes up ~96pt short and the
   document background shows through as white bands. The root element's background paints the entire canvas, safe areas
   included, so any such shortfall stays green. `:has()` is iOS 15.4+ / Chromium 105+; older engines just keep the white
   shortfall they have today. */

html:has([data-splash-screen]){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-green) / var(--tw-bg-opacity, 1));
}

/* Hides the STACK, not the screen. The screen carries the in-layout background (the canvas paint above exists for the
   safe-area shortfall, not to stand in for it), so hiding it blanked the viewport, and this gate is bounded by a webfont fetch rather than a
   frame: it clears on document.fonts.ready, and Fraunces/Figtree load with display=swap, which is exactly what lets
   first paint happen before the files land. Hiding the screen therefore gave a cold first visit a white viewport for the
   length of the download, to precisely the visitors the intro exists for. Layout is preserved under visibility: hidden,
   so the measurement still reads correctly against the stack. */

[data-splash-intro="measuring"] [data-splash-stack] {
  visibility: hidden;
}

[data-splash-intro="playing"] [data-splash-stack] {
  animation: splash-intro-rise 1100ms 850ms both;
}

[data-splash-intro="playing"] [data-splash-flower] {
  animation: splash-intro-flower-out 1100ms cubic-bezier(0.4, 0, 0.6, 1) 850ms both;
}

/* The hero SCALES down into place as it rises — it is ~1.18x larger during the hold. Confirmed twice: the comps have
   the Loading wordmark at 258px against SignIn's 218px (and the tagline in the same ratio, at both breakpoints), and in
   the reference recording the wordmark's ink measures 264px wide at 1050ms falling to 242px by 1450ms. Missing this is
   why no amount of tuning the travel distance ever made the movement feel right.

   `scale` is visual only, so the form below never moves with it — which is what keeps the resting layout untouched. */

/* Scale origins are UNSCOPED, deliberately. Two reasons:

   1. They scale the pair away from the seam between flower and wordmark. Left at their own
      centres, both elements grow while the layout gap between them stays put, so the hold
      reads tighter than the comp. Anchored, the visual gap is exactly the flower's
      margin-bottom at any scale — which is why that margin can be set straight from the
      comp (57px mobile / 72px desktop).

   2. The inline script measures the hold geometry while the state is still "measuring". If
      these were scoped to "playing" they would not apply during that measurement, the
      flower would scale about its centre instead of its bottom, and every measurement
      would be out by height x (scale - 1) / 2 — about 21px at 1.18. That is a silent
      20px error in the flower's resting position, which is exactly the bug this fixed. */

[data-splash-flower] {
  transform-origin: center bottom;
}

/* No `data-splash-intro` at all means the head script never ran — scripting off, or the inline script blocked by CSP.
   Every rule that hides or moves the flower is gated on one of the three states that script writes, so without it the
   `absolute bottom-full` flower painted above the centred stack and got sliced off by the screen's overflow-hidden.
   The intro is decoration: its absence has to land on the resting state, which has no flower, not on a half-clipped one
   above the wordmark. A regression against the implementation this replaced, which was pure CSS and settled correctly
   with JS off. Do NOT extend this to the `measuring` rule on the stack — only the flower has a default-state problem. */

html:not([data-splash-intro]) [data-splash-flower] {
  display: none;
}

[data-splash-header] {
  transform-origin: center top;
}

[data-splash-intro="playing"] [data-splash-header] {
  animation: splash-intro-hero-scale 1100ms cubic-bezier(0.5, 1, 0.89, 1) 850ms both;
}

[data-splash-stack] {
  --splash-hero-scale: 1.16;
  /* Where the flower's INK top sits during the hold, as a fraction of viewport height —
     read straight off the comps: mobile 197/852, desktop 271/1024. */
  --splash-hero-ink-top: 0.2312;
}

@media (min-width: 768px) {
  [data-splash-stack] {
    --splash-hero-scale: 1.18;
    --splash-hero-ink-top: 0.2646;
  }
}

@keyframes splash-intro-hero-scale {
  from {
    scale: var(--splash-hero-scale);
  }

  to   {
    scale: 1;
  }
}

/* Everything after the wordmark/tagline block is the form. It is absent during the hold and fades in behind the rising
   hero — the second layer. `~ *` rather than a wrapper so the components need no structural change.

   `[data-splash-form]` is the escape hatch for content that has to sit ABOVE the header and so cannot be reached by
   `~`: SignUp::ProfileCreationComponent renders its validation banner at the top of the component. Without the marker
   that banner held full opacity through the entire hold. Anything added above the header needs the marker too. */

[data-splash-intro="playing"] [data-splash-header] ~ *,
[data-splash-intro="playing"] [data-splash-form] {
  animation: splash-intro-form-in 1100ms 850ms both;
}

/* Per-keyframe easing: a decelerating rise into the overshoot, then a soft return. A single cubic-bezier cannot express
   "overshoot at 55%, settle by 100%" — the 55% stop is what carries the bounce. */

@keyframes splash-intro-rise {
  0% {
    translate: 0 var(--splash-intro-travel, 0px);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }

  55% {
    translate: 0 -6px;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }

  100% {
    translate: 0 0;
  }
}

/* The flower recedes rather than blinking out: it eases away over ~440ms (5% -> 45% of 1100ms) while scaling to 0.92,
   on an ease-in-out so both ends are soft. An earlier version dropped opacity from 13% to 27% — a 143ms cut — which
   read as abrupt (Emily, 2026-08-23).

   `scale` is the standalone property, not `transform`, deliberately: the wrapper's own `-translate-x-1/2` centring
   compiles to `transform`, and the two compose without either clobbering the other.

   The scale here is the HERO scale (1.18 -> 1), the same one the wordmark and tagline ride, so the flower recedes with
   the rest of the hero rather than shrinking on its own. That is what gives the exit its "scaling out" feel. */

@keyframes splash-intro-flower-out {
  0%   {
    opacity: 1;
    scale: var(--splash-hero-scale);
  }

  5%   {
    opacity: 1;
    scale: calc(var(--splash-hero-scale) - 0.02);
  }

  45%  {
    opacity: 0;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1;
  }
}

/* Held out through the first beat of the movement, then in — so the hold frame carries no form at all.

   `visibility` rides along because `opacity: 0` alone leaves the form in the hit-test tree, the tab order and the a11y
   tree: for the whole 850ms hold a password manager could autofill invisible inputs, a returning user could click the
   email field from memory, and a keyboard user could tab into controls that are not on screen. The cover this replaced
   was `fixed inset-0 z-20` and blocked that as a side effect.

   The 9% stop is `visible` DELIBERATELY, not a copy/paste slip. visibility is a discrete property, so it flips at the
   midpoint between keyframes rather than tweening: hidden at 0% and visible at 9% flips ~4.5% in (~50ms), while opacity
   is still pinned at 0 until 9% — so it becomes interactive a frame or two before it starts to appear, and nothing pops.
   Writing `hidden` at 9% instead would push the flip to the 9%->45% midpoint (27%, ~300ms) and snap the form on at half
   opacity. `both` fill means the 0% keyframe covers the whole 850ms delay, which is the part that matters. */

@keyframes splash-intro-form-in {
  0%   {
    opacity: 0;
    visibility: hidden;
  }

  9%   {
    opacity: 0;
    visibility: visible;
  }

  45%  {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

/* Played already this tab: resting state only. The flower is out of flow, so nothing needs undoing. */

[data-splash-intro="played"] [data-splash-flower] {
  display: none;
}

[data-splash-intro="measuring"] [data-splash-flower] {
  opacity: 0;
}

/* Every animated selector is cancelled here, `[data-splash-header]` included. It is easy to miss because the form is
   matched as `[data-splash-header] ~ *` and the header itself needs naming separately — and missing it is the worst
   case of the four, since the header's animation is `both`-filled from `scale: var(--splash-hero-scale)`: a
   reduced-motion visitor would hold the wordmark and tagline at 1.18x for the whole 850ms delay, on top of a form that
   is already visible because its own animation was cancelled, and then get the full 1100ms scale-down. */

@media (prefers-reduced-motion: reduce) {
  [data-splash-intro="playing"] [data-splash-stack],
  [data-splash-intro="playing"] [data-splash-flower],
  [data-splash-intro="playing"] [data-splash-header],
  [data-splash-intro="playing"] [data-splash-header] ~ *,
  [data-splash-intro="playing"] [data-splash-form] {
    animation: none;
  }

  [data-splash-intro="playing"] [data-splash-flower] {
    display: none;
  }
}

/**********************************************************************************************************************/

/* ROOTY INTRO (sc-25309)                                                                                             */

/**********************************************************************************************************************/

/* Rooty settles into place on arrival instead of simply being there. Only the FIRST state gets this: states 2 and 3
   already arrive on the controller's own fade-and-rise, so animating them here would double up.

   Deliberately the same shape as `splash-intro-rise` above rather than a new curve — a decelerating rise into a small
   overshoot at 55%, then a soft return — so the two entrances in the sign-up flow read as the same family. A single
   cubic-bezier cannot express "overshoot at 55%, settle by 100%"; the 55% stop is what carries the bounce.

   `translate`, the standalone property, not `transform`: the layer this sits inside is positioned with Tailwind's
   translate utilities, which compile to `transform`, and the two compose without either clobbering the other.

   The opacity is finished by 35% on purpose. It exists only so Rooty does not pop in 14px low — past that point the
   movement is what the eye follows, which is what was asked for. `both` fill means the 0% keyframe covers the 120ms
   delay, so nothing is painted mid-air before the animation starts. */

[data-rooty-enter] {
  animation: rooty-intro-enter 700ms 120ms both;
}

@keyframes rooty-intro-enter {
  0% {
    opacity: 0;
    translate: 0 14px;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }

  35% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }

  55% {
    translate: 0 -5px;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* Poses 2 and 3 add a RISE on top of the layer's fade. The fade carries the speech bubble with it, deliberately —
   cutting the bubble instantly instead was tried and looked worse (Emily, 2026-08-25). What is held off the layer is the
   translate, and only the translate: moving the layer took the bubble sliding along with the pose, which read as the
   copy shifting rather than Rooty arriving.

   `cubic-bezier(0.34, 1.56, 0.64, 1)` is an ease-out-back — the >1 control point overshoots the resting position and
   comes back, which is how a transition gets the same little bounce the first pose's keyframe has. Without it a
   transition can only decelerate into place and the three arrivals would not match.

   `translate`, the standalone property, not `transform`: the layer around this is positioned with Tailwind's translate
   utilities, which compile to `transform`, and the two compose without either clobbering the other. */

[data-rooty-art] {
  transition: translate 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-rooty-idle] [data-rooty-art] {
  translate: 0 10px;
}

/* Cancelled outright rather than shortened. The animation is `both`-filled from `opacity: 0`, so leaving it running
   with `animation-duration: 0s` would be fine but naming it here is what guarantees Rooty is simply present. */

@media (prefers-reduced-motion: reduce) {
  [data-rooty-enter] {
    animation: none;
  }

  [data-rooty-art] {
    transition: none;
  }

  /* Resting position, so a reduced-motion visitor never sees a pose sitting 10px low. */

  [data-rooty-idle] [data-rooty-art] {
    translate: 0 0;
  }
}

/**********************************************************************************************************************/

/**********************************************************************************************************************/

/* ROOTY NUDGE (sc-30708)                                                                                             */

/**********************************************************************************************************************/

/* The sign-up invite: Rooty rises from behind the Email field, grips it, and thinks the message. Ported from the canvas
   prototype, which the story names as the source of truth for motion (times below are from when the nudge fires).

   Two state attributes on SignUp::RootyNudgeComponent's root, set by the delayed-nudge controller, and they are
   INDEPENDENT on purpose:
     data-rooty-nudge-shown    — set once when the nudge fires, never removed. Rooty, his hands and the blink key off
                                 this alone, which is what keeps him on the field after the message goes.
     data-rooty-nudge-message  — "dismissed" (pop the message out) or "skipped" (dismissed before it finished arriving:
                                 remove it without a flash). Only the dots, the bubble and the copy read it.

   The bubble is `visibility: hidden` whenever it is not on screen — before it fires, with no JS, and once dismissed —
   so an invisible button never takes a tab stop, a screen-reader announcement or a tap. It turns visible only as the
   first thought dot pops in (780ms; a spec pins the two together), not when the nudge fires — until then it is an empty
   187x129 box over the heading. Dismissed, it stays visible for the pop-out's 180ms first, then goes. */

[data-rooty-nudge-rooty] {
  transform: translateY(100px);
  transform-origin: 50% 100%;
}

[data-rooty-nudge-hands] {
  transform: translateY(24px);
}

[data-rooty-nudge-eyes] {
  transform-box: fill-box;
  transform-origin: center;
}

[data-rooty-nudge-part] {
  opacity: 0;
  transform: scale(0);
}

[data-rooty-nudge-part="body"] {
  transform-origin: 58% 100%;
}

[data-rooty-nudge-bubble] {
  visibility: hidden;
  transition: visibility 0s linear 180ms;
}

[data-rooty-nudge-shown] [data-rooty-nudge-bubble] {
  visibility: visible;
  transition-delay: 780ms;
}

[data-rooty-nudge-shown][data-rooty-nudge-message] [data-rooty-nudge-bubble] {
  visibility: hidden;
  transition-delay: 180ms;
}

[data-rooty-nudge-shown][data-rooty-nudge-message="skipped"] [data-rooty-nudge-bubble] {
  transition-delay: 0s;
}

/* Entrance. SignUp::RootyNudgeComponent::BUBBLE_ARRIVED_MS is the end of the copy's entrance (1200 + 240) and a spec
   pins it here — change a delay and that constant moves with it. */

[data-rooty-nudge-shown] [data-rooty-nudge-rooty] {
  animation: rooty-nudge-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[data-rooty-nudge-shown] [data-rooty-nudge-hands] {
  animation: rooty-nudge-grip 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 520ms both;
}

[data-rooty-nudge-shown] [data-rooty-nudge-eyes] {
  animation: rooty-nudge-blink 4200ms ease-in-out 2000ms infinite;
}

[data-rooty-nudge-shown] [data-rooty-nudge-part="dot-sm"] {
  animation: rooty-nudge-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1) 780ms both;
}

[data-rooty-nudge-shown] [data-rooty-nudge-part="dot-lg"] {
  animation: rooty-nudge-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms both;
}

[data-rooty-nudge-shown] [data-rooty-nudge-part="body"] {
  animation: rooty-nudge-bubble-in 360ms cubic-bezier(0.34, 1.45, 0.64, 1) 1020ms both;
}

[data-rooty-nudge-shown] [data-rooty-nudge-part="copy"] {
  animation: rooty-nudge-copy-in 240ms ease-out 1200ms both;
}

[data-rooty-nudge-shown][data-rooty-nudge-message="dismissed"] [data-rooty-nudge-part] {
  animation: rooty-nudge-pop-out 180ms ease-in both;
}

[data-rooty-nudge-shown][data-rooty-nudge-message="skipped"] [data-rooty-nudge-part] {
  animation: none;
  opacity: 0;
}

@keyframes rooty-nudge-rise {
  0% {
    transform: translateY(100px) rotate(0);
  }

  60% {
    transform: translateY(-8px) rotate(-4deg) scaleY(1.04);
  }

  80% {
    transform: translateY(3px) rotate(2deg) scaleY(0.97);
  }

  100% {
    transform: translateY(0) rotate(0) scaleY(1);
  }
}

@keyframes rooty-nudge-grip {
  0% {
    transform: translateY(24px);
  }

  70% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes rooty-nudge-blink {
  0%, 94%, 100% {
    transform: scaleY(1);
  }

  97% {
    transform: scaleY(0.1);
  }
}

@keyframes rooty-nudge-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rooty-nudge-bubble-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rooty-nudge-copy-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rooty-nudge-pop-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes rooty-nudge-fade {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rooty-nudge-fade-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: none;
  }
}

/* No translation: Rooty, the hands and the message fade in, and the message fades out on dismiss.
   SignUp::RootyNudgeComponent::REDUCED_BUBBLE_ARRIVED_MS is the message's fade-in end (150 + 200), pinned by a spec. */

@media (prefers-reduced-motion: reduce) {
  [data-rooty-nudge-shown] [data-rooty-nudge-eyes] {
    animation: none;
  }

  [data-rooty-nudge-rooty],
  [data-rooty-nudge-hands] {
    opacity: 0;
    transform: none;
  }

  [data-rooty-nudge-shown] [data-rooty-nudge-rooty],
  [data-rooty-nudge-shown] [data-rooty-nudge-hands] {
    animation: rooty-nudge-fade 200ms ease-out both;
  }

  [data-rooty-nudge-shown] [data-rooty-nudge-part] {
    animation: rooty-nudge-fade 200ms ease-out 150ms both;
  }

  [data-rooty-nudge-shown][data-rooty-nudge-message="dismissed"] [data-rooty-nudge-part] {
    animation: rooty-nudge-fade-out 200ms ease-in both;
  }

  [data-rooty-nudge-shown] [data-rooty-nudge-bubble] {
    transition-delay: 150ms;
  }

  [data-rooty-nudge-shown][data-rooty-nudge-message="dismissed"] [data-rooty-nudge-bubble] {
    transition-delay: 200ms;
  }
}

/**********************************************************************************************************************/

.bg-sidebar-circles {
  background-image: url("/assets/circles-top-right-3bc66571.svg");
}

[type='checkbox'][disabled] {
}

/* Short screens: shrink sidebar carousel image and reduce top padding */

@media (max-height: 800px) {
  .sidebar-carousel-image {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .sidebar-top {
    padding-top: 2rem;
  }
}

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

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

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

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

.after\:z-10::after{
  content: var(--tw-content);
  z-index: 10;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.focus\:border-none:focus{
  border-style: none;
}

.focus\:\!border-c-green-700:focus{
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--c-green-700) / var(--tw-border-opacity, 1)) !important;
}

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

.focus\:border-transparent:focus{
  border-color: transparent;
}

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

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

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

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

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

.focus\:ring-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-c-green-700:focus{
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(var(--c-green-700) / var(--tw-ring-opacity, 1)) !important;
}

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

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

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

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

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

.focus\:ring-offset-green-50:focus{
  --tw-ring-offset-color: #f0fdf4;
}

.focus\:ring-offset-red-50:focus{
  --tw-ring-offset-color: #fef2f2;
}

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

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

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

.focus-visible\:ring-c-primary-green\/40:focus-visible{
  --tw-ring-color: rgb(var(--c-primary-green) / 0.4);
}

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

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

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

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

.disabled\:text-c-icon-muted:disabled{
  --tw-text-opacity: 1;
  color: rgb(var(--c-icon-muted) / var(--tw-text-opacity, 1));
}

.disabled\:text-c-primary-white:disabled{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-white) / var(--tw-text-opacity, 1));
}

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

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

.group:focus-visible .group-focus-visible\:bg-c-hover-beige{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-beige) / var(--tw-bg-opacity, 1));
}

.group.compact .group-\[\.compact\]\:mb-2{
  margin-bottom: 0.5rem;
}

.group.compact .group-\[\.compact\]\:mt-2{
  margin-top: 0.5rem;
}

.group.compact .group-\[\.compact\]\:mt-3{
  margin-top: 0.75rem;
}

.group.compact .group-\[\.compact\]\:h-2\.5{
  height: 0.625rem;
}

.group.compact .group-\[\.compact\]\:h-4{
  height: 1rem;
}

.group.compact .group-\[\.compact\]\:h-6{
  height: 1.5rem;
}

.group.compact .group-\[\.compact\]\:h-8{
  height: 2rem;
}

.group.compact .group-\[\.compact\]\:h-auto{
  height: auto;
}

.group.compact .group-\[\.compact\]\:w-2\.5{
  width: 0.625rem;
}

.group.compact .group-\[\.compact\]\:w-4{
  width: 1rem;
}

.group.compact .group-\[\.compact\]\:w-6{
  width: 1.5rem;
}

.group.compact .group-\[\.compact\]\:w-8{
  width: 2rem;
}

.group.compact .group-\[\.compact\]\:origin-bottom-right{
  transform-origin: bottom right;
}

.group.compact .group-\[\.compact\]\:origin-top-right{
  transform-origin: top right;
}

.group.compact .group-\[\.compact\]\:scale-75{
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  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.compact .group-\[\.compact\]\:gap-2{
  gap: 0.5rem;
}

.group.compact .group-\[\.compact\]\:p-3{
  padding: 0.75rem;
}

.group.compact .group-\[\.compact\]\:\!px-3{
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.group.compact .group-\[\.compact\]\:px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.group.compact .group-\[\.compact\]\:py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.group.compact .group-\[\.compact\]\:pb-3{
  padding-bottom: 0.75rem;
}

.group.compact .group-\[\.compact\]\:pt-2{
  padding-top: 0.5rem;
}

.group.compact .group-\[\.compact\]\:\!text-xs{
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

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

.group.compact .group-\[\.compact\]\:text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.group.compact .group-\[\.compact\]\:text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.peer:checked ~ .peer-checked\:translate-x-5{
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.peer:checked ~ .peer-checked\:bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-c-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-c-primary-green{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-green) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:text-c-gray-700{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-700) / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:text-c-gray-800{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-800) / var(--tw-text-opacity, 1));
}

.peer:indeterminate ~ .peer-indeterminate\:border-c-green-700{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-green-700) / var(--tw-border-opacity, 1));
}

.peer:indeterminate ~ .peer-indeterminate\:bg-c-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1));
}

.peer:indeterminate ~ .peer-indeterminate\:bg-c-primary-green{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-primary-green) / var(--tw-bg-opacity, 1));
}

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

.peer:hover ~ .peer-hover\:bg-c-primary-green\/10{
  background-color: rgb(var(--c-primary-green) / 0.1);
}

.peer:hover ~ .peer-hover\:ring-8{
  --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(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:hover ~ .peer-hover\:ring-c-gray-800\/10{
  --tw-ring-color: rgb(var(--c-gray-800) / 0.1);
}

.peer:checked:hover ~ .peer-checked\:peer-hover\:bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

.peer:indeterminate:hover ~ .peer-indeterminate\:peer-hover\:bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

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

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

.peer:focus-visible ~ .peer-focus-visible\:bg-c-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-100) / var(--tw-bg-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\:bg-c-primary-green\/10{
  background-color: rgb(var(--c-primary-green) / 0.1);
}

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

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

.peer:focus-visible ~ .peer-focus-visible\:ring-c-green-700{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-green-700) / var(--tw-ring-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\:ring-c-primary-green\/40{
  --tw-ring-color: rgb(var(--c-primary-green) / 0.4);
}

.peer:checked:focus-visible ~ .peer-checked\:peer-focus-visible\:bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

.peer:indeterminate:focus-visible ~ .peer-indeterminate\:peer-focus-visible\:bg-c-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-100) / var(--tw-bg-opacity, 1));
}

.peer:active ~ .peer-active\:bg-c-primary-green\/25{
  background-color: rgb(var(--c-primary-green) / 0.25);
}

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

.peer:disabled ~ .peer-disabled\:border-c-disabled-bg{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-disabled-bg) / var(--tw-border-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:bg-c-cream{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-cream) / var(--tw-bg-opacity, 1));
}

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

.peer:disabled ~ .peer-disabled\:bg-transparent{
  background-color: transparent;
}

.peer:disabled ~ .peer-disabled\:text-c-disabled-bg{
  --tw-text-opacity: 1;
  color: rgb(var(--c-disabled-bg) / var(--tw-text-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:text-c-gray-300{
  --tw-text-opacity: 1;
  color: rgb(var(--c-gray-300) / var(--tw-text-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:text-c-primary-white{
  --tw-text-opacity: 1;
  color: rgb(var(--c-primary-white) / var(--tw-text-opacity, 1));
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:bg-c-cream{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-cream) / var(--tw-bg-opacity, 1));
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:bg-c-disabled-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.peer:disabled:indeterminate ~ .peer-disabled\:peer-indeterminate\:bg-c-disabled-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.peer:disabled:hover ~ .peer-disabled\:peer-hover\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:checked:hover ~ .peer-disabled\:peer-checked\:peer-hover\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:indeterminate:hover ~ .peer-disabled\:peer-indeterminate\:peer-hover\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:focus-visible ~ .peer-disabled\:peer-focus-visible\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:focus-visible ~ .peer-disabled\:peer-focus-visible\: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);
}

.peer:disabled:checked:focus-visible ~ .peer-disabled\:peer-checked\:peer-focus-visible\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:indeterminate:focus-visible ~ .peer-disabled\:peer-indeterminate\:peer-focus-visible\:bg-transparent{
  background-color: transparent;
}

.peer:disabled:active ~ .peer-disabled\:peer-active\:bg-transparent{
  background-color: transparent;
}

.has-\[\:disabled\]\:cursor-auto:has(:disabled){
  cursor: auto;
}

.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){
  cursor: not-allowed;
}

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

.group\/input-field:has(:disabled) .group-has-\[\:disabled\]\/input-field\:text-c-icon-muted{
  --tw-text-opacity: 1;
  color: rgb(var(--c-icon-muted) / var(--tw-text-opacity, 1));
}

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

.aria-busy\:cursor-wait[aria-busy="true"]{
  cursor: wait;
}

.aria-checked\:bg-c-pillb-green[aria-checked="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-green) / var(--tw-bg-opacity, 1));
}

.aria-checked\:hover\:bg-c-pillb-green:hover[aria-checked="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-pillb-green) / var(--tw-bg-opacity, 1));
}

.group[aria-busy="true"] .group-aria-busy\:invisible{
  visibility: hidden;
}

.group[aria-busy="true"] .group-aria-busy\:flex{
  display: flex;
}

.group[aria-checked="true"] .group-aria-checked\:block{
  display: block;
}

.group[aria-checked="true"] .group-aria-checked\:bg-c-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1));
}

.data-\[errors\=true\]\:bg-c-light-red[data-errors="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-light-red) / var(--tw-bg-opacity, 1));
}

.data-\[open\]\:\[--toggle-caret-rotation\:180deg\][data-open]{
  --toggle-caret-rotation: 180deg;
}

.data-\[errors\=true\]\:hover\:bg-c-hover-light-red:hover[data-errors="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-light-red) / var(--tw-bg-opacity, 1));
}

.data-\[errors\=true\]\:focus\:bg-c-hover-light-red:focus[data-errors="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-light-red) / var(--tw-bg-opacity, 1));
}

.disabled\:data-\[errors\=true\]\:bg-c-gray-100[data-errors="true"]:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-100) / var(--tw-bg-opacity, 1));
}

.disabled\:data-\[errors\=true\]\:text-c-icon-muted[data-errors="true"]:disabled{
  --tw-text-opacity: 1;
  color: rgb(var(--c-icon-muted) / var(--tw-text-opacity, 1));
}

.disabled\:data-\[errors\=true\]\:hover\:bg-c-gray-100:hover[data-errors="true"]:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-gray-100) / var(--tw-bg-opacity, 1));
}

.group[data-open] .group-data-\[open\]\:grid-rows-\[1fr\]{
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: no-preference){
  .motion-safe\:transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\: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;
  }

  .motion-safe\:duration-150{
    transition-duration: 150ms;
  }

  .motion-safe\:duration-200{
    transition-duration: 200ms;
  }

  .motion-safe\:ease-out{
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce){
  .motion-reduce\:animate-none{
    animation: none;
  }

  .motion-reduce\:transition-none{
    transition-property: none;
  }
}

@media (min-width: 640px){
  .sm\:max-w-52{
    max-width: 13rem;
  }

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

  .sm\:animate-none{
    animation: none;
  }

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

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

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

  .sm\:pr-48{
    padding-right: 12rem;
  }

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

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

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

@media (min-width: 768px){
  .md\:not-sr-only{
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .md\:static{
    position: static;
  }

  .md\:absolute{
    position: absolute;
  }

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

  .md\:left-\[230px\]{
    left: 230px;
  }

  .md\:left-\[254px\]{
    left: 254px;
  }

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

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

  .md\:right-10{
    right: 2.5rem;
  }

  .md\:right-6{
    right: 1.5rem;
  }

  .md\:right-\[52px\]{
    right: 52px;
  }

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

  .md\:top-\[calc\(53px\+env\(safe-area-inset-top\2c 0px\)\)\]{
    top: calc(53px + env(safe-area-inset-top,0px));
  }

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

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

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

  .md\:-mx-5{
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

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

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

  .md\:mb-4{
    margin-bottom: 1rem;
  }

  .md\:mb-6{
    margin-bottom: 1.5rem;
  }

  .md\:mb-\[72px\]{
    margin-bottom: 72px;
  }

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

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

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

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

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

  .md\:h-14{
    height: 3.5rem;
  }

  .md\:h-4{
    height: 1rem;
  }

  .md\:h-6{
    height: 1.5rem;
  }

  .md\:h-64{
    height: 16rem;
  }

  .md\:h-7{
    height: 1.75rem;
  }

  .md\:h-8{
    height: 2rem;
  }

  .md\:h-\[124px\]{
    height: 124px;
  }

  .md\:h-\[50px\]{
    height: 50px;
  }

  .md\:h-\[90vh\]{
    height: 90vh;
  }

  .md\:h-auto{
    height: auto;
  }

  .md\:max-h-72{
    max-height: 18rem;
  }

  .md\:max-h-\[75vh\]{
    max-height: 75vh;
  }

  .md\:max-h-\[90vh\]{
    max-height: 90vh;
  }

  .md\:min-h-0{
    min-height: 0px;
  }

  .md\:min-h-\[655px\]{
    min-height: 655px;
  }

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

  .md\:w-6{
    width: 1.5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:w-\[90vw\]{
    width: 90vw;
  }

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

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

  .md\:max-w-\[260px\]{
    max-width: 260px;
  }

  .md\:max-w-\[393px\]{
    max-width: 393px;
  }

  .md\:max-w-\[480px\]{
    max-width: 480px;
  }

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

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

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

  .md\:translate-x-0{
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-y-0{
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:animate-none{
    animation: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:overflow-auto{
    overflow: auto;
  }

  .md\:overflow-hidden{
    overflow: hidden;
  }

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

  .md\:rounded-2xl{
    border-radius: 1rem;
  }

  .md\:rounded-3xl{
    border-radius: 1.5rem;
  }

  .md\:rounded-\[12px\]{
    border-radius: 12px;
  }

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

  .md\:rounded-none{
    border-radius: 0px;
  }

  .md\:rounded-bl-lg{
    border-bottom-left-radius: 0.5rem;
  }

  .md\:rounded-br-lg{
    border-bottom-right-radius: 0.5rem;
  }

  .md\:border-0{
    border-width: 0px;
  }

  .md\:\!bg-c-primary-white\/40{
    background-color: rgb(var(--c-primary-white) / 0.4) !important;
  }

  .md\:bg-c-cream{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-cream) / var(--tw-bg-opacity, 1));
  }

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

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

  .md\:bg-transparent{
    background-color: transparent;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:pb-4{
    padding-bottom: 1rem;
  }

  .md\:pb-6{
    padding-bottom: 1.5rem;
  }

  .md\:pb-8{
    padding-bottom: 2rem;
  }

  .md\:pl-20{
    padding-left: 5rem;
  }

  .md\:pl-6{
    padding-left: 1.5rem;
  }

  .md\:pr-16{
    padding-right: 4rem;
  }

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

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

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

  .md\:pt-4{
    padding-top: 1rem;
  }

  .md\:pt-5{
    padding-top: 1.25rem;
  }

  .md\:pt-\[calc\(2\.5rem\+env\(safe-area-inset-top\)\)\]{
    padding-top: calc(2.5rem + env(safe-area-inset-top));
  }

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

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

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

  .md\:text-\[25px\]{
    font-size: 25px;
  }

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

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

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

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

  .md\:font-extrabold{
    font-weight: 800;
  }

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

  .md\:leading-\[32px\]{
    line-height: 32px;
  }

  .md\:text-c-cream{
    --tw-text-opacity: 1;
    color: rgb(var(--c-cream) / var(--tw-text-opacity, 1));
  }

  .md\:text-c-green-700{
    --tw-text-opacity: 1;
    color: rgb(var(--c-green-700) / var(--tw-text-opacity, 1));
  }

  .md\:text-c-primary-white{
    --tw-text-opacity: 1;
    color: rgb(var(--c-primary-white) / var(--tw-text-opacity, 1));
  }

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

  .md\:\[--grove-header-height\:66px\]{
    --grove-header-height: 66px;
  }

  .md\:\[--grove-header-height\:90px\]{
    --grove-header-height: 90px;
  }

  .md\:\[--grove-safe-bottom-base\:0px\]{
    --grove-safe-bottom-base: 0px;
  }

  .md\:\[--grove-safe-bottom-base\:1\.25rem\]{
    --grove-safe-bottom-base: 1.25rem;
  }

  .md\:\[--grove-safe-bottom-base\:1rem\]{
    --grove-safe-bottom-base: 1rem;
  }

  .md\:\[--grove-safe-top-base\:1rem\]{
    --grove-safe-top-base: 1rem;
  }

  .md\:\[--grove-safe-top-base\:2rem\]{
    --grove-safe-top-base: 2rem;
  }

  .group.compact .group-\[\.compact\]\:md\:h-5{
    height: 1.25rem;
  }

  .group.compact .group-\[\.compact\]\:md\:h-8{
    height: 2rem;
  }

  .group.compact .group-\[\.compact\]\:md\:w-5{
    width: 1.25rem;
  }

  .group.compact .group-\[\.compact\]\:md\:w-8{
    width: 2rem;
  }
}

@media (min-width: 1280px){
  .xl\:static{
    position: static;
  }

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

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

  .xl\:block{
    display: block;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:hidden{
    display: none;
  }

  .xl\:min-h-0{
    min-height: 0px;
  }

  .xl\:border-0{
    border-width: 0px;
  }

  .xl\:bg-transparent{
    background-color: transparent;
  }

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

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

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

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

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

  .xl\:pr-12{
    padding-right: 3rem;
  }

  .xl\:pr-8{
    padding-right: 2rem;
  }

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

  .xl\:pt-\[13px\]{
    padding-top: 13px;
  }

  .xl\:\[--grove-safe-bottom-base\:0px\]{
    --grove-safe-bottom-base: 0px;
  }
}

@media (max-width: 359px){
  .narrow\:size-8{
    width: 2rem;
    height: 2rem;
  }

  .narrow\:w-14{
    width: 3.5rem;
  }

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

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

  .narrow\:text-3xs{
    font-size: 0.5rem;
  }
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-clear-pressed:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-clear-pressed) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-green-pressed:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-pressed) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-beige:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-beige) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-cream:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-cream) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-dark-green:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-dark-green) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-light-green:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-light-green) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-red:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-red) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-hover-white:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-hover-white) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-sage-pressed:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sage-pressed) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-teal-pressed:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-teal-pressed) / var(--tw-bg-opacity, 1));
}

.\[\&\:not\(\:disabled\)\:active\]\:bg-c-yellow-pressed:not(:disabled):active{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-yellow-pressed) / var(--tw-bg-opacity, 1));
}

.\[\&\>\*\]\:flex>*{
  display: flex;
}

.\[\&\>\*\]\:min-w-0>*{
  min-width: 0px;
}

.\[\&\>\*\]\:flex-1>*{
  flex: 1 1 0%;
}

.\[\&\>\*\]\:justify-center>*{
  justify-content: center;
}

.peer:checked ~ .peer-checked\:\[\&\>\.grove-check\]\:block>.grove-check{
  display: block;
}

.peer:indeterminate ~ .peer-indeterminate\:\[\&\>\.grove-check\]\:hidden>.grove-check{
  display: none;
}

.peer:checked ~ .peer-checked\:\[\&\>\.grove-dot\]\:block>.grove-dot{
  display: block;
}

.peer:disabled ~ .peer-disabled\:\[\&\>\.grove-dot\]\:bg-c-disabled-bg>.grove-dot{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.peer:indeterminate ~ .peer-indeterminate\:\[\&\>\.grove-minus\]\:block>.grove-minus{
  display: block;
}

.\[\&\>p\:last-child\]\:mb-0>p:last-child{
  margin-bottom: 0px;
}

.\[\&\>p\]\:mb-1>p{
  margin-bottom: 0.25rem;
}

.\[\&\>p\]\:mb-2>p{
  margin-bottom: 0.5rem;
}

.\[\&\>span\]\:block>span{
  display: block;
}

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

.\[\&\>svg\]\:h-full>svg{
  height: 100%;
}

.\[\&\>svg\]\:w-full>svg{
  width: 100%;
}

.peer:checked ~ .peer-checked\:\[\&_\.grove-disc\]\:bg-c-green-700 .grove-disc{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-green-700) / var(--tw-bg-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:\[\&_\.grove-disc\]\:bg-c-disabled-bg .grove-disc{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:\[\&_\.grove-disc\]\:bg-c-disabled-bg .grove-disc{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:\[\&_\.grove-dot\]\:block .grove-dot{
  display: block;
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:\[\&_\.grove-dot\]\:border-c-cream .grove-dot{
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-cream) / var(--tw-border-opacity, 1));
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:\[\&_\.grove-dot\]\:bg-c-disabled-bg .grove-dot{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-disabled-bg) / var(--tw-bg-opacity, 1));
}

.\[\&_svg\]\:size-10 svg{
  width: 2.5rem;
  height: 2.5rem;
}

@media (max-width: 359px){
  .narrow\:\[\&_svg\]\:size-5 svg{
    width: 1.25rem;
    height: 1.25rem;
  }
}