*, ::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.17 | 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: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: 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;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(43 43 57 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind's preflight removes list markers; put them back inside prose
       written by staff (ticket replies, product descriptions). */

.container {
  width: 100%;
}

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

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

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

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

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

/* Buttons ---------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-primary: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);
  --tw-ring-offset-width: 2px;
}

.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(26 130 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 108 198 / var(--tw-bg-opacity, 1));
}

.btn-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(26 130 226 / var(--tw-ring-opacity, 1));
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-secondary: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);
  --tw-ring-offset-width: 2px;
}

.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(70 70 85 / var(--tw-text-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 217 225 / var(--tw-ring-opacity, 1));
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 249 / var(--tw-bg-opacity, 1));
}

.btn-secondary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(26 130 226 / var(--tw-ring-opacity, 1));
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-accent:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-accent: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);
  --tw-ring-offset-width: 2px;
}

.btn-accent:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(254 122 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 98 6 / var(--tw-bg-opacity, 1));
}

.btn-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 122 21 / var(--tw-ring-opacity, 1));
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-danger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-danger: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);
  --tw-ring-offset-width: 2px;
}

.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.btn-danger:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-ghost:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-ghost: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);
  --tw-ring-offset-width: 2px;
}

.btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-ghost {
  --tw-text-opacity: 1;
  color: rgb(86 86 103 / var(--tw-text-opacity, 1));
}

.btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 242 / var(--tw-bg-opacity, 1));
}

.btn-ghost:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(184 184 198 / var(--tw-ring-opacity, 1));
}

.btn-sm {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Surfaces --------------------------------------------------------- */

.card {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px rgba(27, 27, 37, .04), 0 8px 24px -12px rgba(27, 27, 37, .18);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(43 43 57 / 0.05);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(238 238 242 / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.card-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(43 43 57 / var(--tw-text-opacity, 1));
}

.card-body {
  padding: 1.25rem;
}

/* Forms ------------------------------------------------------------ */

.label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(70 70 85 / var(--tw-text-opacity, 1));
}

.input {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(43 43 57 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 217 225 / var(--tw-ring-opacity, 1));
}

.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(143 143 163 / var(--tw-text-opacity, 1));
}

.input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(143 143 163 / var(--tw-text-opacity, 1));
}

.input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(26 130 226 / var(--tw-ring-opacity, 1));
}

.input-error {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

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

.help {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(105 114 125 / var(--tw-text-opacity, 1));
}

.error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

/* Tables ----------------------------------------------------------- */

.table {
  min-width: 100%;
}

.table > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(238 238 242 / var(--tw-divide-opacity, 1));
}

.table {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.table thead {
  background-color: rgb(247 247 249 / 0.7);
}

.table th {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(105 114 125 / var(--tw-text-opacity, 1));
}

.table td {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
  --tw-text-opacity: 1;
  color: rgb(70 70 85 / var(--tw-text-opacity, 1));
}

.table tbody > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(238 238 242 / var(--tw-divide-opacity, 1));
}

.table tbody tr:hover {
  background-color: rgb(238 246 253 / 0.4);
}

/* Wide tables scroll inside their own box rather than the page. */

.table-scroll {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  overflow-x: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .table-scroll {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* ------------------------------------------------------------------
       Storefront landing page (a copy of flexhosting.co)

       Everything below is prefixed fh- and used by templates/public/
       marketing/* only. It is kept apart from the classes above because the
       marketing design has its own type scale, its own button shape and its
       own idea of a card — mixing the two would drag one look into the other.
       ------------------------------------------------------------------ */

/* Type scale, straight from the site's Elementor kit. */

.fh-h1 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(41 47 53 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .fh-h1 {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .fh-h1 {
    font-size: 50px;
  }
}

.fh-h2 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(41 47 53 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .fh-h2 {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .fh-h2 {
    font-size: 36px;
  }
}

.fh-h4 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(41 47 53 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .fh-h4 {
    font-size: 20px;
  }
}

.fh-body {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .fh-body {
    font-size: 16px;
  }
}

/* Eyebrow pill: square corners, tinted background, saturated text. */

.fh-pill {
  display: inline-block;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* Buttons. 2px radius, coloured glow, and on hover the fill drops out to
       leave a ghost. No transition is declared on the original — the snap is
       part of the feel, so it is not smoothed over here either. */

.fh-btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border-width: 2px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 13px;
  padding-top: 15px;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .fh-btn-blue {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.fh-btn-blue {
  --tw-border-opacity: 1;
  border-color: rgb(17 146 248 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(17 146 248 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 10px 3px rgba(27,139,249,0.4);
  --tw-shadow-colored: 0 0 10px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.fh-btn-blue:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(17 146 248 / var(--tw-text-opacity, 1));
}

.fh-btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border-width: 2px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 13px;
  padding-top: 15px;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .fh-btn-green {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.fh-btn-green {
  --tw-border-opacity: 1;
  border-color: rgb(46 191 109 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(46 191 109 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 10px 3px rgba(46,191,109,0.4);
  --tw-shadow-colored: 0 0 10px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.fh-btn-green:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(46 191 109 / var(--tw-text-opacity, 1));
}

/* Plan card: a 5px coloured rule along the top edge only, and a shadow
       that lifts on hover without the card moving. */

.fh-plan {
  border-radius: 5px;
  border-top-width: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  --tw-shadow: 0 2px 5px 1px rgba(138,148,159,0.3);
  --tw-shadow-colored: 0 2px 5px 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);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.fh-plan:hover {
  --tw-shadow: 0 4px 30px 5px rgba(138,148,159,0.4);
  --tw-shadow-colored: 0 4px 30px 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 1024px) {
  .fh-plan {
    padding-bottom: 50px;
    padding-left: 3rem;
    padding-right: 50px;
    padding-top: 3rem;
  }
}

/* "Why choose" cards. The original ships these as four flat-colour PNGs —
       a rounded panel with a diagonal top edge and a pointer beneath — so they
       are drawn here instead: same geometry (44px slant, 6px corners, a 29×35
       pointer at 68% across) and the same colours, but they now stretch with
       their content. The PNG could not: it was scaled to whatever aspect the
       grid cell had, and at some widths ended up narrower than the white panel
       sitting on it, leaving the panel hanging over the edge of the card.

       The colour comes in as --fh-card so one rule serves all four. */

.fh-feature {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 270px;
  padding-bottom: 77px;
  padding-left: 22px;
  padding-right: 33px;
  padding-top: 75px;
}

.fh-feature::before,
    .fh-feature::after {
  content: '';
  background: var(--fh-card);
  /* Shadow follows the clipped silhouette, including the pointer — a
           box-shadow would be clipped away with the shape. */
  filter: drop-shadow(0 12px 10px rgba(41, 47, 53, .10));
}

/* 6px matches the source art: its corner arc insets 3/2/1/1/0 px over the
       five rows below the edge, which is the profile of a 6px radius.

       border-radius rounds three of the four corners, but not the one where
       the slant meets the left edge — that is a clip-path vertex, and a
       polygon vertex is always a sharp point. So the arc is spelled out: five
       vertices stepping round a 6px radius, tangent to the left edge at
       46.16px and rejoining the slant at (5.1, 40.23). Traced against the
       original art it holds to 0.75px mean, 2.2px worst.

       The slant rises 41px across the card, not the 44px first measured —
       fitting the source PNG's slope back to x=0 puts the corner there, and
       the rounding only lands in the right place at that value. */

.fh-feature::before {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  border-radius: 6px;
  bottom: 34px;
  clip-path: polygon(
            100% 0, 100% 100%, 0 100%,
            0 46.16px, 0.37px 44.07px, 1.45px 42.25px, 3.09px 40.91px, 5.10px 40.23px
        );
}

/* The tail is not a symmetric triangle: its left edge drops almost
       straight while the right slants in, putting the tip 17% across the
       base. The base itself is centred 68% across the card. */

.fh-feature::after {
  position: absolute;
  bottom: 0px;
  left: 68%;
  height: 34px;
  width: 30px;
  --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));
  clip-path: polygon(0 0, 100% 0, 17% 100%);
}

/* Keep the panel above the drawn card. */

.fh-feature > * {
  position: relative;
}

/* Hover "bob" on the hero illustration and the plan icons. Copied from
       the original rather than approximated — the two-keyframe pairing (a
       one-shot lift, then an endless alternating float) is what gives it its
       particular bounce. */

.fh-bob:hover {
  animation-name: fh-bob-float, fh-bob;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

/* The curve that scoops between sections. Absolutely positioned, wider
       than its section so the arc's ends fall outside the viewport. */

.fh-shape {
  pointer-events: none;
  position: absolute;
  left: 0px;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* The svg is deliberately wider than its box, so it has to be centred on
       the section — otherwise the overflow is clipped from one side only and
       you see the arc's end turn up inside the viewport. */

.fh-shape svg {
  position: relative;
  left: 50%;
  display: block;
  --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));
}

.fh-shape-flip svg {
  transform: translateX(-50%) rotate(180deg);
}

/* The header sticks to the top of the viewport and, once it does, deepens
       from the pale band blue to the contact bar's blue — the change the
       original makes, over the same 0.3s. `is-stuck` is toggled by the
       sticky_header controller. Two classes rather than a utility so the
       stuck colour wins on specificity, not on where Tailwind happens to
       order the two backgrounds in the built sheet. */

.fh-header {
  --tw-bg-opacity: 1;
  background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.fh-header.is-stuck {
  --tw-bg-opacity: 1;
  background-color: rgb(214 234 254 / var(--tw-bg-opacity, 1));
}

/* Badges ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.badge-success {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-bg-opacity: 1;
  background-color: rgb(230 251 243 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 99 75 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(0 157 114 / 0.2);
}

.badge-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(217 119 6 / 0.2);
}

.badge-info {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-bg-opacity: 1;
  background-color: rgb(238 246 253 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(13 86 156 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(15 108 198 / 0.2);
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 242 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(70 70 85 / var(--tw-text-opacity, 1));
  --tw-ring-color: rgb(105 114 125 / 0.2);
}

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

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

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

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

.-right-0\.5 {
  right: -0.125rem;
}

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

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

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

.bottom-0 {
  bottom: 0px;
}

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

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

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.left-\[4vw\] {
  left: 4vw;
}

.left-\[5vw\] {
  left: 5vw;
}

.left-\[8vw\] {
  left: 8vw;
}

.left-\[calc\(50\%-570px-15vw\)\] {
  left: calc(50% - 570px - 15vw);
}

.right-0 {
  right: 0px;
}

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

.right-\[5vw\] {
  right: 5vw;
}

.top-0 {
  top: 0px;
}

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

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

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

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

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

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

.top-full {
  top: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.-mb-px {
  margin-bottom: -1px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-3 {
  height: 0.75rem;
}

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

.h-4 {
  height: 1rem;
}

.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-\[1em\] {
  height: 1em;
}

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

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

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

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

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

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

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

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

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

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-12 {
  max-height: 3rem;
}

.max-h-8 {
  max-height: 2rem;
}

.max-h-9 {
  max-height: 2.25rem;
}

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

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

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

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

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

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

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

.w-\[1em\] {
  width: 1em;
}

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

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

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

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

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

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

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

.w-\[calc\(113\%\+1\.3px\)\] {
  width: calc(113% + 1.3px);
}

.w-\[calc\(120\%\+1\.3px\)\] {
  width: calc(120% + 1.3px);
}

.w-\[calc\(123\%\+1\.3px\)\] {
  width: calc(123% + 1.3px);
}

.w-\[calc\(150\%\+1\.3px\)\] {
  width: calc(150% + 1.3px);
}

.w-\[calc\(277\%\+1\.3px\)\] {
  width: calc(277% + 1.3px);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

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

.min-w-4 {
  min-width: 1rem;
}

.min-w-56 {
  min-width: 14rem;
}

.min-w-8 {
  min-width: 2rem;
}

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

.max-w-3xl {
  max-width: 48rem;
}

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

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

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

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

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

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

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

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

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

.max-w-container {
  max-width: 1140px;
}

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

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

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

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

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

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

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

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

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

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

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

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

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

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

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

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

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

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

.gap-1 {
  gap: 0.25rem;
}

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

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

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

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

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

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

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

.gap-y-3 {
  row-gap: 0.75rem;
}

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

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

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

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

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

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

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

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

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

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

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

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

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

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

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

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

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

.border {
  border-width: 1px;
}

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

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

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

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

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

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

.border-brand-500 {
  --tw-border-opacity: 1;
  border-color: rgb(26 130 226 / var(--tw-border-opacity, 1));
}

.border-fh-blue {
  --tw-border-opacity: 1;
  border-color: rgb(17 146 248 / var(--tw-border-opacity, 1));
}

.border-fh-green {
  --tw-border-opacity: 1;
  border-color: rgb(46 191 109 / var(--tw-border-opacity, 1));
}

.border-fh-hairline {
  --tw-border-opacity: 1;
  border-color: rgb(217 235 255 / var(--tw-border-opacity, 1));
}

.border-fh-heading {
  --tw-border-opacity: 1;
  border-color: rgb(41 47 53 / var(--tw-border-opacity, 1));
}

.border-fh-orange {
  --tw-border-opacity: 1;
  border-color: rgb(255 124 63 / var(--tw-border-opacity, 1));
}

.border-fh-rule {
  --tw-border-opacity: 1;
  border-color: rgb(180 215 253 / var(--tw-border-opacity, 1));
}

.border-fh-topbar {
  --tw-border-opacity: 1;
  border-color: rgb(214 234 254 / var(--tw-border-opacity, 1));
}

.border-ink-100 {
  --tw-border-opacity: 1;
  border-color: rgb(238 238 242 / var(--tw-border-opacity, 1));
}

.border-ink-200 {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 225 / var(--tw-border-opacity, 1));
}

.border-ink-300 {
  --tw-border-opacity: 1;
  border-color: rgb(184 184 198 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

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

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

.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 246 253 / var(--tw-bg-opacity, 1));
}

.bg-brand-50\/40 {
  background-color: rgb(238 246 253 / 0.4);
}

.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(26 130 226 / var(--tw-bg-opacity, 1));
}

.bg-coral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 122 21 / var(--tw-bg-opacity, 1));
}

.bg-coral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 244 236 / var(--tw-bg-opacity, 1));
}

.bg-fh-band {
  --tw-bg-opacity: 1;
  background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1));
}

.bg-fh-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(17 146 248 / var(--tw-bg-opacity, 1));
}

.bg-fh-green {
  --tw-bg-opacity: 1;
  background-color: rgb(46 191 109 / var(--tw-bg-opacity, 1));
}

.bg-fh-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 124 63 / var(--tw-bg-opacity, 1));
}

.bg-fh-pill-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(217 235 255 / var(--tw-bg-opacity, 1));
}

.bg-fh-pill-green {
  --tw-bg-opacity: 1;
  background-color: rgb(234 248 240 / var(--tw-bg-opacity, 1));
}

.bg-fh-pill-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 242 235 / var(--tw-bg-opacity, 1));
}

.bg-fh-pill-pink {
  --tw-bg-opacity: 1;
  background-color: rgb(237 226 235 / var(--tw-bg-opacity, 1));
}

.bg-fh-topbar {
  --tw-bg-opacity: 1;
  background-color: rgb(214 234 254 / var(--tw-bg-opacity, 1));
}

.bg-ink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 242 / var(--tw-bg-opacity, 1));
}

.bg-ink-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(143 143 163 / var(--tw-bg-opacity, 1));
}

.bg-ink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 249 / var(--tw-bg-opacity, 1));
}

.bg-ink-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(43 43 57 / var(--tw-bg-opacity, 1));
}

.bg-ink-950\/50 {
  background-color: rgb(27 27 37 / 0.5);
}

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

.bg-red-50\/60 {
  background-color: rgb(254 242 242 / 0.6);
}

.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(230 251 243 / 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\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-brand-500 {
  --tw-gradient-from: #1a82e2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 130 226 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-brand-700 {
  --tw-gradient-to: #0d569c var(--tw-gradient-to-position);
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.fill-white {
  fill: #fff;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

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

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

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

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

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

.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}

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

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

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

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

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

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

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

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

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

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

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

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

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

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

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

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

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

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[11px\] {
  padding-bottom: 11px;
}

.pb-\[2\.5px\] {
  padding-bottom: 2.5px;
}

.pb-\[25px\] {
  padding-bottom: 25px;
}

.pb-\[26px\] {
  padding-bottom: 26px;
}

.pb-\[60px\] {
  padding-bottom: 60px;
}

.pb-\[7px\] {
  padding-bottom: 7px;
}

.pb-\[8px\] {
  padding-bottom: 8px;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pl-\[5px\] {
  padding-left: 5px;
}

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

.pt-1\.5 {
  padding-top: 0.375rem;
}

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

.pt-6 {
  padding-top: 1.5rem;
}

.pt-\[124px\] {
  padding-top: 124px;
}

.pt-\[12px\] {
  padding-top: 12px;
}

.pt-\[25px\] {
  padding-top: 25px;
}

.pt-\[29px\] {
  padding-top: 29px;
}

.pt-\[50px\] {
  padding-top: 50px;
}

.pt-\[60px\] {
  padding-top: 60px;
}

.pt-\[8px\] {
  padding-top: 8px;
}

.pt-\[9px\] {
  padding-top: 9px;
}

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

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

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

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-opensans {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.font-poppins {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}

.font-sans {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

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

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[36px\] {
  font-size: 36px;
}

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

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

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

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

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

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

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

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.leading-\[12px\] {
  line-height: 12px;
}

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

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

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[27px\] {
  line-height: 27px;
}

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

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

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-\[0\.03em\] {
  letter-spacing: 0.03em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

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

.tracking-wide {
  letter-spacing: 0.025em;
}

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

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

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

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

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

.text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(74 157 232 / var(--tw-text-opacity, 1));
}

.text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(26 130 226 / var(--tw-text-opacity, 1));
}

.text-brand-600 {
  --tw-text-opacity: 1;
  color: rgb(15 108 198 / var(--tw-text-opacity, 1));
}

.text-brand-900 {
  --tw-text-opacity: 1;
  color: rgb(16 62 108 / var(--tw-text-opacity, 1));
}

.text-coral-500 {
  --tw-text-opacity: 1;
  color: rgb(242 98 6 / var(--tw-text-opacity, 1));
}

.text-fh-blue {
  --tw-text-opacity: 1;
  color: rgb(17 146 248 / var(--tw-text-opacity, 1));
}

.text-fh-body {
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

.text-fh-green {
  --tw-text-opacity: 1;
  color: rgb(46 191 109 / var(--tw-text-opacity, 1));
}

.text-fh-heading {
  --tw-text-opacity: 1;
  color: rgb(41 47 53 / var(--tw-text-opacity, 1));
}

.text-fh-orange {
  --tw-text-opacity: 1;
  color: rgb(255 124 63 / var(--tw-text-opacity, 1));
}

.text-ink-300 {
  --tw-text-opacity: 1;
  color: rgb(184 184 198 / var(--tw-text-opacity, 1));
}

.text-ink-400 {
  --tw-text-opacity: 1;
  color: rgb(143 143 163 / var(--tw-text-opacity, 1));
}

.text-ink-500 {
  --tw-text-opacity: 1;
  color: rgb(105 114 125 / var(--tw-text-opacity, 1));
}

.text-ink-600 {
  --tw-text-opacity: 1;
  color: rgb(86 86 103 / var(--tw-text-opacity, 1));
}

.text-ink-700 {
  --tw-text-opacity: 1;
  color: rgb(70 70 85 / var(--tw-text-opacity, 1));
}

.text-ink-800 {
  --tw-text-opacity: 1;
  color: rgb(58 58 71 / var(--tw-text-opacity, 1));
}

.text-ink-900 {
  --tw-text-opacity: 1;
  color: rgb(43 43 57 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

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

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

.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(0 195 137 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(0 157 114 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(0 125 93 / var(--tw-text-opacity, 1));
}

.text-teal-900 {
  --tw-text-opacity: 1;
  color: rgb(1 81 63 / var(--tw-text-opacity, 1));
}

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

.opacity-50 {
  opacity: 0.5;
}

.shadow-\[0_10px_24px_-14px_rgba\(27\2c 139\2c 249\2c 0\.45\)\] {
  --tw-shadow: 0 10px 24px -14px rgba(27,139,249,0.45);
  --tw-shadow-colored: 0 10px 24px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_38px_-14px_rgba\(27\2c 139\2c 249\2c 0\.35\)\] {
  --tw-shadow: 0 18px 38px -14px rgba(27,139,249,0.35);
  --tw-shadow-colored: 0 18px 38px -14px 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_2px_12px_4px_rgba\(27\2c 139\2c 249\2c 0\.4\)\] {
  --tw-shadow: 0 2px 12px 4px rgba(27,139,249,0.4);
  --tw-shadow-colored: 0 2px 12px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_5px_1px_rgba\(138\2c 148\2c 159\2c 0\.3\)\] {
  --tw-shadow: 0 2px 5px 1px rgba(138,148,159,0.3);
  --tw-shadow-colored: 0 2px 5px 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_8px_18px_-6px_rgba\(27\2c 139\2c 249\2c 0\.55\)\] {
  --tw-shadow: 0 8px 18px -6px rgba(27,139,249,0.55);
  --tw-shadow-colored: 0 8px 18px -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-card {
  --tw-shadow: 0 1px 2px rgba(27, 27, 37, .04), 0 8px 24px -12px rgba(27, 27, 37, .18);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

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

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

.ring-amber-600\/20 {
  --tw-ring-color: rgb(217 119 6 / 0.2);
}

.ring-brand-600\/20 {
  --tw-ring-color: rgb(15 108 198 / 0.2);
}

.ring-brand-600\/30 {
  --tw-ring-color: rgb(15 108 198 / 0.3);
}

.ring-fh-topbar {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 234 254 / var(--tw-ring-opacity, 1));
}

.ring-ink-900\/5 {
  --tw-ring-color: rgb(43 43 57 / 0.05);
}

.ring-red-600\/20 {
  --tw-ring-color: rgb(220 38 38 / 0.2);
}

.ring-teal-600\/20 {
  --tw-ring-color: rgb(0 157 114 / 0.2);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: 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, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[color\] {
  transition-property: color;
  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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-\[400ms\] {
  transition-duration: 400ms;
}

/* Poppins is the storefront's typeface. Self-hosted (latin subset only, four
   weights, ~8 KB each) rather than pulled from Google Fonts: the legacy app's
   <link> to fonts.googleapis.com made every page render wait on a third party.
   The paths are relative so AssetMapper rewrites them to the digested files. */

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("../fonts/poppins-400-heQdAz3.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("../fonts/poppins-500-AuPgurU.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url("../fonts/poppins-600-RV1hfMj.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url("../fonts/poppins-700-5ePuYxR.woff2") format('woff2');
}

/* Open Sans carries body copy on the storefront landing page, which is a copy
   of flexhosting.co. Google serves it as a single variable file, so one face
   covers the whole 400–700 range the design uses. */

@font-face {
  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400 700;

  font-display: swap;

  src: url("../fonts/open-sans-30nvAOJ.woff2") format('woff2');
}

@keyframes fh-bob {
  0%   {
    transform: translateY(-8px);
  }

  50%  {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(-8px);
  }
}

@keyframes fh-bob-float {
  100% {
    transform: translateY(-8px);
  }
}

.placeholder\:text-fh-body::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

.placeholder\:text-fh-body::placeholder {
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

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

.hover\:border-ink-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 225 / var(--tw-border-opacity, 1));
}

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

.hover\:bg-fh-band:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-fh-blue:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 146 248 / var(--tw-bg-opacity, 1));
}

.hover\:bg-fh-heading:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 47 53 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

.hover\:bg-white\/30:hover {
  background-color: rgb(255 255 255 / 0.3);
}

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

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

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

.hover\:text-fh-blue:hover {
  --tw-text-opacity: 1;
  color: rgb(17 146 248 / var(--tw-text-opacity, 1));
}

.hover\:text-ink-200:hover {
  --tw-text-opacity: 1;
  color: rgb(217 217 225 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

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

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

.focus\:ring-fh-blue:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(17 146 248 / var(--tw-ring-opacity, 1));
}

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

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.group:hover .group-hover\:text-fh-blue {
  --tw-text-opacity: 1;
  color: rgb(17 146 248 / var(--tw-text-opacity, 1));
}

.data-\[state\=available\]\:flex[data-state="available"] {
  display: flex;
}

.data-\[state\=taken\]\:flex[data-state="taken"] {
  display: flex;
}

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

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

.data-\[state\=available\]\:items-center[data-state="available"] {
  align-items: center;
}

.data-\[state\=taken\]\:items-center[data-state="taken"] {
  align-items: center;
}

.data-\[state\=available\]\:gap-3[data-state="available"] {
  gap: 0.75rem;
}

.data-\[state\=taken\]\:gap-3[data-state="taken"] {
  gap: 0.75rem;
}

.data-\[state\=available\]\:rounded-\[3px\][data-state="available"] {
  border-radius: 3px;
}

.data-\[state\=taken\]\:rounded-\[3px\][data-state="taken"] {
  border-radius: 3px;
}

.data-\[state\=available\]\:bg-fh-pill-green[data-state="available"] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 248 240 / var(--tw-bg-opacity, 1));
}

.data-\[state\=taken\]\:bg-fh-pill-orange[data-state="taken"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 242 235 / var(--tw-bg-opacity, 1));
}

.data-\[state\=available\]\:px-4[data-state="available"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

.data-\[state\=available\]\:py-3[data-state="available"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.data-\[state\=taken\]\:px-4[data-state="taken"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

.data-\[state\=taken\]\:py-3[data-state="taken"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.data-\[state\=available\]\:text-fh-green[data-state="available"] {
  --tw-text-opacity: 1;
  color: rgb(46 191 109 / var(--tw-text-opacity, 1));
}

.data-\[state\=checking\]\:text-fh-body[data-state="checking"] {
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

.data-\[state\=error\]\:text-fh-body[data-state="error"] {
  --tw-text-opacity: 1;
  color: rgb(138 148 159 / var(--tw-text-opacity, 1));
}

.data-\[state\=taken\]\:text-fh-orange[data-state="taken"] {
  --tw-text-opacity: 1;
  color: rgb(255 124 63 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

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

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

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

  .sm\:border-r {
    border-right-width: 1px;
  }

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

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

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

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

  .md\:block {
    display: block;
  }

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

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

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

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

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

  .md\:w-\[calc\(118\%\+1\.3px\)\] {
    width: calc(118% + 1.3px);
  }

  .md\:w-\[calc\(152\%\+1\.3px\)\] {
    width: calc(152% + 1.3px);
  }

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

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

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

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

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

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

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

  .md\:bg-transparent {
    background-color: transparent;
  }

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

  .md\:p-\[6px\] {
    padding: 6px;
  }

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

  .md\:px-\[82px\] {
    padding-left: 82px;
    padding-right: 82px;
  }

  .md\:pb-\[250px\] {
    padding-bottom: 250px;
  }

  .md\:pb-\[300px\] {
    padding-bottom: 300px;
  }

  .md\:pb-\[70px\] {
    padding-bottom: 70px;
  }

  .md\:pl-6 {
    padding-left: 1.5rem;
  }

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

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

  .md\:pt-\[100px\] {
    padding-top: 100px;
  }

  .md\:pt-\[70px\] {
    padding-top: 70px;
  }

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

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

  .md\:shadow-\[0_12px_30px_-14px_rgba\(27\2c 139\2c 249\2c 0\.45\)\] {
    --tw-shadow: 0 12px 30px -14px rgba(27,139,249,0.45);
    --tw-shadow-colored: 0 12px 30px -14px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

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

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

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

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

  .md\:ring-fh-topbar {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(214 234 254 / var(--tw-ring-opacity, 1));
  }

  .md\:transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .md\:focus-within\:shadow-\[0_14px_34px_-12px_rgba\(27\2c 139\2c 249\2c 0\.55\)\]:focus-within {
    --tw-shadow: 0 14px 34px -12px rgba(27,139,249,0.55);
    --tw-shadow-colored: 0 14px 34px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .md\:focus-within\:ring-fh-blue:focus-within {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(17 146 248 / var(--tw-ring-opacity, 1));
  }

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

  .data-\[state\=available\]\:md\:flex-row[data-state="available"] {
    flex-direction: row;
  }

  .data-\[state\=taken\]\:md\:flex-row[data-state="taken"] {
    flex-direction: row;
  }

  .data-\[state\=available\]\:md\:justify-between[data-state="available"] {
    justify-content: space-between;
  }

  .data-\[state\=taken\]\:md\:justify-between[data-state="taken"] {
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .lg\:order-first {
    order: -9999;
  }

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

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

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

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

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

  .lg\:ml-\[3\.596\%\] {
    margin-left: 3.596%;
  }

  .lg\:ml-\[5\.526\%\] {
    margin-left: 5.526%;
  }

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:\!hidden {
    display: none !important;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

  .lg\:w-\[23\.69\%\] {
    width: 23.69%;
  }

  .lg\:w-\[29\.5\%\] {
    width: 29.5%;
  }

  .lg\:w-\[37\.688\%\] {
    width: 37.688%;
  }

  .lg\:w-\[calc\(106\%\+1\.3px\)\] {
    width: calc(106% + 1.3px);
  }

  .lg\:w-\[calc\(120\%\+1\.3px\)\] {
    width: calc(120% + 1.3px);
  }

  .lg\:w-\[calc\(126\%\+1\.3px\)\] {
    width: calc(126% + 1.3px);
  }

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

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

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

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

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

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

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

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

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:border-fh-topbar {
    --tw-border-opacity: 1;
    border-color: rgb(214 234 254 / var(--tw-border-opacity, 1));
  }

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

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

  .lg\:px-\[15\%\] {
    padding-left: 15%;
    padding-right: 15%;
  }

  .lg\:px-\[39px\] {
    padding-left: 39px;
    padding-right: 39px;
  }

  .lg\:px-\[8\.5\%\] {
    padding-left: 8.5%;
    padding-right: 8.5%;
  }

  .lg\:py-\[27px\] {
    padding-top: 27px;
    padding-bottom: 27px;
  }

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

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

  .lg\:pb-\[108px\] {
    padding-bottom: 108px;
  }

  .lg\:pb-\[112px\] {
    padding-bottom: 112px;
  }

  .lg\:pb-\[120px\] {
    padding-bottom: 120px;
  }

  .lg\:pb-\[130px\] {
    padding-bottom: 130px;
  }

  .lg\:pb-\[251px\] {
    padding-bottom: 251px;
  }

  .lg\:pb-\[323px\] {
    padding-bottom: 323px;
  }

  .lg\:pb-\[59px\] {
    padding-bottom: 59px;
  }

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

  .lg\:pr-\[9\%\] {
    padding-right: 9%;
  }

  .lg\:pt-\[121px\] {
    padding-top: 121px;
  }

  .lg\:pt-\[14px\] {
    padding-top: 14px;
  }

  .lg\:pt-\[152px\] {
    padding-top: 152px;
  }

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

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

  .lg\:text-\[14px\] {
    font-size: 14px;
  }

  .lg\:text-\[16px\] {
    font-size: 16px;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}