*, ::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(--font-sans);
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: var(--font-sans);
  /* 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 {
  /* Display steps. 3.125vw = 60/1920, 2.2vw ≈ 32/1920 rounded up so the
           step reaches its cap slightly before the widest breakpoint. */
  --fs-h1: clamp(2rem, 3.125vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h3: clamp(1.5rem, 1.458vw, 1.75rem);
  --fs-h4: clamp(1.375rem, 1.75vw, 1.625rem);
  --fs-h5: 1.375rem;
  --fs-h6: 1.125rem;
  /* Text steps. Flat, not fluid: body copy that changes size with the
           viewport is harder to read, not easier — the responsive part of this
           system is the display scale above. */
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Leading tightens as type grows — a 60px headline set at body leading
           falls apart, and 16px copy set at 1.1 is unreadable. */
  --lh-display: 1.1;
  --lh-heading: 1.35;
  --lh-title: 1.5;
  --lh-body: 1.6;
  --lh-relaxed: 1.8;
  /* Tracking, in `em` so it scales with whatever size it lands on. */
  --ls-display: -0.06em;
  --ls-tight: -0.04em;
  --ls-wide: 0.08em;
  --ls-wider: 0.12em;
}

/* Defaults for headings and copy that carry NO class of their own — blog
       content authored in CKEditor, a bare <h3> inside a component, anything
       written rather than composed. Scoped with :not([class]) on purpose: it can
       never fight a component or a utility, so adding a sensible default here
       cannot change an existing design. Anything with a class is that class's
       business. */

h1:not([class]) {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}

h2:not([class]) {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}

h3:not([class]) {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

h4:not([class]) {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

h5:not([class]) {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

h6:not([class]) {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

p:not([class]),
    li:not([class]) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

small:not([class]) {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* A long heading should break where a reader would break it, and a
       paragraph should not end on a single orphaned word. Both degrade to
       normal wrapping where unsupported. */

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* iOS Safari zooms the page when a focused control's type is under 16px.
       Every input on the site is therefore at least body size on a phone; above
       `sm` they go back to the size the design draws them at. `max()` keeps a
       control that is deliberately LARGER than 16px at its own size.

       The :not() pair is not filtering checkboxes for their own sake — they have
       no type to set — it is there to buy SPECIFICITY. Component classes like
       `.qf-input` set a 14px size from the components layer, which outranks a
       bare `input` selector; (0,2,1) outranks the class, so the floor holds
       without this rule having to name every control class on the site. Each
       excluded case is one that cannot zoom anyway — a checkbox has no text, a
       hidden or disabled control cannot take focus. */

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
        select:not([hidden]):not([disabled]),
        textarea:not([hidden]):not([disabled]) {
    font-size: max(16px, 1em);
  }
}

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

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-lg {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2222222em;
  line-height: 1.4545455;
  margin-top: 1.0909091em;
  margin-bottom: 1.0909091em;
}

.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}

.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  border-radius: 0.3125rem;
  padding-top: 0.2222222em;
  padding-inline-end: 0.4444444em;
  padding-bottom: 0.2222222em;
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8666667em;
}

.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.875em;
}

.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.375rem;
  padding-top: 1em;
  padding-inline-end: 1.5em;
  padding-bottom: 1em;
  padding-inline-start: 1.5em;
}

.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}

.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}

.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
}

.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.75em;
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
  margin-top: 1em;
}

.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

/* Text-role classes for the places that need a role but not a whole
       design-system component (a lead paragraph, a caption, an overline).
       Sections and cards reach for .section-desc / .card-title first — these
       exist so that "small grey text" is still a named decision rather than a
       hand-picked `text-sm text-gray-500`. */

.text-lead {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.text-caption {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* The uppercase rule above a list or a column — the treatment
       `.package-label` wears, available on its own. */

.text-overline {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-lead.on-dark,
    .text-caption.on-dark,
    .text-overline.on-dark {
  color: var(--text-inverse-body);
}

/* The one monospace on the site: a system stack, no webfont. For a figure
       that has to line up in a column, a reference number, a code sample. */

.font-mono-system {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Numerals that must line up vertically in a table or a stat column —
       Inter's default figures are proportional. */

.tabular-figures {
  font-variant-numeric: tabular-nums;
}

.\!btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  font-weight: var(--fw-semibold) !important;
  /* Default size (md), straight off the design spec. .btn-xs / .btn-sm /
           .btn-lg override these four. No min-height: padding + line-height
           already land the md button on its 49px design height. */
  padding: 11.5px 20px !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  gap: 10px !important;
  transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: var(--fw-semibold);
  /* Default size (md), straight off the design spec. .btn-xs / .btn-sm /
           .btn-lg override these four. No min-height: padding + line-height
           already land the md button on its 49px design height. */
  padding: 11.5px 20px;
  font-size: 1rem;
  line-height: 1.6;
  gap: 10px;
  transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;
}

.\!btn:hover {
  transform: translateY(-1px) !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.\!btn:active {
  transform: translateY(0) !important;
  transition-duration: 0.08s !important;
}

.btn:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

.\!btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* `<a>` cannot be :disabled, so honour the ARIA/utility forms too. */

.\!btn:disabled,
    .\!btn[aria-disabled="true"],
    .\!btn.is-disabled {
  pointer-events: none !important;
  opacity: 0.55 !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn:disabled,
    .btn[aria-disabled="true"],
    .btn.is-disabled {
  pointer-events: none;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.\!btn:disabled,
    .\!btn[aria-disabled="true"],
    .\!btn.is-disabled {
  pointer-events: none !important;
  opacity: 0.55 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Icons never stretch, and an arrow marked `.btn-arrow` slides on hover —
       the single permitted in-button flourish. */

.\!btn > svg,
    .\!btn > i {
  flex-shrink: 0 !important;
}

.btn > svg,
    .btn > i {
  flex-shrink: 0;
}

.\!btn > svg,
    .\!btn > i {
  flex-shrink: 0 !important;
}

.\!btn .btn-arrow {
  transition: transform 0.2s ease !important;
}

.btn .btn-arrow {
  transition: transform 0.2s ease;
}

.\!btn:hover .btn-arrow {
  transform: translateX(3px) !important;
}

.btn:hover .btn-arrow,
    .btn-host:hover .btn-arrow {
  transform: translateX(3px);
}

/* ── Sizes ───────────────────────────────────────────────────────────── */

.btn-xs {
  padding: 6px 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  gap: 6px;
}

.btn-sm {
  padding: 8.5px 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  gap: 8px;
}

.btn-lg {
  padding: 15px 28px;
  font-size: 1.0625rem;
  line-height: 1.6;
  gap: 10px;
}

/* ── Shapes ──────────────────────────────────────────────────────────── */

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 49px;
  height: 49px;
  padding: 0;
  gap: 0;
}

.btn-icon.btn-xs {
  width: 32px;
  height: 32px;
}

.btn-icon.btn-sm {
  width: 41px;
  height: 41px;
}

.btn-icon.btn-lg {
  width: 58px;
  height: 58px;
}

/* Round shape. Every button in the page body keeps the design file's 4px
       corner — this is the ONE exception, reserved for the floating action
       buttons in base.html, where a circular affordance floating over the page
       is the platform convention and a 4px square reads as a stray tile. */

.btn-round {
  border-radius: 9999px;
}

/* ── Variants ────────────────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 12px 24px 0 rgba(249, 115, 22, 0.12);
}

.btn-primary:hover {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-foreground);
  box-shadow: 0 10px 22px -8px rgba(234, 88, 12, 0.65);
}

.btn-secondary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn-secondary:hover {
  background-color: var(--primary-strong);
  border-color: var(--primary-strong);
  color: var(--primary-foreground);
  box-shadow: 0 10px 22px -8px rgba(23, 37, 84, 0.6);
}

/* The design file's solid-black CTA — the quiet partner to `.btn-primary`
       where a card already carries the accent button and the second action must
       not compete with it (the contact page's "Request a free moving quote").
       It keeps the primary's shadow geometry so the pair reads as one set. */

.btn-ink {
  background-color: var(--black);
  border-color: var(--black);
  color: #ffffff;
  box-shadow: 0 12px 24px 0 rgba(22, 20, 19, 0.12);
}

.btn-ink:hover {
  background-color: var(--black-strong);
  border-color: var(--black-strong);
  color: #ffffff;
  box-shadow: 0 10px 22px -8px rgba(22, 20, 19, 0.55);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--foreground);
}

.btn-outline-light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* The accent outline — the design's package-card CTA. `.btn-outline-light`
       is still the supporting action on a dark surface; this is for the tile
       whose CTA is the ONLY action on it and where a solid accent button would
       outweigh the card it sits in. It fills with accent on hover like every
       other outline, so the rule it starts with is the fill it ends with. */

.btn-outline-accent {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* The outline that does not know what it sits on. Both its ink and its rule
       come from `currentColor`, so one button works on a surface that changes
       colour underneath it — the header nav, which is transparent over a photo
       hero, navy on interior pages and white once scrolled. Use `.btn-outline`
       or `.btn-outline-light` whenever the surface IS known; this variant is for
       the case where it genuinely is not. */

.btn-outline-adaptive {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}

@supports (border-color: color-mix(in srgb, currentColor 35%, transparent)) {
  .btn-outline-adaptive {
    border-color: color-mix(in srgb, currentColor 35%, transparent);
  }
}

.btn-white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.btn-soft {
  background-color: rgba(249, 115, 22, 0.12);
  border-color: transparent;
  color: var(--accent);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: currentColor;
}

/* The shared "fills with accent" hover, kept in one place so the outline
       and tinted variants can never drift apart.

       A card that lights its own CTA when the CARD is hovered marks itself
       `.btn-host`. The button then wears exactly this treatment without the
       cursor ever being on it — the alternative is every such card re-declaring
       the fill locally, which is how variants drift. `.btn-host` deliberately
       does NOT lift the button: the pointer is on the card, so a button that
       jumps under a cursor that never touched it reads as a glitch. */

.btn-outline:hover,
    .btn-outline-light:hover,
    .btn-outline-accent:hover,
    .btn-outline-adaptive:hover,
    .btn-white:hover,
    .btn-soft:hover,
    .btn-host:hover .btn-outline,
    .btn-host:hover .btn-outline-light,
    .btn-host:hover .btn-outline-accent,
    .btn-host:hover .btn-outline-adaptive,
    .btn-host:hover .btn-white,
    .btn-host:hover .btn-soft {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 10px 22px -8px rgba(234, 88, 12, 0.55);
}

/* Ghost is the quiet one — it tints rather than fills, and stays flat, so
       menu rows do not jump around under the cursor. */

.btn-ghost:hover {
  background-color: rgba(249, 115, 22, 0.1);
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

/* Ghost rows sitting on the navy header/footer need the light treatment. */

@media (prefers-reduced-motion: reduce) {
  .\!btn,
        .\!btn:hover,
        .\!btn:active,
        .\!btn:hover .btn-arrow {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .btn,
        .btn:hover,
        .btn:active,
        .btn:hover .btn-arrow,
        .btn-host:hover .btn-arrow {
    transform: none;
    transition-duration: 0.01ms;
  }

  .\!btn,
        .\!btn:hover,
        .\!btn:active,
        .\!btn:hover .btn-arrow {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Menu rows ───────────────────────────────────────────────────────────
       The dropdown-panel and mobile-drawer list items. Deliberately NOT `.btn`
       — they are full-width, left-aligned rows — but they speak the same
       accent-on-hover language, so the nav reads as one piece with the CTAs.
       `.menu-item-light` is the variant for the navy header/drawer. */

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  color: rgba(31, 41, 55, 0.78);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-item:hover {
  background-color: rgba(249, 115, 22, 0.08);
  color: var(--accent);
}

.menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Services we do not run yet: shown, but plainly inert. */

.menu-item-disabled,
    .menu-item-disabled:hover {
  opacity: 0.4;
  background-color: transparent;
  color: inherit;
  cursor: not-allowed;
  pointer-events: none;
}

/* These rules USED to live in a \3c style> block inside the header partial.
       That was a real bug, not a tidiness issue: output.css is deferred and the
       header's own \3c style> sits in the BODY, so on a fresh page load the panel's
       Tailwind classes (w-[620px], bg-background, shadow-2xl …) were already in
       the head-inlined critical sheet while the rule that HIDES the panel was
       not. Every navigation therefore painted the dropdowns as visible blocks
       for a frame before the body style caught up — the flash in the corner.

       Living here, they are picked up by tailwind.critical.config.js (which
       scans header.html, finds `nav-panel` in the markup, and emits the matching
       @layer components rules), so the hidden state is in <head> and applies to
       the very first paint. Anything that decides whether a header element is
       VISIBLE belongs in this file for that reason. */

/* ── Dropdown panels ──────────────────────────────────────────────────────
       Each panel hangs under the trigger it belongs to. `position: fixed` rather
       than `absolute`: the panel then lives in viewport coordinates, which is
       what lets the script clamp it inside the screen without fighting the
       header's own offsets, and it escapes any ancestor that might clip it. The
       script writes `top`, `left` and `max-width` when the panel opens, so there
       is no header arithmetic duplicated here to drift out of sync.

       This replaced a version that centred every panel on the VIEWPORT. That did
       stop the widest panel clipping on a 1024px screen, but it also meant no
       panel pointed at the item you were hovering — the clamp below fixes the
       clipping without giving that up. */

/* Desktop nav link type: 16px / 400 / 180%, per the design. `.btn-sm` sets
       a smaller, semibold face for buttons generally, so the header states its
       own here rather than bending the button scale for everyone else.

       Colour is deliberately NOT set. These links read `currentColor` from the
       header's mode (`--hdr-fg`), which is what lets one set of markup serve the
       white bar, the transparent-over-hero bar and the navy menu-open bar. The
       spec's #FFF is what that resolves to in the two dark modes; pinning it
       here would paint white type onto the white bar every interior page uses. */

.site-header-nav .nav-link {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

/* Labels inside a dropdown panel — the panel's own heading and a column
       heading within it. Both are sentence case, never uppercase: a menu is
       read, not scanned as a poster, and SHOUTED LABELS also cost the word
       shapes that make a list quick to skim.

       `.nav-group-label` is the accent column heading; `.nav-panel-label` the
       muted one on the panel's top rule. Neither is the size of a menu ROW —
       every actual submenu item is one size, `.menu-item`'s, and these are
       labels rather than items. */

/* Deliberately a step ABOVE the rows they head (15px against .menu-item's
       14px). These are the panel's structure — which panel you are in, and
       which column of it — so they read first and the list reads second. */

.nav-group-label,
    .nav-panel-label {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-group-label {
  padding: 0.25rem 0.75rem;
  color: var(--accent);
}

.nav-panel-label {
  color: var(--black, #161413);
}

/* The "N services" counter on the panel's top rule. Same size and ink as the
       label it sits opposite; the regular weight against the label's 600 is what
       keeps it reading as an aside rather than a second heading. */

.nav-panel-count {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--black, #161413);
}

/* Dropdown rows sit a step above `.menu-item`'s shared 13px. Scoped to
       `.nav-panel` and declared HERE rather than raised on the shared class in
       input.css: the size is this component's decision, and the drawer (which
       reuses `.menu-item`) sets its own. */

.nav-panel .menu-item {
  font-size: 0.875rem;
}

.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  /* The panel is its own surface, so it sets its own ink rather than
           inheriting the bar's. That matters more than it looks: the nav sets
           `color: var(--hdr-fg)`, which is WHITE while the header is
           transparent, and several labels in here are `text-foreground/40`-style
           classes that Tailwind cannot generate (an opacity modifier needs a
           channel-based colour, and `--foreground` holds a whole hex). Those
           elements therefore fall back to whatever they inherit — which was the
           bar's white, on a white panel. */
  color: var(--foreground);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-panel.dropdown-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hover bridge. The gap between the bar and the panel is dead space the
       cursor has to cross, and while it is in there the pointer is over neither
       element, so the close timer starts. This spans the gap so the two read as
       one hover target and the panel cannot flicker shut mid-travel. */

.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

/* The caret. Drawn at `--nav-panel-caret`, which the script sets to the
       trigger's centre measured from the panel's own left edge — so it keeps
       pointing at the right menu item even when the panel has been nudged
       sideways to stay on screen. */

.nav-panel::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--nav-panel-caret, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  transform: translateY(50%) rotate(45deg);
  background-color: var(--background);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-top-left-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel {
    transition: opacity 0.15s ease, visibility 0.15s;
    transform: none;
  }

  .nav-panel.dropdown-open {
    transform: none;
  }
}

/* ── Section header type scale ───────────────────────────────────────────
       The eyebrow box, H2 and body copy every marketing section is built from.
       Taken from the design file:

           eyebrow  padding 2px 12px; radius 4px; 1px border;
                    #DAD9D9 on white, rgba(255,255,255,.08) on the dark band
           title    Inter 60/110%, weight 600, letter-spacing -3.6px (= -.06em)
                    #161413 on white, #FFF on the dark band
           desc     Inter 16/180%, weight 400
                    #5C5B5A on white, rgba(255,255,255,.80) on the dark band

       Add `.on-dark` to any of the three when the section sits on #161413.
       Every number below is a token from the typography block at the top of
       this file (--fs-h1 is the 60/32px title step, --fs-body the 16px copy),
       so the scale is adjusted in one place rather than three. The family is
       not declared here at all: it is inherited from <html>.
       Sections must use these classes rather than re-declaring text-* sizes,
       for the same reason buttons must use `.btn`. */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid var(--black-16);
  background-color: var(--black-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}

/* The bullet in front of the label is decoration, not content. */

.section-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: currentColor;
}

.section-eyebrow.on-dark {
  border-color: var(--white-8);
  background-color: transparent;
  color: var(--text-inverse);
}

.section-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}

.section-title.on-dark {
  color: var(--text-inverse);
}

.section-desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.section-desc.on-dark {
  color: var(--text-inverse-body);
}

/* Package card. One step BELOW the section header scale — a card heading is
       never an <h2> — and kept here for the same reason the header scale is:
       the packages grid, and any card that reuses this shape later, must read
       its type from one place instead of re-declaring text-* sizes locally.

         .package-title  Inter 600, 28px at 1920 (fluid to 24px), 110%, -.04em
         .spec-pill      the light-surface, rounded-full counterpart to
                         `.section-eyebrow` / `.hero-pill` — the short factual
                         chips under a card's copy (crew, truck, who it suits)
         .package-label  the small uppercase rule above a list ("WHAT'S INCLUDED")

       Radii follow the design file's 4px language everywhere else on the card
       (photograph, buttons); the chips are the one deliberate pill. */

.package-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

/* Dark counterpart, same as `.section-title.on-dark` — the card scale is
       also what the dark bands use for a statement line (the About page's
       mission panel), so the colour lives here rather than at the call site. */

.package-title.on-dark {
  color: var(--text-inverse);
}

/* The design file's H4 — 32px at 1920 (fluid to 24px), 150% leading,
       -0.06em. The heading of a panel or a list row: the quick-quote card's
       "Get a free quote in 2 hours", and each row of the service page's
       "what agents actually check" band.

       It is NOT `.package-title`, and the two are easy to confuse. That one is
       28px at 110% and -0.04em — a tight, display-set card title that stacks
       over an image. This one is looser and larger, set at body leading,
       because it heads a block of prose rather than labelling a card.

       It lives here rather than inside the form-card block because two
       components now want it; that is exactly when a size stops belonging to
       one component. */

.card-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}

.card-title.on-dark {
  color: var(--text-inverse);
}

/* Two steps down from it, named the way the button sizes are so the scale
       reads as a scale. Same face, weight and tracking throughout — only size
       and leading move.

         (default)  32px  a PANEL heading: the quick-quote card, "what affects
                          your quote"
         .is-sm     26px  a ROW IN A STACK: the "what agents actually check"
                          band, the scope-grid cards. A stacked row heads two
                          lines of copy and repeats four to eight times, so the
                          panel size shouts.
         .is-xs     22px  a CELL heading: a fact tile's value, one factor in a
                          list, a sub-heading over a column of prose. Flat, not
                          fluid — below this size a clamp buys nothing.
         .is-2xs    18px  a LINK-ROW heading: the name on a site-map card, a
                          row in a long index. The step below a cell heading,
                          for a title that repeats thirty times and has to
                          stay a label rather than become a headline. Tracking
                          eases off with the size — -0.06em is a display
                          setting and reads as a squeeze at 18px.

       These are named steps rather than font-sizes re-declared at call sites,
       which is the whole reason the scale lives here. */

.card-title.is-sm {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.card-title.is-xs {
  font-size: var(--fs-h5);
  line-height: 1.4;
}

.card-title.is-2xs {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

/* The bordered icon square the design file puts in front of a fact, a
       factor or a list row — a 40px white chip with the 16%-black hairline and
       the card corner, holding a 20px line-art glyph.

       `stroke-width` has to be set here because lucide writes 2 onto the <svg>
       as an attribute, which a stylesheet outranks; the design draws these as
       line art, not as UI glyphs. */

.icon-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--black-16);
  background-color: #ffffff;
  color: var(--black);
}

.icon-chip svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* Dark counterpart, the same bargain `.stat-card.on-light` makes in the
       other direction: geometry and glyph size stay in the base class and only
       the three colours move. Both the fill and the rule are white alphas —
       the same pair the stat tile uses — so one chip works on the `.glow-plate`
       bands and over a photograph without a second set of values. The glyph
       takes the accent, which on a near-black plate is the only colour on the
       tile and is what makes the chip read at all.

       Tailwind cannot express this: `--accent` holds a whole hex, so an
       opacity modifier like `bg-accent/10` compiles to nothing (see the note on
       `.qf-choice:has(:checked)`), which is exactly the trap a named variant
       here avoids. */

.icon-chip.on-dark {
  border-color: var(--white-8);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--black-16);
  background-color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-body);
  white-space: nowrap;
}

.spec-pill > i,
    .spec-pill > svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* --------------------------------------------------------------------
       Progress rail — "how much of this invoice is paid".

       A real <progress>, not two nested divs: the fraction is data, so the
       element that carries it should be the one browsers and screen readers
       already understand, and `value`/`max` are plain HTML attributes. The
       alternative — a filled div sized by `style="width: {{ n }}%"` — puts a
       template tag inside a CSS declaration, which every editor's CSS parser
       flags and no build step can check.

       The three fill selectors CANNOT be grouped: an unknown pseudo-element
       invalidates the whole selector list, so a Chrome rule and a Firefox rule
       written together would style neither. They stay separate on purpose.
       -------------------------------------------------------------------- */

.progress-rail {
  display: block;
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 9999px;
  overflow: hidden;
  /* Firefox paints the TRACK from the element's own background; WebKit
           uses ::-webkit-progress-bar below. Setting both is what makes one
           rail read the same in every engine. */
  background-color: var(--black-8);
  /* Without this, WebKit renders its native chrome and ignores the rest. */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.progress-rail::-webkit-progress-bar {
  background-color: var(--black-8);
  border-radius: 9999px;
}

.progress-rail::-webkit-progress-value {
  background-color: var(--accent);
  border-radius: 9999px;
  -webkit-transition: width 500ms ease;
  transition: width 500ms ease;
}

.progress-rail::-moz-progress-bar {
  background-color: var(--accent);
  border-radius: 9999px;
}

.package-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-body);
}

/* --------------------------------------------------------------------
       Card surface. The one bordered-card treatment on the site, in one
       place: the most-booked service tiles, the moving-guides articles and
       the packages grid all wear it, and a fourth bordered card reuses this
       rather than re-picking a border colour, a radius and a shadow.

       Resting:  white fill, `--border` hairline, 12px corner, a shadow just
                 heavy enough to lift the card off a white page.
       Hover:    the SAME language the buttons use — the hairline warms to
                 accent, the shadow deepens into accent ink, and the card
                 lifts. Nothing here is a hand-picked colour; both come from
                 the accent token.

       `:hover` sits on the surface itself rather than on an ancestor, so the
       class works whether the card IS the link (packages) or the surface is
       a child of one (the two index bands). Those two put the chrome on an
       inner element on purpose: their outer element carries a 0.7s
       scroll-reveal `transform`, and a hover lift on that same property would
       play back at reveal speed.

       Padding is deliberately NOT here — a photo card and a copy card want
       different insets, and that is the call site's business. */

.card-surface {
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--card, #ffffff);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.card-surface:hover,
    .card-surface:focus-within {
  border-color: var(--accent);
  box-shadow: 0 18px 34px -18px rgba(249, 115, 22, 0.45);
  transform: translateY(-4px);
}

/* Reduced motion keeps the colour change and drops the movement — the
       same bargain every button on the site makes. */

@media (prefers-reduced-motion: reduce) {
  .card-surface {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .card-surface:hover,
        .card-surface:focus-within {
    transform: none;
  }
}

/* --------------------------------------------------------------------
       Moving service card. The design file's large service tile — photograph,
       H4 title, two lines of copy, then a meta/CTA row — as used by the state
       page's "moving services in <city>" grid.

       Geometry is the design's, stated as ratios rather than the pixel widths
       it was drawn at (592 x 513 at 1824): three of these on the 1824px frame
       leave a 24px gutter, so the grid sets the width and the card only owns
       its internal rhythm — 32px between the block and the action row, 16px
       between photograph and copy, 5px between title and body.

       Type is NOT declared here. The title is `.card-title` (the design's H4 —
       32px, 150%, -0.06em) and the copy is `.section-desc`, both already in
       this file; a card that re-declared them is exactly how the headings
       drifted apart before. Only `.svc-card-meta` is new, because the
       16px/600/-0.02em body-grey label beside the glyph existed nowhere yet.

       The surface, the rule and the hover come from `.card-surface`, so this
       card lifts and warms its hairline like every other bordered card on the
       site. The 16px inset is deliberate: the design draws the photograph with
       a 4px radius of its own, which only reads as its own shape if the card's
       rule is not sitting on top of it.

       The card IS the link, so its CTA must not be a nested <a>. It is a
       <span class="btn btn-outline-accent"> and the card carries `.btn-host`,
       the shared mechanism that lights a card's own button on card hover. */

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 16px;
  height: 100%;
  text-decoration: none;
}

/* Photograph + copy: one thought, held together at the design's 16px. */

.svc-card-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  /* Pushes the action row to the bottom edge, so a two-line title and a
           three-line one still line their buttons up across the row. */
  flex: 1 1 auto;
}

.svc-card-media {
  width: 100%;
  aspect-ratio: 592 / 304;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--secondary, #f1f5f9);
}

.svc-card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.7s ease-out;
}

.card-surface:hover .svc-card-media img {
  transform: scale(1.05);
}

.svc-card-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* The action row. 32px between the fact and the button, and the whole row
       at 80% so it reads as secondary to the title above it — the design file
       puts the opacity on the row, not on the two children, so the button's
       accent and the label's grey fade together. */

.svc-card-foot {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  opacity: 0.8;
}

/* The card lifts as a whole, so its own CTA must not lift again inside it;
       `.btn-host` already declines to, and this keeps the row's opacity from
       animating separately. Full strength on hover — the row is quiet at rest,
       not permanently dimmed. */

.card-surface:hover .svc-card-foot,
    .card-surface:focus-within .svc-card-foot {
  opacity: 1;
}

/* The glyph-plus-label fact beside the CTA ("20 points"). Body grey at the
       button's weight and tracking, so the two sides of the row sit on one
       optical line without the label competing with the accent. */

.svc-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--black-body);
}

.svc-card-meta [data-lucide],
    .svc-card-meta svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  flex: none;
}

/* The grid these sit in. `auto-fit` rather than a fixed 3, so a city with
       four services fills its last row instead of orphaning one, and the
       `min()` keeps a 420px track from overflowing a phone. */

.svc-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .svc-card-media img,
        .card-surface:hover .svc-card-media img {
    transition: none;
    transform: none;
  }
}

/* Comparison table. The design file draws this as a grid of boxes with a
       colour on almost every one, so the whole thing lives here as element
       selectors rather than a class on each of the ~60 cells — a table whose
       styling is retyped per <td> is a table whose columns drift apart.

       The structure the selectors assume:

         thead tr        the #161413 bar; first cell is the row label column
         tbody tr        52px rows, striped white / #FAFAFA, hairline on top
         .is-featured    the one recommended column, head and body cells alike.
                         It is a CLASS, not `:nth-child(3)`, so reordering the
                         columns cannot silently tint the wrong one.
         .cmp-mark       the 22px round check badge ("included")
         .cmp-dash       its absent counterpart
         .cmp-value      a cell that answers with a word instead of a tick

       The featured tint is deliberately translucent: 8% accent composited over
       whichever stripe the row is wearing, so the highlight follows the banding
       instead of flattening it into one solid block. */

/* `table-layout: fixed` is what makes the four package columns identical:
       the row-label column takes its declared share and the browser splits what
       is left equally, instead of sizing each package column to the longest
       string in it ("Scaled to site" was making Business half again as wide as
       Basic). */

.compare-table {
  width: 100%;
  /* The min-width is a breakpoint, not a constant. Five columns will not
           compress to a phone, so below `lg` the table stays 560px inside its
           scroller and the WHOLE table — row labels included — travels as one
           block under the finger. 560 is the smallest width at which no header
           or cell value has to break mid-word, and it is small enough that
           anything from 592px up (every tablet, and a large phone turned
           sideways) shows the table entire with no scrolling left to do. Only
           desktop, where the 1208px frame can hold it, asks for the design's
           full width.

           Pinning the label column with `position: sticky` was tried here and
           deliberately removed: it cost a 343px phone all but about one data
           column of visible travel — the part you are trying to read ended up
           with less room than the labels — and sticky on a `<th>` does not hold
           at all in a `border-collapse: collapse` table on iOS Safari, so the
           layout would have differed by browser on exactly the devices it was
           for. The scroller carries a swipe hint instead; see the comparison
           section in templates/pages/packages.html. */
  min-width: 560px;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: #ffffff;
}

/* The row-label column needs a bigger share of a narrow table than of a
       wide one — "Priority booking on peak dates" in 30% of 560px is five
       lines. */

.compare-table th:first-child {
  width: 36%;
}

@media (min-width: 1024px) {
  .compare-table {
    min-width: 1000px;
  }

  .compare-table th:first-child {
    width: 30%;
  }
}

.compare-table thead tr {
  background-color: var(--black);
}

.compare-table th {
  padding: 12px 8px;
  border-left: 1px solid var(--white-8);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
}

/* The row-label column: wider gutter, flush left, and one weight quieter —
       it names the rows rather than competing with the package names. */

.compare-table th:first-child {
  padding: 12px 14px;
  border-left: 0;
  text-align: left;
  font-weight: 500;
}

.compare-table td,
    .compare-table tbody th {
  padding: 12px 8px;
  border-top: 1px solid var(--black-8);
  border-left: 1px solid var(--black-8);
  text-align: center;
  color: var(--black-body);
}

/* The row label is a `th[scope=row]`, not a `td` — a screen reader reading
       out a lone tick needs the row name as well as the column name. So it is
       styled here rather than by `:first-child`. */

.compare-table tbody th {
  padding: 12px 14px;
  border-left: 0;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.compare-table tbody tr:nth-child(even) {
  background-color: var(--black-3);
}

/* Desktop holds the whole table in view, so the cells go back to the
       design's full gutters and the header to its full 16px. */

@media (min-width: 1024px) {
  .compare-table th {
    padding: 20px 12px;
    font-size: 1rem;
    line-height: 1.8;
  }

  .compare-table th:first-child {
    padding: 20px 28px;
  }

  .compare-table td,
        .compare-table tbody th {
    padding: 16px 28px;
  }

  .compare-table tbody th {
    line-height: 1.8;
  }
}

.compare-table .is-featured {
  background-color: rgba(249, 115, 22, 0.08);
  border-left-color: rgba(249, 115, 22, 0.5);
  border-right: 1px solid rgba(249, 115, 22, 0.5);
  color: var(--accent);
}

/* Same column in the dark bar: a stronger tint, a softer rule (a 50% accent
       edge disappears against #161413) and the 2px accent underline that ties
       the header to the tinted column below it. */

.compare-table thead .is-featured {
  background-color: rgba(249, 115, 22, 0.15);
  border-left-color: rgba(249, 115, 22, 0.25);
  border-right-color: rgba(249, 115, 22, 0.25);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The home size each package is built for, under its name in the dark bar.
       A block so it always takes its own line, and quieter than the name so the
       header still reads as one label rather than two. */

.cmp-col-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.compare-table thead .is-featured .cmp-col-note {
  color: rgba(255, 255, 255, 0.75);
}

.cmp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(249, 115, 22, 0.2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.cmp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1px solid var(--black-8);
  background-color: var(--black-8);
  color: var(--black-body);
}

.is-featured .cmp-mark {
  border-color: rgba(249, 115, 22, 0.5);
  background-color: rgba(249, 115, 22, 0.08);
  color: var(--accent);
}

.cmp-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--black-16);
}

/* A word rather than a tick — "2 movers", "Full", "Custom". Takes the cell's
       own colour, so it turns accent inside the featured column for free. */

.cmp-value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.8;
  color: inherit;
}

/* Stat card. The tile the design file uses on the dark bands — a big number
       and a quiet caption, inside a 6%-white box on a 6%-white panel. The type
       is the design file's H3 (40px at 1920, 110%, -.06em), one step below
       `.section-title`, so it is named here rather than re-declared per section
       the way the amber-on-navy version of this block used to be.

       Both the fill and the rule are white alphas rather than flat colours, so
       the same tile works on #161413 and on a photograph without a second set
       of values. */

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.06);
}

.stat-value {
  font-size: clamp(1.75rem, 2.083vw, 2.5rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-inverse);
}

/* The caption between the value and its sentence — "Moves completed" under
       the 10,000+. Same 16px body size as `.stat-label`, but 600 and full
       white, so the tile reads number -> what it counts -> the detail. */

.stat-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--text-inverse);
}

.stat-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.6);
}

/* Light counterpart of the tile family. The design file lays the same tile
       on a WHITE band as well — the state page's coverage row — where the
       white alphas above would draw an invisible card. `.on-light` swaps the
       four colours and nothing else: geometry, the type scale and the hover
       language stay in the base classes, so a tile that moves between a dark
       band and a white one changes one word instead of being rebuilt.

       The fill is the design's Black/3% over its Black/8% hairline — a step
       quieter than `.card-surface`'s bordered white card, deliberately: these
       tiles state facts, they are not a row of destinations competing for the
       click. The glyph takes the accent, the one colour on the tile. */

.stat-card.on-light {
  border-color: var(--black-8);
  background-color: var(--black-3);
}

.stat-value.on-light,
    .stat-title.on-light {
  color: var(--text-heading);
}

.stat-label.on-light {
  color: var(--text-body);
}

.tile-card-icon.on-light {
  color: var(--accent);
}

/* The dark hover lightens the fill with a white alpha, which on a light
       tile is a no-op; here the tile goes to flat white instead. Same accent
       hairline and same 1px lift, from `.tile-card.is-link`. */

.tile-card.is-link.on-light:hover {
  background-color: #ffffff;
}

/* Dark tile band. The frame and the tile row shared by the service page's
       two dark tile bands — "add ons"
       (components/service_detail/add_on_section.html) and "fleet & equipment"
       (…/fleet_and_equipment_section.html). Both sit on `.glow-plate`, both
       open with the shared section header and both lay a row of `.stat-card`
       tiles under it, so the frame and the row are named here rather than
       copied into two \3c style> blocks that would drift apart.

       Usage — the plate owns the surface, the band owns the frame:

           <section class="glow-plate">
             <div class="tile-band">
               <div class="mx-auto flex w-full max-w-[1824px] flex-col items-start gap-8 lg:gap-10">
                 … primary_section_header.html, tone="dark" …
                 <div class="tile-grid">
                   <a class="stat-card tile-card is-link"> … </a>   \3c !-- or a plain div -->
                 </div>
               </div>
             </div>
           </section>

       The 48px side padding lands that inner column on the site's 1824px cap
       at 1920 — the same frame the footer and the packages band use, so the
       tiles line up with the white sections above and below. */

.tile-band {
  /* Above `.glow-backdrop` for a band that also lights the plate. */
  position: relative;
  z-index: 1;
  padding: 48px 16px;
}

/* The reading band's taller frame. A dark plate that is a reading column —
       the "built for" band, the comparison table — wants more air above and
       below than the 60px tile row does, and pairs with the 1515px measure
       rather than the 1824px tile frame. Declared once here so the two bands
       that use it cannot drift; the side padding stays the site's 48px. */

.tile-band.is-tall {
  padding: 56px 16px;
}

/* Tiles at the design's 24px gutter, fewer per row as the frame narrows —
       no fixed column count, so a band authoring four tiles and one authoring
       five both fill their last row instead of orphaning one. The `min()` keeps
       a track from exceeding the frame on a phone, where a 260px floor would
       otherwise force a horizontal overflow. */

.tile-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

/* The tile's own padding and rhythm on top of `.stat-card`'s surface. That
       component's 12px gap is the step between a value and its caption; here a
       title and its copy are one thought, so it tightens to 8px and the glyph
       carries its own margin instead of widening the gap for everything.
       `height: 100%` carries the grid's stretch down onto the anchor, so the
       visible tile fills the track rather than just the cell. */

.tile-card {
  min-width: 0;
  height: 100%;
  gap: 8px;
  padding: 24px;
}

/* Size and stroke sit on the element itself, not on a descendant `svg`:
       lucide REPLACES `<i data-lucide>` with the `<svg>` and carries the class
       across, so this class lands on the svg and a `.tile-card-icon svg` rule
       would never match. The descendant rule is kept for the call site that
       hand-writes an inline `<svg>` inside the span instead. */

.tile-card-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 20px;
  color: #ffffff;
  /* Lucide's default 2px stroke reads as a heavy blob at 28px; the
           design's glyphs are hairline. */
  stroke-width: 1.5;
}

.tile-card-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* Feature tile. The design file's larger card — drawn for the state page's
       "why choose us" row — is the same bordered tile opened up to carry a
       heading at the CARD scale instead of a 16px caption, so it is a modifier
       here rather than a second component.

       Four things separate it from the tile above, all straight off the spec's
       438x312 card: the fill goes to flat white over the same Black/8 hairline
       (a statement card, not the quieter #FAFAFA fact tile), the padding grows
       to 32px, the glyph doubles to 48px and carries the 40px gap down to the
       text block, and the title/copy pair tightens to 4px because a heading and
       its sentence are one thought, not two. The type is NOT redeclared: the
       title wears `.card-title` (32/150%/-0.06em) and the copy
       `.stat-label.on-light` (16/180%, --text-body), which is exactly what the
       spec sets them to.

           <div class="stat-card on-light tile-card is-feature">
             <i class="tile-card-icon on-light is-feature" data-lucide="badge-check"></i>
             <h3 class="card-title">…</h3>
             <p class="stat-label on-light">…</p>
           </div>

       A 32px heading needs room, so a grid of these wants two columns where the
       fact tiles take four — the call site says so, the same way it always
       chooses its own track count. */

.tile-card.is-feature {
  gap: 4px;
  padding: 24px;
}

.stat-card.on-light.tile-card.is-feature {
  background-color: #ffffff;
}

/* Size and rhythm only — no colour. The glyph keeps the site's icon colour,
       which is the tile family's already: accent on a light tile
       (`.tile-card-icon.on-light`), white on a dark one. Stating a colour here
       would override `.on-light` (same specificity, later in the file) and give
       this one card a glyph that matches nothing else on the page. The hairline
       stroke is inherited from `.tile-card-icon`. */

.tile-card-icon.is-feature {
  width: 40px;
  height: 40px;
  margin-bottom: 28px;
}

.tile-card-icon.is-feature svg {
  width: 40px;
  height: 40px;
}

/* Only a tile that goes somewhere responds to the cursor, and in the
       buttons' hover language — the accent takes the rule and the tile lifts
       1px. A tile that lights up without a destination promises a click that
       isn't there. */

.tile-card.is-link {
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.tile-card.is-link:hover {
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.tile-card.is-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tile-card.is-link {
    transition: none;
  }

  .tile-card.is-link:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  .tile-band {
    padding: 56px 24px;
  }

  .tile-band.is-tall {
    padding: 72px 24px;
  }

  .tile-grid {
    gap: 20px;
  }

  .tile-card.is-feature {
    padding: 28px;
  }

  .tile-card-icon.is-feature {
    margin-bottom: 32px;
  }
}

@media (min-width: 1024px) {
  /* The design's frame: 60px vertical, 48px side. */

  .tile-band {
    padding: 60px 48px;
  }

  .tile-band.is-tall {
    padding: 100px 48px;
  }

  .tile-grid {
    gap: 24px;
  }

  .tile-card {
    padding: 28px;
  }

  /* The spec's card, at the 1920 artboard it was drawn on: 32px frame,
           a 48px glyph and the 40px gap under it. */

  .tile-card.is-feature {
    padding: 32px;
  }

  .tile-card-icon.is-feature,
        .tile-card-icon.is-feature svg {
    width: 48px;
    height: 48px;
  }

  .tile-card-icon.is-feature {
    margin-bottom: 40px;
  }
}

/* Accent-glow dark plate. The backdrop the design file gives the packages
       band (components/UNN/package_list_section.html) and, on the About page,
       the trust band: a near-black plate lit by two accent blooms — top-right
       at blur(40px), bottom-left at blur(16px).

       The spec is a Figma export — `linear-gradient(0deg, #F97316, #F97316)`
       colour-blended over a 54deg black gradient and an image, at background
       positions in the billions of pixels, which is Figma's way of writing "an
       orange wash over a dark plate". What survives the export and actually
       matters is those two blooms and their blur radii, reproduced here as two
       radial blobs.

       Usage — the plate owns the clipping, so the 40px blur cannot bleed onto
       the neighbouring band, and the content sits above it on its own layer:

           <section class="glow-plate">
             <div class="glow-backdrop" aria-hidden="true">
               <span class="glow-blob glow-blob--tr"></span>
               <span class="glow-blob glow-blob--bl"></span>
             </div>
             <div class="relative z-[1]"> … </div>
           </section>

       Distinct from `.accent-bloom` below, which is a single bloom you size and
       place with utilities; this one is the whole two-bloom plate at the values
       the mockup specifies, so two sections cannot drift apart. */

.glow-plate {
  position: relative;
  overflow: hidden;
  background-color: #0a0a0a;
}

.glow-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow-blob {
  position: absolute;
  display: block;
}

/* Intensity is deliberately low. The blooms are the room's lighting, not a
       coloured band: at the 0.6/0.45 they started at, the top-right corner went
       far enough towards flat orange that the accent CTA sitting in it — the
       header's "Compare all packages" — lost its own colour against the
       backdrop, and the package cards' corner light had nothing darker to fall
       off into. They are one third of that now, which still reads as a lit
       plate and leaves the accent objects on it as the brightest thing in the
       band. Every plate takes the same values, so all six dark bands on a
       service page stay one surface. */

.glow-blob--tr {
  top: -18%;
  right: -8%;
  width: min(920px, 64%);
  height: 62%;
  background: radial-gradient(60% 60% at 72% 30%, #f97316 0%, rgba(249, 115, 22, 0) 100%);
  filter: blur(40px);
  opacity: 0.2;
}

.glow-blob--bl {
  left: -10%;
  bottom: -14%;
  width: min(560px, 42%);
  height: 40%;
  background: radial-gradient(55% 55% at 32% 68%, #f97316 0%, rgba(249, 115, 22, 0) 100%);
  filter: blur(16px);
  opacity: 0.16;
}

/* Accent bloom. The design file paints the glow behind the dark bands as a
       photograph blended to accent and blurred 40px; there is no such asset in
       the repo and a 2MP JPEG to produce an orange smudge would be a poor
       trade, so it is a blurred radial instead — same read, nothing to load.

       Size and place it with utilities at the call site; the section it sits in
       owns `isolate` + `overflow-hidden`, without which the blur spills past
       the band and the bloom paints over the copy instead of behind it. */

.accent-bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 9999px;
  background-image: radial-gradient(
            closest-side,
            rgba(249, 115, 22, 0.55),
            rgba(249, 115, 22, 0.18) 55%,
            rgba(249, 115, 22, 0) 100%
        );
  filter: blur(40px);
}

/* Highlighter run inside body copy — the orange marker the design file puts
       under the interstate route list. Authored inline in the copy itself:

           'Weekly direct routes between <span class="text-highlight">Sydney and
            Melbourne, …, and the Gold Coast.</span> Moving the other way? …'

       `box-decoration-break: clone` is what makes the marker reopen with its own
       padding and rounded ends on every wrapped line, instead of one ragged box
       spanning the break. 60% accent over the #161413 band resolves to
       rgb(150,77,21), which carries white text at 6.2:1 — the marker stays
       legible rather than being decoration you have to squint past. */

.text-highlight {
  padding: 0 4px;
  border-radius: 2px;
  background-color: rgba(249, 115, 22, 0.6);
  color: #ffffff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The eyebrow variant for a hero over a photograph: unlike `.on-dark`, which
       sits on the flat #161413 band, this one carries its own tinted fill and
       blur so the label stays readable over whatever the image is doing.

       It is also the one eyebrow that carries its OWN size ramp. A section
       eyebrow is a small label under a 60px title, but the hero title above
       this one is 110px on a desktop and floors at 30px on a phone — so the
       flat 14/1.8 the section scale uses reads as a second headline on a
       320px screen, competing with the line it is meant to introduce. The
       ramp keeps it subordinate at every width and lands back exactly on the
       section token (14px / 1.8 / .08em / 2px 12px) from `lg` up, where the
       design file's value applies. Only `.on-glass` moves: the section
       eyebrow everywhere else is untouched. */

.section-eyebrow.on-glass {
  border-color: var(--white-8);
  background-color: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  gap: 6px;
  padding: 2px 8px;
  font-size: 0.5625rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* The bullet shrinks with the label, or a 4px dot next to 9px type reads
       as a bug rather than as decoration. */

.section-eyebrow.on-glass::before {
  width: 2.5px;
  height: 2.5px;
}

@media (min-width: 640px) {
  .section-eyebrow.on-glass {
    gap: 8px;
    padding: 2px 10px;
    font-size: var(--fs-xs);
    line-height: 1.65;
    letter-spacing: 0.07em;
  }

  .section-eyebrow.on-glass::before {
    width: 3.5px;
    height: 3.5px;
  }
}

@media (min-width: 1024px) {
  .section-eyebrow.on-glass {
    gap: 10px;
    padding: 2px 12px;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-wide);
  }

  .section-eyebrow.on-glass::before {
    width: 4px;
    height: 4px;
  }
}

.hero-title {
  /* 110px is the 1920x1080 value, and 5.729vw = 110/1920 reproduces it.
           The `min()` also caps the size against the HEIGHT, so a wide-but-short
           laptop shrinks the headline instead of pushing the rest of the hero
           off the bottom.

           How tight that height cap needs to be depends on how much the hero
           has to fit, so it is a property each hero sets for itself rather than a
           constant. It is read as a FALLBACK, never declared here: declare it on
           this rule and the element's own value would beat anything an ancestor
           inherits down, which is exactly what the override needs to do. The
           10.6svh default suits the full-screen home hero, a hard 100svh with
           choice cards to house; the interior band sets its own, looser value. */
  font-size: clamp(2.125rem, min(5.729vw, var(--hero-title-height-cap, 9.1svh)), 6.875rem);
  font-weight: var(--fw-semibold);
  /* ONE leading at every width — a headline that re-spaces itself at a
           breakpoint is a different headline either side of it, and this one
           is the page's first impression.

           The value has to serve the bottom of the size clamp, not the top.
           The design file's 90% is a display setting: it works at 110px, where
           the size itself supplies the air between two lines, but at the 34px
           floor it gives a line box shorter than Inter's own ascender-to-
           descender extent (1.21em), so a two-line headline collides. 1.05 is
           the tightest single value that still clears a descender over a
           following ascender at the floor, and it stays firmly display-tight
           at 110px. The floor itself came up from 30px to 34px so the phone
           reads closer to the desktop's weight in the composition.

           Because every line is now 1.05em instead of 0.9em, the height caps
           below came down by the same 1.1667 factor: the cap exists to bound
           how much of a short screen the TITLE BLOCK may eat, and that budget
           is size x leading, so leaving it unchanged would have quietly handed
           the headline 17% more of the screen than it had. */
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--text-inverse);
  text-wrap: balance;
}

/* Choice card — the "I'm moving" / "I need storage" pair. The design fixes
       the width at 284px; below `sm` it goes full-bleed so two cards do not
       squeeze a phone, and the 60px vertical padding relaxes with it. */

.hero-card {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  border-radius: 4px;
  background: var(--white-80, rgba(255, 255, 255, 0.80));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 640px) {
  .hero-card {
    width: 284px;
    padding: 60px 24px;
  }
}

.hero-card:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -18px rgba(11, 19, 43, 0.55);
}

.hero-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hero-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--black);
}

/* Hairline between the card title and its supporting line. Stops short of
       the arrow chip so the two never collide — the reserve tracks the chip's
       width, so widening the chip widens this too. */

.hero-card-rule {
  width: calc(100% - 3rem);
  height: 1px;
  background-color: var(--black-24);
}

.hero-card-sub {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--black-body);
  max-width: calc(100% - 3rem);
}

/* The dark chevron chip pinned to the card's right edge. Widened past the
       design's 28px so the chevron sits in a chip rather than a sliver; the
       clearance the rule and subtitle reserve below is measured off this
       width, so the two move together. */

.hero-card-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  display: flex;
  width: 36px;
  height: 44px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background-color: var(--black);
  color: #ffffff;
  transition: background-color 0.25s ease;
}

.hero-card:hover .hero-card-arrow {
  background-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .hero-card,
        .hero-card:hover {
    transform: none;
  }
}

/* The frame. Inset from the top and both sides so the page's own white shows
       through as a border; the header is inset to match, reading the same token.
       Nothing insets the BOTTOM — the hero runs into the section below it.

       NEVER pair this with `w-full`. A block with horizontal margins already
       resolves to the space left over; adding `width: 100%` makes it exactly
       `2 * --hero-frame` wider than the viewport and hangs a horizontal
       scrollbar off the page. */

.hero-framed {
  margin: var(--hero-frame, 0px) var(--hero-frame, 0px) 0;
  /* All four corners: the top pair is matched by the header's utility
           strip, which sits directly on top of them (round only one of the two
           and the other peeks out behind it), and the bottom pair rounds the
           block off against the section below. There is no bottom margin, so
           what shows through those bottom corners is the page's own white —
           which is what makes the hero read as a card rather than a band.
           `overflow: hidden` on the section is what makes any of it clip the
           photograph. */
  border-radius: var(--hero-radius, 0px);
}

/* One screen tall, measured against the SMALL viewport so a mobile browser's
       collapsing toolbar cannot change the answer. From `lg` the height is HARD,
       not a minimum: the framed block is exactly one screen and nothing can push
       it past the fold. Below `lg` it stays a minimum, because clipping a CTA off
       the bottom of a phone is a worse failure than a hero that scrolls.

       Both heroes use this. Whatever each one puts inside has to compress to fit
       — see the `svh`-keyed clamps in their own style blocks. */

.hero-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--hero-frame, 0px));
}

@media (min-width: 1024px) {
  .hero-screen {
    height: calc(100svh - var(--hero-frame, 0px));
  }
}

/* Safety valve. Below roughly 640px of viewport there is not enough room for
       a 120px header plus a full hero column, and a HARD height there would just
       clip the CTAs off the bottom — silently, because the section also hides
       its overflow. So on a genuinely short screen the hero stops insisting and
       grows past the fold instead. `min-height` still holds it to a screen, so
       it never comes out short; it is only allowed to come out tall. */

@media (min-width: 1024px) and (max-height: 640px) {
  .hero-screen {
    height: auto;
  }
}

/* The wash between the photograph and the copy, taken verbatim from the
       design file's Rectangle 1. 86% black at the left edge puts the headline on
       near-solid ground; by the right edge it has thinned to 34.4% so the
       photograph still reads. One left-to-right pass, no second vertical wash —
       anything light sitting on top (choice cards, the notch) carries its own
       contrast. */

.hero-scrim {
  background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.688) 45.2%,
            rgba(0, 0, 0, 0.344) 100%
        );
}

/* The interior band carries its own wash — same idea, different numbers, and
       likewise straight from the design file:

           linear-gradient(90deg,
               rgba(0, 0, 0, 0.90) 0%,
               rgba(0, 0, 0, 0.72) 37.89%,
               rgba(0, 0, 0, 0.18) 77.54%)

       Darker at the left (90% vs 86%) and it clears out sooner: by 77.54% it is
       down to 18% and holds there to the right edge, where the home hero is
       still carrying 34.4%. That suits the photographs these pages use — people
       and interiors, where the subject sits in the right-hand third — while the
       home hero's truck spans the full width and needs the wash held longer. */

.hero-scrim.on-band {
  background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.72) 37.89%,
            rgba(0, 0, 0, 0.18) 77.54%
        );
}

/* Feature/trust pill. The rounded-full counterpart to `.section-eyebrow`,
       for the short claim rows a hero runs under its copy. The lead word is
       marked up as <b> and comes out white against the rest at 80%. */

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--white-8);
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  color: #ffffff;
  white-space: nowrap;
}

/* The whole pill now reads at the highlight's weight and colour; the `<b>`
       is kept in the markup for meaning, and pinned here so the browser's
       `bolder` cannot push it to 700 and make it stand out again. */

.hero-pill b {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

.hero-pill > i,
    .hero-pill > svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* The plate the whole section sits on — the design file's Frame 418: the
       page's near-white tint, an 8px corner and 60px of padding, inset from the
       page so white shows down both sides. It is what turns the section from a
       full-bleed band into a container, and it is a shared class because the
       next section built to this mockup family will want the same one.

       The design also gives it a 1px rgba(250,249,249,1) border — the same
       colour as its own fill, so it is not drawn here; a border you cannot see
       is a rule someone later has to wonder about. */

.section-plate {
  border-radius: 8px;
  background-color: var(--black-3);
  padding: clamp(1.25rem, 3.2vw, 3.75rem);
}

/* The panel. 8px radius — the card radius, one step up from the 4px the
       controls and buttons inside it use, which is what makes the controls read
       as sitting IN the card rather than as more cards. */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 8px;
  border: 1px solid var(--black-8);
  background-color: #ffffff;
  /* 48px is the design's padding at full size; it would eat a phone
           alive, so it floors at 20px and grows with the viewport. The two
           axes are split: the sides keep the design's 48px, the top and bottom
           stop at 32px. A form is a column of rows, and 48px of air above the
           first label and below the footnote is the cheapest 32px to give back
           on a card that has to sit beside a column of copy. */
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 3.2vw, 3rem);
}

/* The questions that go IN the card are NOT declared here. They are the
       shared field system — `.qf-label` / `.qf-req` / `.qf-opt` over
       `.qf-input`, with `.qf-hint` and `.qf-error` under it — further down this
       file, and the card is only the panel they sit in.

       This block used to carry a second family (`.field-group` / `.field-row` /
       `.field-label` / `.field-control`), built straight to the design file's
       48px, 4px-cornered, 16px control. It was the honest reading of the spec,
       and it was still wrong: the site asks a visitor for their name in five
       places — the /quote/ wizard, the service pages' quick quote, the contact
       page's enquiry card, the message dialog and the invoice lookup — and with
       two families in play which box you got depended on which page you landed
       on. The service card was moved onto `.qf-*` first (see
       components/service_detail/sInclution_and_quoteForm_section.html), the
       other three followed, and the `.field-*` rules are gone rather than left
       here for someone to reach for again. A control that needs to differ
       overrides ONE property on `.qf-input` at its call site — the 404 search
       box's height, the contact card's textarea floor — instead of forking the
       box.

       The date picker's trigger keeps the same treatment through the partial's
       `trigger_class`, which the call sites pass as `qf-input …` alongside a
       `qf-picker` wrapper. */

/* The footnote under the button — the design's centred 16px body line. */

.form-card-note {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--black-body);
}

/* ── The checklist beside the card ─────────────────────────────────────
       The other half of the section: one line per inclusion, a thin tick in ink
       rather than an accent bullet. The design keeps the list quiet so the card
       is the only thing on the row asking to be looked at. */

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--black-body);
}

.check-item > i,
    .check-item > svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  /* Optical alignment with the first line of text, not with the box. */
  margin-top: 0.3rem;
  color: var(--black);
}

/* The authored lead of each line. Ink rather than body grey and a half step
       heavier — enough to carry the emphasis the copy is written with, not
       enough to break the list into bold-and-grey stripes. */

.check-item b {
  font-weight: 500;
  color: var(--black);
}

/* The dark-band variant, same as `.card-title.on-dark` and
       `.section-desc.on-dark`: white alphas in place of the ink and body greys,
       so the package cards on the near-black plate use the same list as the
       inclusions column on white rather than a second one. Set on either the
       list or the row. */

.check-list.on-dark .check-item,
    .check-item.on-dark {
  color: rgba(255, 255, 255, 0.8);
}

.check-list.on-dark .check-item > i,
    .check-list.on-dark .check-item > svg,
    .check-item.on-dark > i,
    .check-item.on-dark > svg {
  color: #ffffff;
}

.check-list.on-dark .check-item b,
    .check-item.on-dark b {
  color: #ffffff;
}

/* The floating call/message pair lives in the bottom-right corner. Below
       `lg` the sticky step nav spans the screen and runs under that corner, so
       on a page with a wizard the pair steps above the bar and both stay
       tappable. From `lg` the summary rail takes the right-hand column and the
       bar ends short of the corner, so the pair keeps the same place it has on
       every other page — lifting it there only made the wizard pages look
       different. (The custom-package builder shows its rail from `md`, and
       drops the lift from there in its own template.) */

@media (max-width: 1023.98px) {
  body:has(.qf-nav) #floating-action-buttons {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Page layout ───────────────────────────────────────────────────────
       Wizard on the left, summary rail on the right. Written here rather than
       as a Tailwind arbitrary `grid-cols-[...]`: a template value containing a
       comma (minmax(0,1fr)) is silently dropped by the JIT scanner, and a grid
       that quietly falls back to one column stacks the rail under the form
       with no error anywhere to explain it. */

.qf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

@media (min-width: 1024px) {
  .qf-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
  }
}

/* The rail earns its extra width back at xl, where the wizard is wide
       enough that a 400px sidebar still leaves the step panel dominant. */

@media (min-width: 1280px) {
  .qf-layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
  }
}

/* ── The panel each step is drawn on ───────────────────────────────── */

.qf-panel {
  background-color: var(--card);
  border: 1px solid var(--black-8);
  border-radius: 14px;
  /* Published rather than inlined: the sticky nav below cancels these to
           reach the panel's edges, and two places guessing the same number is
           two places to get it wrong. */
  --qf-panel-px: 20px;
  --qf-panel-pb: 24px;
  --qf-panel-radius: 14px;
  padding: 28px var(--qf-panel-px) var(--qf-panel-pb);
}

@media (min-width: 640px) {
  .qf-panel {
    --qf-panel-px: 32px;
    --qf-panel-pb: 28px;
    padding-top: 32px;
  }
}

/* ── Stepper ───────────────────────────────────────────────────────────
       A row of numbered dots joined by 2px rules, labels underneath. The
       LABEL sets each column's width (it is always the wider of the two), so
       the dots space themselves off the words rather than off a magic number
       that would need re-tuning every time a step is renamed. */

.qf-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  /* How far the row is allowed to span. The dots are fixed-width, so all
           the give is in the rules between them — this caps the total rather
           than letting the row stretch to the full width of a wide panel,
           where five dots strung across 900px stop reading as one progress
           track. Below this width the rules simply shrink (they are
           `flex: 1 1 auto` down to a 12px floor), so nothing here needs a
           breakpoint. */
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.qf-step {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qf-step-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1.5px solid var(--black-16);
  border-radius: 9999px;
  background-color: var(--card);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--black-50);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.qf-step-label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--black-50);
  white-space: nowrap;
  transition: color 200ms ease;
}

/* Current and completed steps are both filled — the customer reads the
       run of orange as "how far I have come", and the check vs. the number
       is what separates done from doing. */

.qf-step.is-active > .qf-step-dot,
    .qf-step.is-done > .qf-step-dot {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.qf-step.is-active > .qf-step-label,
    .qf-step.is-done > .qf-step-label {
  color: var(--black);
  font-weight: 600;
}

.qf-step-check {
  display: none;
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.qf-step.is-done .qf-step-check {
  display: block;
}

.qf-step.is-done .qf-step-num {
  display: none;
}

/* The rule between two dots. `margin-top` lines it up with the dot's
       centre (26px dot ÷ 2 − 1px rule). */

.qf-step-line {
  flex: 1 1 auto;
  min-width: 12px;
  /* Fluid rather than a fixed cap: the rules are the only elastic part
           of the row, so this is what makes the stepper track the width it is
           given instead of snapping between two sizes. It stops growing at
           `.qf-stepper`'s max-width. */
  max-width: clamp(56px, 9vw, 116px);
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background-color: var(--black-8);
  transition: background-color 300ms ease;
}

.qf-step-line.is-done {
  background-color: var(--accent);
}

/* Below `sm` six labels cannot sit side by side — but a bare row of numbers
       does not say where you are either. So keep the dots and show exactly ONE
       label, the active step's, directly under its own dot.

       It hangs off the dot out of flow rather than sitting in the column,
       deliberately: in flow the named column would be as wide as its word, so
       every Next would shove the whole row of dots sideways. Out of flow the
       dots never move and the caption still points at the step it names.

       This does assume the one-word labels QUOTE_WIZARD_STEPS actually uses
       (`Service`, `Inventory`, ...): centred under the first or last dot, a
       caption hangs ~12px past the row, which the panel's 20px gutter absorbs.
       A markedly longer step name would want the caption centred on the row
       instead. */

@media (max-width: 639.98px) {
  .qf-stepper {
    padding-bottom: 20px;
  }

  /* The containing block for the caption below. */

  .qf-step {
    position: relative;
  }

  .qf-step-label {
    display: none;
  }

  /* Colour and weight come from the `.is-active` rule above, so the one
           mobile label reads exactly as its desktop counterpart does. */

  .qf-step.is-active > .qf-step-label {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    font-size: var(--fs-xs);
    text-align: center;
  }

  .qf-step-line {
    max-width: none;
  }
}

/* ── Step navigation ───────────────────────────────────────────────────
       Back and Next, in one row shared by every step so neither button moves as
       the customer advances.

       Pinned to the bottom of the viewport at EVERY width. A step can run well
       past the fold — step 1 is a card per service and step 2 a card per
       service picked — so unpinned, the customer scrolls back down to a button
       they had already reached. This used to unpin above `lg`, on the
       assumption that the wide layout kept every step short enough to see
       whole; it does not, and a control pinned on a phone but adrift on a
       laptop is two behaviours to learn instead of one.

       Back keeps its place in the row on step 1 (disabled, never `invisible`),
       so Next cannot slide sideways on the first press. */

.qf-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--black-8);
  /* Over the page's floating contact buttons (z-50), which sit in the
           same corner. While the form is on screen its own Next button is the
           action that matters; the floating pair steps up out of the way rather
           than being buried (see #floating-action-buttons above). */
  z-index: 51;
  /* Cancel the panel's padding so the bar reaches its edges — content
           scrolling up through a 20px gutter beside an opaque bar reads as a
           rendering fault. */
  margin-left: calc(-1 * var(--qf-panel-px));
  margin-right: calc(-1 * var(--qf-panel-px));
  margin-bottom: calc(-1 * var(--qf-panel-pb));
  padding-right: var(--qf-panel-px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--qf-panel-px);
  background-color: var(--card);
  /* Square while it floats over content; the panel's own corners take
           over once it comes to rest at the bottom edge. */
  border-radius: 0 0 var(--qf-panel-radius) var(--qf-panel-radius);
  box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, 0.45);
}

/* ── Step heading ──────────────────────────────────────────────────── */

.qf-heading {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
}

@media (min-width: 640px) {
  .qf-heading {
    font-size: 1.75rem;
  }
}

.qf-subheading {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--black-body);
}

/* Wizard step headings are centred over the step they introduce.

       Scoped to `.step-panel` rather than set on `.qf-heading` itself, because
       that class is also the contact form's heading in base.html, the
       custom-package page title, and the title of every modal — none of which
       share this alignment. Scoping also means the rule covers all four
       headings inside step 3 (moving / service / storage / no-address) and any
       step added later, so the copy cannot shift sideways as the customer
       presses Next. The per-service cards on step 2 keep their own left-aligned
       `.qf-service-section-title`. */

.step-panel .qf-heading,
    .step-panel .qf-subheading {
  text-align: center;
}

/* ── Service question section ──────────────────────────────────────────
       Step 2 asks a different set of questions per service, and a customer may
       pick up to MAX_SELECTEABLE_SERVICE_IN_QUOTE of them. One card per
       service keeps "which service is this question about" answerable at a
       glance — a single flat list of every question from every service reads
       as one long form and gives no clue that "Small Office" and "Half Truck
       Load" belong to different jobs.

       scripts.html builds these; a section is only emitted when it has at
       least one question, so a service whose questions were all claimed by an
       earlier section leaves no empty card behind. */

.qf-service-section {
  border: 1px solid var(--black-8);
  border-radius: 14px;
  background-color: var(--card);
  padding: 20px;
}

@media (min-width: 640px) {
  .qf-service-section {
    padding: 24px;
  }
}

.qf-service-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}

.qf-service-section-desc {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--black-body);
}

/* The questions themselves. Spacing lives here rather than on the wrapper
       the script writes, so the gap between two questions matches the gap
       between two sections without either being hand-tuned in JS. */

.qf-service-section-body {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Choice card ───────────────────────────────────────────────────────
       The step-1 service tiles and the card-style options scripts.html builds
       for an API-driven radio question. The real input stays in the DOM,
       visually hidden, so the card still posts, still validates and still
       takes keyboard focus; `:has(:checked)` paints the selected state. */

.qf-choice {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--black-8);
  border-radius: 12px;
  background-color: var(--card);
  padding: 18px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.qf-choice:hover {
  border-color: var(--black-16);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.qf-choice:has(:checked) {
  border-color: var(--accent);
  /* --accent is a whole hex, so Tailwind's `bg-accent/8` compiles to
           nothing; mix it here instead. */
  background-color: color-mix(in srgb, var(--accent) 6%, var(--card));
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}

.qf-choice:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qf-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background-color: var(--black-3);
  color: var(--black);
  font-size: 1rem;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease;
}

.qf-choice-icon > svg,
    .qf-choice-icon > i {
  width: 17px;
  height: 17px;
}

.qf-choice:has(:checked) .qf-choice-icon {
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}

.qf-choice-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}

.qf-choice-desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--black-body);
}

/* Pushes the tag chip to the bottom edge so a two-line and a three-line
       card in the same row still line their chips up. */

.qf-choice-foot {
  margin-top: auto;
  padding-top: 4px;
}

/* Two cards to a row on a phone. At ~140px each the desktop card's 18px
       gutters and 16px title leave a column barely wide enough for a word, so
       the whole card steps down a size here and returns to full size at `sm`
       — the "shrink on mobile, restore from sm up" rule the rest of the quote
       form already follows.

       Written as a max-width override rather than mobile-first base values
       because these rules are shared with the step-2 option cards, and keeping
       one set of desktop values means the two can never drift apart. */

@media (max-width: 639.98px) {
  .qf-choice {
    gap: 7px;
    border-radius: 10px;
    padding: 12px;
  }

  .qf-choice-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.875rem;
  }

  .qf-choice-title {
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .qf-choice-desc {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* The category chip is the one thing that cannot shrink to fit: at this
           width "Homes & Apartments" wraps to two lines and pushes every card in
           the row taller for a label that only classifies what the title above
           it already names. It comes back at `sm`. */

  .qf-choice-foot {
    display: none;
  }
}

.qf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  background-color: var(--black-3);
  padding: 4px 9px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black-body);
}

.qf-tag::before {
  content: '';
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--accent);
}

/* ── Pill option ───────────────────────────────────────────────────────
       The narrow follow-up row a card selection reveals ("1-2 bedroom house",
       "3 bedroom house", …). Same selected language as .qf-choice, one line. */

.qf-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--black-8);
  border-radius: 10px;
  background-color: var(--card);
  padding: 11px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--black);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.qf-pill:hover {
  border-color: var(--black-16);
}

.qf-pill:has(:checked) {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--accent-strong);
  font-weight: 600;
}

.qf-pill:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Extras row ────────────────────────────────────────────────────────
       A wide, low tile: icon, label, and a checkbox square hard against the
       right edge, so a column of them reads as a checklist. */

.qf-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--black-8);
  border-radius: 10px;
  background-color: var(--card);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.qf-extra:hover {
  border-color: var(--black-16);
}

.qf-extra:has(:checked) {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.qf-extra:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qf-extra-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--black);
}

.qf-extra-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--black-16);
  border-radius: 5px;
  background-color: var(--card);
  color: #ffffff;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.qf-extra-box > svg,
    .qf-extra-box > i {
  width: 11px;
  height: 11px;
  stroke-width: 3;
  opacity: 0;
  transition: opacity 150ms ease;
}

.qf-extra:has(:checked) .qf-extra-box {
  border-color: var(--accent);
  background-color: var(--accent);
}

.qf-extra:has(:checked) .qf-extra-box > svg,
    .qf-extra:has(:checked) .qf-extra-box > i {
  opacity: 1;
}

/* ── Fields ────────────────────────────────────────────────────────── */

.qf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}

.qf-label .qf-req {
  color: var(--accent);
}

.qf-label .qf-opt {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.qf-input {
  width: 100%;
  border: 1px solid var(--black-8);
  border-radius: 10px;
  background-color: var(--card);
  padding: 11px 14px;
  /* Below `sm` the base layer lifts every control to 16px so iOS does not
           zoom the page on focus; this is the desktop size the design draws. */
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-heading);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.qf-input::-moz-placeholder {
  color: var(--text-muted);
}

.qf-input::placeholder {
  color: var(--text-muted);
}

/* A control the server rejected. `aria-invalid` rather than a class: the
       attribute is what tells assistive tech WHICH field is the problem, so the
       visual and the announced state can never drift apart. Declared BEFORE the
       focus rule on purpose — the two selectors weigh the same, so source order
       decides, and focus has to win: once the customer is back in the field
       fixing it, the accent ring is the more useful signal. */

.qf-input[aria-invalid="true"] {
  border-color: var(--destructive);
}

.qf-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

textarea.qf-input {
  resize: vertical;
  min-height: 96px;
}

/* The two lines that sit UNDER a control: the quiet helper a field
       sometimes needs, and the server's complaint about what was typed. They
       belong to the field system rather than to one page's form — the invoice
       lookup drew them first as `.pay-field-*` and the contact card kept a
       third copy under `.enquiry-error`, which is exactly the drift the rest of
       this block exists to prevent. `.qf-hint` sits one step under `--fs-xs`:
       a hint is the quietest text on a form. */

.qf-hint {
  margin-top: 7px;
  font-size: 0.6875rem;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.qf-error {
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: #dc2626;
}

/* A <select> is the same box as an <input> on this system, so it has to
       drop the platform arrow before the design's own chevron can go in. The
       chevron is a background image rather than an overlaid element so the
       control stays a single node, and the right padding is what keeps a long
       option from running under it. */

select.qf-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(22,22,22,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}

/* Until something is chosen the select is showing its placeholder option,
       so it has to read as placeholder text — `:invalid` is the only hook for
       that, which is why the placeholder option carries an empty value. But
       that rule colours the ELEMENT and the rows of the open menu inherit it,
       so every option would come up grey and look disabled; the rows carry
       their own ink and only the placeholder row stays muted. Written so the
       closed control is right whichever way an engine resolves it: from the
       selected option, or from the select itself. */

select.qf-input:invalid {
  color: var(--text-muted);
}

select.qf-input > option {
  color: var(--text-heading);
}

select.qf-input > option[value=""] {
  color: var(--text-muted);
}

/* Icon-leading variant: the wrapper positions the glyph, the input just
       reserves room for it. */

.qf-field {
  position: relative;
}

.qf-field > .qf-field-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  pointer-events: none;
  color: var(--black-50);
}

.qf-field > .qf-field-icon ~ .qf-input {
  padding-left: 36px;
}

/* Trailing "this one is filled in" tick. JS toggles .is-filled on the
       wrapper; without it the tick is invisible. */

.qf-field > .qf-field-ok {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  opacity: 0;
  pointer-events: none;
  color: #16a34a;
  transition: opacity 160ms ease;
}

.qf-field.is-filled > .qf-field-ok {
  opacity: 1;
}

.qf-field.is-filled > .qf-field-ok ~ .qf-input {
  padding-right: 36px;
}

/* Date / time trigger, answered. */

.qf-picker.is-filled > .qf-input {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.qf-picker.is-filled > .qf-input > svg,
    .qf-picker.is-filled > .qf-input > i {
  color: var(--accent);
}

/* ── Suburb / postcode combobox ────────────────────────────────────────
       Step 3's address fields. The suggestion list is a real element in the
       form (not a floating widget owned by a third-party script), so it can be
       styled, read by a screen reader through the ARIA combobox wiring in
       quote_form_v2/scripts.html, and — the reason it exists — sourced from our
       own suburb table, which knows which states we are open in.

       These rules live here rather than in a \3c style> beside the partial for the
       usual reason: a style block in the body repaints a component the critical
       sheet has already laid out, and the panel would flash open at full height
       on the first keystroke of every visit. */

.qf-combo {
  position: relative;
}

.qf-combo-list {
  position: absolute;
  /* Above the fixed header (`z-[100]` on `.site-header`). The list opens
           downward from a field that can sit anywhere on the page, and the
           moment the customer scrolls the field up under the bar the panel was
           painting BEHIND it — the suggestions for the address they are typing,
           hidden by the nav. Nothing between the field and the root creates a
           stacking context, so this value is the one that decides it.

           The layering it belongs to, top down: DIALOGS (the quote form's two
           modals and the contact modal, `z-[120]`/`z-[121]`) > this popup >
           the header (100) > the mobile drawer and summary rail (95 and below).
           A dialog has to outrank an inline popup, or a validation modal opens
           underneath the suggestion list that is still on screen — which is why
           those three moved up when this one did. */
  z-index: 110;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px solid var(--black-8);
  border-radius: 10px;
  background-color: var(--card);
  box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.18), 0 4px 10px -4px rgb(0 0 0 / 0.10);
}

.qf-combo-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-heading);
  transition: background-color 120ms ease, color 120ms ease;
}

/* One highlight for both ways in. `aria-selected` is what the keyboard
       moves and what the screen reader announces, so the pointer sets it too
       rather than owning a second :hover-only appearance that could disagree
       with the announced position. */

.qf-combo-option[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
}

.qf-combo-name {
  font-weight: var(--fw-medium);
}

/* The other half of the answer. Whichever half the customer typed, both are
       shown, because "Springfield" is in four states and the postcode is the
       only thing that tells them apart. */

.qf-combo-meta {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.qf-combo-option[aria-selected="true"] .qf-combo-meta {
  color: inherit;
}

/* "Searching…" / "No suburb found" — same box, not a row, so neither is
       arrow-navigable or clickable. */

.qf-combo-status {
  padding: 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* The line under the field. It has two jobs and they are mutually
       exclusive: after a pick it names the state and postcode the customer
       never had to type, and when the field holds text we do not recognise it
       carries the reason. One element, because a field cannot simultaneously
       have resolved to a locality and be wrong about one. */

.qf-combo-hint {
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.qf-combo-hint.is-error {
  color: var(--danger, #dc2626);
  font-weight: var(--fw-medium);
}

/* Wrong input. The rule matches whatever input the form put inside the
       wrapper rather than naming a class, so a combobox added to a fourth form
       gets the state for free. (Every host is on `.qf-input` now; it was
       written this way when the service-page card was still on `.field-*`.) */

.qf-combo.is-invalid input {
  border-color: var(--danger, #dc2626);
}

.qf-combo.is-invalid input:focus {
  border-color: var(--danger, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #dc2626) 16%, transparent);
}

/* A field the customer got wrong has nothing to be pleased about, so the
       green tick some layouts show on a filled field is suppressed. */

.qf-combo.is-invalid > .qf-field-ok {
  opacity: 0;
}

/* ── Notice ────────────────────────────────────────────────────────────
       The rule-of-the-road callouts a step has to state before the customer
       fills it in (the Sydney hub rule, the local-move service area). */

.qf-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 13px 15px;
}

.qf-notice > svg,
    .qf-notice > i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent-strong);
}

.qf-notice-title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
}

.qf-notice-body {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--black-body);
}

/* ── Summary sidebar ───────────────────────────────────────────────── */

.qf-summary {
  background-color: var(--card);
  border: 1px solid var(--black-8);
  border-radius: 14px;
  padding: 20px;
}

.qf-summary-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--black);
}

/* The progress card: donut on the left, step counter on the right. */

.qf-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 11px;
  background-color: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: 13px 15px;
}

/* Ring drawn with a conic gradient off --qf-pct (0-100), which the script
       writes on the element. The inner disc is painted the same colour the
       tinted card resolves to, so the percentage reads on the card rather
       than on a white plug. */

.qf-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: conic-gradient(
            var(--accent) calc(var(--qf-pct, 0) * 1%),
            color-mix(in srgb, var(--accent) 22%, transparent) 0
        );
  transition: background 400ms ease;
}

.qf-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.qf-ring > span {
  position: relative;
  z-index: 1;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
}

/* One answered-or-not row. `.is-set` is written by the script when the
       step behind the row has a value. */

.qf-sum-row {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--black-8);
  padding: 11px 2px;
}

.qf-sum-row:last-child {
  border-bottom: 0;
}

.qf-sum-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--black-3);
  color: var(--black-50);
}

.qf-sum-icon > svg,
    .qf-sum-icon > i {
  width: 14px;
  height: 14px;
}

/* `.is-lit` is the same treatment without a parent row to depend on — the
       review modal composes the tile directly. */

.qf-sum-icon.is-lit,
    .qf-sum-row.is-set .qf-sum-icon {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
}

.qf-sum-label {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-50);
}

.qf-sum-value {
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black-50);
  overflow-wrap: anywhere;
  /* "Job details" writes one line per service picked, so the newlines it
           puts in the value have to survive. `pre-line` keeps them while still
           collapsing everything else and wrapping normally — the value is set
           with textContent, so this is the only way a line break can get in and
           a customer's own typing still cannot become markup. */
  white-space: pre-line;
}

.qf-sum-row.is-set .qf-sum-value {
  color: var(--black);
}

/* One service's answers inside the "Job details" value. Several services
       run together in one weight read as a paragraph — long service names wrap,
       and the eye cannot find where one ends and the next begins. Each gets the
       rail's own label-above-value language one level down: the service in the
       small muted type the row labels use, its answer under it in the value
       weight. That contrast is the separation; the gap only needs to be big
       enough to group each pair, so there is no rule between them. */

.qf-sum-item {
  display: block;
}

.qf-sum-item + .qf-sum-item {
  margin-top: 10px;
}

.qf-sum-item-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-50);
}

/* Beats `.qf-sum-row.is-set .qf-sum-value`, which would otherwise darken
       the service name to match its answer and undo the distinction. */

.qf-sum-row.is-set .qf-sum-item-name {
  color: var(--black-50);
}

/* Status puck on the right of each row: a grey disc until the step is
       answered, a green tick after. */

.qf-sum-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 9999px;
  background-color: var(--black-8);
  color: #ffffff;
}

.qf-sum-state > svg,
    .qf-sum-state > i {
  width: 10px;
  height: 10px;
  stroke-width: 3;
  opacity: 0;
}

.qf-sum-row.is-set .qf-sum-state {
  background-color: #16a34a;
}

.qf-sum-row.is-set .qf-sum-state > svg,
    .qf-sum-row.is-set .qf-sum-state > i {
  opacity: 1;
}

.qf-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--black-body);
}

.qf-trust > svg,
    .qf-trust > i {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--black-50);
}

/* ── Success confetti ──────────────────────────────────────────────────
       Strips falling the height of the modal head. Purely decorative and
       aria-hidden; motion-sensitive visitors get the modal without it. */

.qf-confetti {
  position: absolute;
  /* Stops 56px short of the right edge so no strip falls through the
           close button in that corner. */
  inset: 0 56px auto 0;
  height: 130px;
  overflow: hidden;
  pointer-events: none;
}

.qf-confetti > i {
  position: absolute;
  top: -14px;
  width: 6px;
  height: 12px;
  border-radius: 1px;
  opacity: 0;
  animation: qf-fall 2.4s linear infinite;
}

@keyframes qf-fall {
  0%   {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }

  10%  {
    opacity: 1;
  }

  85%  {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(150px) rotate(420deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qf-confetti {
    display: none;
  }
}

.pay-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--card);
  box-shadow: 0 1px 2px rgba(22, 20, 19, 0.04), 0 12px 32px -16px rgba(22, 20, 19, 0.12);
}

.pay-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .pay-card-head {
    padding: 20px 32px;
  }
}

.pay-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* The value in a label/value pair: heading ink, semibold, 15px. */

.pay-value {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

/* The lookup form's hint and error lines are the shared `.qf-hint` /
       `.qf-error` — they were declared here first, then wanted by every other
       form, so they moved up into the field block beside `.qf-label` and
       `.qf-input`. Nothing pay-specific is left to declare. */

.pay-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-color: var(--black-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}

.pay-alert > svg,
    .pay-alert > i {
  margin-top: 1px;
}

.pay-alert.is-error {
  border-color: #fecaca;
  background-color: #fef2f2;
  color: #991b1b;
}

.pay-alert.is-error > svg,
    .pay-alert.is-error > i {
  color: #dc2626;
}

/* Returned from Stripe Checkout. Green, but the copy is deliberately
       "we're confirming this" rather than "paid" — the browser coming back
       from Checkout is not proof of payment, only the webhook is, and it may
       land a second or two later. */

.pay-alert.is-success {
  border-color: #bbf7d0;
  background-color: #f0fdf4;
  color: #166534;
}

.pay-alert.is-success > svg,
    .pay-alert.is-success > i {
  color: #16a34a;
}

/* ── Amount field ──────────────────────────────────────────────────────
       Sits on the dark `.pay-summary` plate, so it is built from white alphas
       like the `.stat-*` family rather than the light-surface `.qf-input`.
       The customer types a booking deposit here; the balance is prefilled. */

.pay-amount-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pay-amount-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.pay-amount-field.is-error {
  border-color: #f87171;
}

.pay-amount-prefix {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.55);
}

.pay-amount-currency {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.45);
}

.pay-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  /* The one place a bare `background: transparent` is right: the plate
           behind it already carries the fill and the focus ring. */
  background: transparent;
  border: 0;
  padding: 14px 0;
  color: #ffffff;
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.pay-amount-input:focus {
  outline: none;
}

/* Chrome/Safari draw spinners that overlap the currency suffix and invite
       a customer to nudge a money field by accident. Firefox is the second rule. */

.pay-amount-input::-webkit-outer-spin-button,
    .pay-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pay-amount-input[type='number'] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.pay-amount-error {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #fca5a5;
}

/* A button, not an anchor: it fills the field in rather than navigating. */

.pay-amount-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pay-amount-link:hover {
  color: #ffffff;
}

/* ── Dark summary ──────────────────────────────────────────────────── */

.pay-summary {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.5);
}

/* Total / paid / balance rows. */

.pay-summary-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pay-summary-rows > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.pay-summary-rows dt {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.pay-summary-rows dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.pay-summary-rows > .is-total dt {
  font-weight: var(--fw-semibold);
  color: #ffffff;
}

.pay-summary-rows > .is-total dd {
  font-size: var(--fs-h5);
  letter-spacing: var(--ls-tight);
  color: var(--accent);
}

.pay-summary-meta {
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #ffffff;
}

/* ── Status chip ───────────────────────────────────────────────────── */

/* One chip for invoice and payment statuses. `--status` is the hue; the
       default chip (on the dark summary) is a white-alpha pill with a coloured
       dot, and `.is-inline` (in the light history list) drops the pill and
       inks the text itself. */

.pay-status {
  --status: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffffff;
}

.pay-status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--status);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status) 25%, transparent);
}

.pay-status.is-inline {
  padding: 0;
  border: 0;
  background: none;
  color: var(--status);
}

.pay-status.is-inline .pay-status-dot {
  box-shadow: none;
}

.pay-status.is-proforma,
    .pay-status.is-pending            {
  --status: #f59e0b;
}

.pay-status.is-partially_paid     {
  --status: var(--accent);
}

.pay-status.is-paid,
    .pay-status.is-payment_verified   {
  --status: #22c55e;
}

.pay-status.is-overdue,
    .pay-status.is-failed             {
  --status: #ef4444;
}

.pay-status.is-cancelled,
    .pay-status.is-canceled,
    .pay-status.is-refunded,
    .pay-status.is-partially_refunded {
  --status: #9ca3af;
}

/* Inline chips sit on white, where a light green/amber is unreadable;
       deepen the ink one step while the dot keeps the brighter hue. */

.pay-status.is-inline.is-paid,
    .pay-status.is-inline.is-payment_verified {
  color: #15803d;
}

.pay-status.is-inline.is-pending,
    .pay-status.is-inline.is-proforma         {
  color: #b45309;
}

.pay-status.is-inline.is-failed,
    .pay-status.is-inline.is-overdue          {
  color: #b91c1c;
}

.pay-status.is-inline.is-cancelled,
    .pay-status.is-inline.is-canceled,
    .pay-status.is-inline.is-refunded,
    .pay-status.is-inline.is-partially_refunded {
  color: var(--text-muted);
}

/* ── Payment history row glyph ─────────────────────────────────────── */

.pay-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-color: var(--black-3);
  color: var(--text-heading);
}

/* ── Line items ────────────────────────────────────────────────────── */

.pay-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.pay-table th {
  padding: 12px 24px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--black-3);
  border-bottom: 1px solid var(--border);
}

.pay-table td {
  padding: 14px 24px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pay-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 640px) {
  .pay-table th, .pay-table td {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ── Price breakdown ───────────────────────────────────────────────── */

.pay-breakdown > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pay-breakdown dt {
  color: var(--text-body);
}

.pay-breakdown dd {
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}

.pay-breakdown > .is-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.pay-breakdown > .is-total dt,
    .pay-breakdown > .is-total dd {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

/* ── Progress rail, dark variant ───────────────────────────────────── */

/* Same three-rule shape as the light rail (see .progress-rail); only the
       track changes, because a `--black-8` track vanishes on `#0a0a0a`. */

.progress-rail.on-dark {
  background-color: rgba(255, 255, 255, 0.12);
}

.progress-rail.on-dark::-webkit-progress-bar {
  background-color: rgba(255, 255, 255, 0.12);
}

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

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

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

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

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

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

.-bottom-\[45\%\] {
  bottom: -45%;
}

.-left-10 {
  left: -2.5rem;
}

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

.-right-10 {
  right: -2.5rem;
}

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

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

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

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

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

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

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-1\/3 {
  bottom: 33.333333%;
}

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

.bottom-10 {
  bottom: 2.5rem;
}

.bottom-20 {
  bottom: 5rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-8 {
  bottom: 2rem;
}

.left-0 {
  left: 0px;
}

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

.left-1 {
  left: 0.25rem;
}

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

.left-1\/3 {
  left: 33.333333%;
}

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

.left-10 {
  left: 2.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

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

.left-\[calc\(50\%\+2\.5rem\)\] {
  left: calc(50% + 2.5rem);
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

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

.right-1\/3 {
  right: 33.333333%;
}

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

.right-10 {
  right: 2.5rem;
}

.right-2 {
  right: 0.5rem;
}

.right-20 {
  right: 5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-8 {
  right: 2rem;
}

.right-9 {
  right: 2.25rem;
}

.right-\[-calc\(50\%-2\.5rem\)\] {
  right: -calc(50% - 2.5rem);
}

.right-\[12\%\] {
  right: 12%;
}

.top-0 {
  top: 0px;
}

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

.top-1 {
  top: 0.25rem;
}

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

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

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

.top-10 {
  top: 2.5rem;
}

.top-2 {
  top: 0.5rem;
}

.top-2\/3 {
  top: 66.666667%;
}

.top-20 {
  top: 5rem;
}

.top-24 {
  top: 6rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-40 {
  top: 10rem;
}

.top-8 {
  top: 2rem;
}

.isolate {
  isolation: isolate;
}

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

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

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

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

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

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

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

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

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

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

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

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

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

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

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

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

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

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

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

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

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

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

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

.mb-10 {
  margin-bottom: 2.5rem;
}

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

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

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

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

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

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

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

.mb-5 {
  margin-bottom: 1.25rem;
}

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

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

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

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

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

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

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

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

.mr-2 {
  margin-right: 0.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.grid {
  display: grid;
}

.contents {
  display: contents;
}

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

.hidden {
  display: none;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}

.aspect-\[16\/8\] {
  aspect-ratio: 16/8;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[21\/9\] {
  aspect-ratio: 21/9;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-\[7\/5\] {
  aspect-ratio: 7/5;
}

.\!h-14 {
  height: 3.5rem !important;
}

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

.h-0 {
  height: 0px;
}

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

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

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

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-72 {
  height: 18rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

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

.h-\[70\%\] {
  height: 70%;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

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

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

.\!min-h-\[72px\] {
  min-height: 72px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.\!w-8 {
  width: 2rem !important;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/4 {
  width: 25%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/5 {
  width: 40%;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

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

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

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

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

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

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

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

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

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

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

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

.w-auto {
  width: auto;
}

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

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

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

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

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

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

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

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

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

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

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

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

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

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

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

.max-w-\[16ch\] {
  max-width: 16ch;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.shrink {
  flex-shrink: 1;
}

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

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

.grow {
  flex-grow: 1;
}

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

.origin-left {
  transform-origin: left;
}

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

.-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-1\/3 {
  --tw-translate-x: -33.333333%;
  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-1\/4 {
  --tw-translate-x: -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));
}

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

.-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-y-1\/3 {
  --tw-translate-y: -33.333333%;
  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\/4 {
  --tw-translate-y: -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));
}

.-translate-y-4 {
  --tw-translate-y: -1rem;
  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-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/3 {
  --tw-translate-x: 33.333333%;
  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-1\/4 {
  --tw-translate-x: 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));
}

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

.translate-y-1\/3 {
  --tw-translate-y: 33.333333%;
  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\/4 {
  --tw-translate-y: 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));
}

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

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

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

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

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

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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 pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.touch-none {
  touch-action: none;
}

.touch-manipulation {
  touch-action: manipulation;
}

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

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

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

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

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

.scroll-mt-28 {
  scroll-margin-top: 7rem;
}

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

.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-0 {
  gap: 0px;
}

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

.gap-1 {
  gap: 0.25rem;
}

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

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-16 {
  gap: 4rem;
}

.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-\[10px\] {
  gap: 10px;
}

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

.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-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

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

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

.gap-y-0 {
  row-gap: 0px;
}

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

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

.gap-y-10 {
  row-gap: 2.5rem;
}

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

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

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

.gap-y-8 {
  row-gap: 2rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

.overscroll-x-contain {
  overscroll-behavior-x: contain;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

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

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

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

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

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

.rounded {
  border-radius: 0.25rem;
}

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

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

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

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

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

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

.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

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

.border {
  border-width: 1px;
}

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

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

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

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

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

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

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

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

.border-dashed {
  border-style: dashed;
}

.border-\[color\:var\(--black-8\)\] {
  border-color: var(--black-8);
}

.border-\[color\:var\(--destructive\)\] {
  border-color: var(--destructive);
}

.border-accent {
  border-color: var(--accent);
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}

.border-amber-500\/80 {
  border-color: rgb(245 158 11 / 0.8);
}

.border-black-8 {
  border-color: var(--black-8);
}

.border-border {
  border-color: var(--border);
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / 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-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}

.border-primary {
  border-color: var(--primary);
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

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

.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}

.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.border-slate-800\/60 {
  border-color: rgb(30 41 59 / 0.6);
}

.border-slate-800\/90 {
  border-color: rgb(30 41 59 / 0.9);
}

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

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

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

.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

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

.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}

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

.border-t-accent {
  border-top-color: var(--accent);
}

.border-t-primary {
  border-top-color: var(--primary);
}

.bg-\[\#060B18\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 11 24 / var(--tw-bg-opacity, 1));
}

.bg-\[\#090E1A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(9 14 26 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0A66C2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 102 194 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0B132B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 19 43 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0F172A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1877F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ffffff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-\[color\:var\(--black\)\] {
  background-color: var(--black);
}

.bg-\[color\:var\(--black-3\)\] {
  background-color: var(--black-3);
}

.bg-\[color\:var\(--black-50\)\] {
  background-color: var(--black-50);
}

.bg-accent {
  background-color: var(--accent);
}

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

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

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

.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}

.bg-background {
  background-color: var(--background);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black-3 {
  background-color: var(--black-3);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}

.bg-border {
  background-color: var(--border);
}

.bg-card {
  background-color: var(--card);
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300\/30 {
  background-color: rgb(209 213 219 / 0.3);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}

.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}

.bg-muted {
  background-color: var(--muted);
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-primary {
  background-color: var(--primary);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

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

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

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

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

.bg-secondary {
  background-color: var(--secondary);
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-800\/90 {
  background-color: rgb(30 41 59 / 0.9);
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / 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\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

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

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

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

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

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

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

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

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

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

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

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.05\] {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-\[radial-gradient\(ellipse_80\%_50\%_at_50\%_-20\%\2c rgba\(249\2c 115\2c 22\2c 0\.15\)\2c transparent\)\] {
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%,rgba(249,115,22,0.15),transparent);
}

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

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

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

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

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

.from-\[\#00B67A\] {
  --tw-gradient-from: #00B67A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 182 122 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#0284C7\] {
  --tw-gradient-from: #0284C7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 132 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#1877F2\] {
  --tw-gradient-from: #1877F2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 119 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#1E5AA8\] {
  --tw-gradient-from: #1E5AA8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 90 168 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#1e3a8a\] {
  --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#4285F4\] {
  --tw-gradient-from: #4285F4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(66 133 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#4DBC15\] {
  --tw-gradient-from: #4DBC15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(77 188 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#6D28D9\] {
  --tw-gradient-from: #6D28D9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8B5A2B\] {
  --tw-gradient-from: #8B5A2B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 90 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#F26522\] {
  --tw-gradient-from: #F26522 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(242 101 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#FF6A00\] {
  --tw-gradient-from: #FF6A00 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 106 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/20 {
  --tw-gradient-from: rgb(0 0 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-300 {
  --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-300\/15 {
  --tw-gradient-from: rgb(147 197 253 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400\/20 {
  --tw-gradient-from: rgb(96 165 250 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500\/10 {
  --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-700 {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900 {
  --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900\/30 {
  --tw-gradient-from: rgb(30 58 138 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-600 {
  --tw-gradient-from: #db2777 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary {
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-600 {
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary {
  --tw-gradient-from: var(--secondary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[\#1a3272\] {
  --tw-gradient-to: rgb(26 50 114 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1a3272 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[\#2563eb\] {
  --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-600 {
  --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-800 {
  --tw-gradient-to: rgb(30 64 175 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e40af var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-800\/60 {
  --tw-gradient-to: rgb(30 64 175 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(30 64 175 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-muted {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--muted) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-600 {
  --tw-gradient-to: rgb(147 51 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-sky-50 {
  --tw-gradient-to: rgb(240 249 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0f9ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#008F5F\] {
  --tw-gradient-to: #008F5F var(--tw-gradient-to-position);
}

.to-\[\#0369A1\] {
  --tw-gradient-to: #0369A1 var(--tw-gradient-to-position);
}

.to-\[\#0E5FCD\] {
  --tw-gradient-to: #0E5FCD var(--tw-gradient-to-position);
}

.to-\[\#15437F\] {
  --tw-gradient-to: #15437F var(--tw-gradient-to-position);
}

.to-\[\#1e3a8a\] {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

.to-\[\#2563eb\] {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-\[\#34A853\] {
  --tw-gradient-to: #34A853 var(--tw-gradient-to-position);
}

.to-\[\#3A9410\] {
  --tw-gradient-to: #3A9410 var(--tw-gradient-to-position);
}

.to-\[\#5B21B6\] {
  --tw-gradient-to: #5B21B6 var(--tw-gradient-to-position);
}

.to-\[\#6E4621\] {
  --tw-gradient-to: #6E4621 var(--tw-gradient-to-position);
}

.to-\[\#D2521A\] {
  --tw-gradient-to: #D2521A var(--tw-gradient-to-position);
}

.to-\[\#E04C00\] {
  --tw-gradient-to: #E04C00 var(--tw-gradient-to-position);
}

.to-background {
  --tw-gradient-to: var(--background) var(--tw-gradient-to-position);
}

.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-black\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0.3) var(--tw-gradient-to-position);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-blue-600\/10 {
  --tw-gradient-to: rgb(37 99 235 / 0.1) var(--tw-gradient-to-position);
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-blue-800 {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.to-blue-900 {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

.to-blue-900\/30 {
  --tw-gradient-to: rgb(30 58 138 / 0.3) var(--tw-gradient-to-position);
}

.to-border {
  --tw-gradient-to: var(--border) var(--tw-gradient-to-position);
}

.to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.to-primary {
  --tw-gradient-to: var(--primary) var(--tw-gradient-to-position);
}

.to-red-700 {
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

.to-slate-900 {
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}

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

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

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

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

.fill-accent {
  fill: var(--accent);
}

.fill-amber-400 {
  fill: #fbbf24;
}

.fill-border {
  fill: var(--border);
}

.stroke-\[3\] {
  stroke-width: 3;
}

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

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-1 {
  padding: 0.25rem;
}

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

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

.py-36 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

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

.\!pr-16 {
  padding-right: 4rem !important;
}

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

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

.pb-12 {
  padding-bottom: 3rem;
}

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

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

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

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

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

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

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

.pl-5 {
  padding-left: 1.25rem;
}

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

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

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

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

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

.pr-9 {
  padding-right: 2.25rem;
}

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

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

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

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

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

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

.pt-3 {
  padding-top: 0.75rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

.pt-7 {
  padding-top: 1.75rem;
}

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

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

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

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

.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-sans);
}

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

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

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

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

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

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

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

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

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

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

.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-light {
  font-weight: 300;
}

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

.not-italic {
  font-style: normal;
}

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

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-loose {
  line-height: 2;
}

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

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

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.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-\[\#161413\]\/45 {
  color: rgb(22 20 19 / 0.45);
}

.text-\[\#1e3a8a\] {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-\[\#9db6e8\] {
  --tw-text-opacity: 1;
  color: rgb(157 182 232 / var(--tw-text-opacity, 1));
}

.text-\[color\:var\(--accent\)\] {
  color: var(--accent);
}

.text-\[color\:var\(--accent-strong\)\] {
  color: var(--accent-strong);
}

.text-\[color\:var\(--black-50\)\] {
  color: var(--black-50);
}

.text-\[color\:var\(--black-body\)\] {
  color: var(--black-body);
}

.text-\[color\:var\(--destructive\)\] {
  color: var(--destructive);
}

.text-\[rgba\(25\2c 25\2c 25\2c 0\.08\)\] {
  color: rgba(25,25,25,0.08);
}

.text-accent {
  color: var(--accent);
}

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

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

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

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

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

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

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

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-blue-100\/95 {
  color: rgb(219 234 254 / 0.95);
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-50 {
  --tw-text-opacity: 1;
  color: rgb(239 246 255 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

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

.text-border {
  color: var(--border);
}

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

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

.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-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / 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-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-700\/80 {
  color: rgb(67 56 202 / 0.8);
}

.text-indigo-950 {
  --tw-text-opacity: 1;
  color: rgb(30 27 75 / var(--tw-text-opacity, 1));
}

.text-ink {
  color: var(--text-heading);
}

.text-ink-muted {
  color: var(--text-muted);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-primary {
  color: var(--primary);
}

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

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

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

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

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

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

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

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

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

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

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

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

.overline {
  text-decoration-line: overline;
}

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

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-\[0\.07\] {
  opacity: 0.07;
}

.mix-blend-overlay {
  mix-blend-mode: overlay;
}

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

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_2px_0_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0 0 2px 0 rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 0 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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black {
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-black\/10 {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-black\/20 {
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-black\/5 {
  --tw-shadow-color: rgb(0 0 0 / 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-500 {
  --tw-shadow-color: #22c55e;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-500\/30 {
  --tw-shadow-color: rgb(34 197 94 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-indigo-500\/30 {
  --tw-shadow-color: rgb(99 102 241 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline {
  outline-style: solid;
}

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

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

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

.ring-background {
  --tw-ring-color: var(--background);
}

.ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}

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

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

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

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

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

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

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

.backdrop-blur-\[12px\] {
  --tw-backdrop-blur: blur(12px);
  -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);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -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);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -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);
}

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

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

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

.delay-1000 {
  transition-delay: 1000ms;
}

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

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

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

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

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

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

/* ==========================================================================
   Typography system — the ONE place a size, a weight or a tracking is decided.
   ==========================================================================

   The site is set entirely in Inter, self-hosted as a variable woff2 (the
   @font-face block lives in templates/base.html, next to the preload that
   fetches it; --font-sans is declared there too and <html> is set from it).
   There is no second face: `font-serif` and `font-mono` in the Tailwind config
   are aliases of the same token, because the old Source Serif 4 / Geist Mono
   entries pointed at fonts the site never actually loaded.

   Nothing below re-declares `font-family`. The family is inherited from <html>
   exactly once, so a component that wants a different face has to say so — it
   is not overriding a universal selector to do it.

   -- The scale ---------------------------------------------------------------
   Six display steps and four text steps, taken from the design file's 1920px
   values and made fluid with clamp(). The `vw` middle term is the design value
   divided by 1920, so at exactly 1920px each step lands on its drawn size; the
   floor is what the step is allowed to shrink to on a phone.

       token        1920px   floor   used by
       --fs-h1        60px    32px   .section-title      — a section's <h2>
       --fs-h2        32px    24px   .card-title         — a panel heading
       --fs-h3        28px    24px   .package-title      — a card title
       --fs-h4        26px    22px   .card-title.is-sm   — a row in a stack
       --fs-h5        22px    22px   .card-title.is-xs   — a cell heading
       --fs-h6        18px    18px   a sub-heading over a column of prose
       --fs-body-lg   18px           lead paragraph
       --fs-body      16px           running copy (also the <body> size)
       --fs-sm        14px           labels, chips, captions, small print
       --fs-xs        12px           the uppercase rule above a list

   `.hero-title` sits one step ABOVE --fs-h1 and is defined with the rest of the
   hero furniture further down, because its cap is measured against the viewport
   HEIGHT and only makes sense next to the hero it has to fit inside.

   -- Weights -----------------------------------------------------------------
   Four, and no more — one variable file serves all of them at no extra cost,
   but every extra weight in a design is one more thing to get inconsistent.

       400  --fw-regular    running copy, and anything at body size
       500  --fw-medium     UI labels, nav items, table headers
       600  --fw-semibold   EVERY heading, every button, every eyebrow
       700  --fw-bold       reserved: a number that has to shout, nothing else

   Headings are 600, never 700. Inter's 600 at display sizes already reads as
   bold, and 700 next to it on the same page looks like a mistake.

   -- Colour ------------------------------------------------------------------
   Text colour is semantic, never a hand-picked hex or a Tailwind grey:

       --text-heading        ink; headings and statement lines
       --text-body           running copy
       --text-muted          captions, meta, disabled labels
       --text-inverse        the same two, on the #161413 dark bands and
       --text-inverse-body   over photographs

   As Tailwind utilities those are `text-ink`, `text-ink-body`, `text-ink-muted`,
   `text-ink-inverse`, `text-ink-inverse-body`. The design-system classes below
   already carry the right one, so a section should rarely need them.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Button system — the ONLY way to style a button or CTA on this site.
   ==========================================================================

   Every clickable call-to-action is `.btn` plus exactly one variant and
   (optionally) one size. Do not hand-roll a button out of utilities: if a new
   need appears, add a variant here so every surface inherits it.

       <a class="btn btn-primary">Get a quote</a>
       <a class="btn btn-outline btn-lg">Call us</a>
       <button class="btn btn-outline-light btn-sm btn-icon">…</button>

   Variants — pick by the job, not by the colour you feel like:
     .btn-primary        the one action you want taken (solid accent)
     .btn-secondary      an equally important alternative (solid navy)
     .btn-outline        supporting action on a LIGHT surface
     .btn-outline-light  supporting action on a DARK surface
     .btn-outline-accent    the ONE action on a dark tile (accent ink + rule)
     .btn-outline-adaptive  outline on a surface whose colour CHANGES under it
     .btn-white          supporting action on a dark/photographic surface
     .btn-soft           low-emphasis inline action (tinted accent)
     .btn-ghost          lowest emphasis; menu rows, toolbars, pagination

   Sizes: .btn-xs  .btn-sm  (default = md)  .btn-lg
   Shape: .btn-icon (square, icon only)   .btn-block (full width)
          .btn-round (circular — floating action buttons only)

   Shape spec (from the design file, applied to the default md size):
       display: flex; padding: 11.5px 20px;
       justify-content: center; align-items: center; gap: 10px;
       border-radius: 4px; background: var(--Primary-color, #F97316);
       box-shadow: 0 12px 24px 0 rgba(249, 115, 22, 0.12);
   The 4px radius is now the shape of EVERY button — there are no pill buttons
   left. xs/sm/lg scale the padding and type off the md numbers and keep 4px.

   One hover language, applied identically everywhere:
     · solid buttons deepen their fill
     · every outline/tinted/ghost button FILLS WITH ACCENT
     · all of them lift 1px and gain a coloured shadow
     · :active drops the lift, :focus-visible draws an accent ring
   Reduced-motion users get the colour change without the movement.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Hero type scale + hero furniture
   ==========================================================================

   The photographic hero (components/index/hero_new.html) sits one step above
   the section scale in static/css/input.css: same Inter family, same -0.06em
   tracking, but a 110px display size on a 90% leading, straight off the design
   file. Same rule as buttons and section headers — a hero composes these
   classes, it never re-declares text-* sizes locally.

       eyebrow  .section-eyebrow.on-glass   4px radius, 1px rgba(255,255,255,.08)
                                            border over a rgba(255,255,255,.04) fill
                                            (14px at `lg`, stepping down to 9px
                                            on a phone — see the rule)
       title    .hero-title                 Inter 110px, 600, -6.6px (= -.06em),
                                            on a single 105% leading at every
                                            width (see the rule for why not 90%)
       desc     .section-desc.on-dark       Inter 16/180%, 400, rgba(255,255,255,.8)
       card     .hero-card                  284px, 60px/24px padding, white-80
                                            over a 12px backdrop blur

   110px is the 1920px value. The title is fluid (5.729vw = 110/1920) and floors
   at 34px on a phone; the tracking is in `em` so it scales with the size.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Framed photographic hero — shared chrome
   ==========================================================================

   Two heroes now open a page this way: the full-screen home hero
   (components/index/hero_new.html) and the interior-page band
   (components/common/primary_hero_new.html). Everything they have in common
   lives here so the two can never drift: the white frame they sit inside, the
   corner radius that frame implies, the scrim over the photograph, and the
   header height each has to clear.

   A page opts in with ONE flag — `header_transparent: True` in its context.
   base.html turns that into `has-framed-hero` on <body>, which is what defines
   the tokens below; the same flag puts the header into its transparent mode.
   Frame and transparent header are two halves of one decision, so they are
   driven by one switch rather than two that could disagree.

   Everything reads the tokens through `var(..., 0px)`, so a hero dropped on a
   page that did NOT opt in degrades to flush and square instead of breaking.
   -------------------------------------------------------------------------- */

.has-framed-hero {
  --hero-frame: 8px;
  /* The corner is the BUTTON's corner — 4px, the one radius the whole design
       uses for a hard-edged surface — and it does NOT scale with the frame: a
       wider white inset on a big screen is more breathing room, not a rounder
       card. Anything larger read as a soft panel next to square-cornered
       buttons sitting on top of it. */
  --hero-radius: 4px;
  /* The two header tiers added up. A fixed header is out of flow, so every
       hero has to pay for its own clearance. */
  --hdr-total: 6.25rem;
}

@media (min-width: 640px) {
  .has-framed-hero {
    --hero-frame: 12px;
    --hdr-total: 6.5rem;
  }
}

@media (min-width: 1024px) {
  .has-framed-hero {
    --hdr-total: 7.5rem;
  }
}

/* ==========================================================================
   Form card — the design file's white lead-capture panel
   --------------------------------------------------------------------------
   Straight off the design file's Frame 227 (see design.md): a white 698px card
   on the page's tinted band, 48px of padding, a 20px column gap, and inside it
   a stack of 16px-gapped rows whose controls are all the same 48px box.

   It is a component block rather than a bag of utilities for the same reason
   the button system is: the same card appears on several service pages with
   different questions authored per page, and one of its controls (the date
   field) is a shared partial that has to come out looking like the plain inputs
   beside it. One definition is the only way those stay in step.

   Type is the design's, and it is NOT the section header scale — a card
   heading sits a step below a section heading. Nothing about the type is local
   to this block: the heading is the shared `.card-title` (Inter 600, 32px,
   150%, -0.06em, --black), the subheading under it is the shared
   `.section-desc` (the design gives it the identical 16px/180% body treatment),
   and the questions inside the card are the shared field system, `.qf-label` /
   `.qf-input` — see the "Fields" block in the quote-form section below.

   The submit button is the plain shared .btn.btn-primary.btn-block: the
   design's 52px accent button IS the site button (11.5px/20px padding, 4px
   radius, the same 0 12px 24px accent shadow), so there is nothing to add.
   ========================================================================== */

/* ==========================================================================
   QUOTE WIZARD
   --------------------------------------------------------------------------
   The public quote form at /quote/ is a six-step wizard (Service, Inventory,
   Locations, Date, Extras, Contact) rendered by templates/components/
   quote_form_v2/. Everything below is shared between those partials AND the
   markup scripts.html builds at runtime for the API-driven "Inventory" step —
   which is exactly why these are component classes and not inline utilities:
   a choice card authored in a template and one generated in JS must be the
   same object, or the two halves of one step drift apart.

   The visual language is the design file's: a white panel on the page's warm
   grey ground, neutral chrome, and accent reserved for the ONE thing the
   customer has chosen or is being asked to choose next.
   ========================================================================== */

/* ==========================================================================
   Google Places autocomplete dropdown
   ==========================================================================

   The Maps JS API appends one `.pac-container` per bound input to <body> - not
   to the field - positions it absolutely under that field, and then keeps it
   there for the life of the page. It is never removed, and a spent one is left
   *displayed at zero height* rather than hidden. Google's own stylesheet gives
   that container a 1px `border-top`, a drop shadow and `z-index: 1000`, so an
   emptied container paints a hairline the width of the field over everything
   we own: over the wizard's "Location required" modal (z-100), and over every
   step after step 3, because the container outlives the field it belongs to.

   Two rules answer both halves of that:
     - a container holding no suggestions draws nothing at all;
     - one that does hold suggestions sits above the sticky step nav (z-51) and
       below the summary drawer (55/60), the dialogs (100) and the header
       (100) - so a dropdown can never be painted over a dialog again.

   `font-family: inherit` is the third: Google hardcodes Arial, and this site
   is set in Inter everywhere (see CLAUDE.md - nothing else names a font).

   Every selector is prefixed with `body` on purpose. Google injects its
   stylesheet at runtime, i.e. AFTER this file's <link>, so a bare
   `.pac-container` rule ties on specificity and LOSES on order; the extra
   element bumps us past it without reaching for `!important` (which is kept
   for the one declaration that has to beat an inline style Google writes).

   The block sits OUTSIDE `@layer components` for the same kind of reason:
   Tailwind tree-shakes layered class rules whose selectors it cannot find in
   the templates, and these class names are written by Google at runtime,
   never authored here.
   -------------------------------------------------------------------------- */

body .pac-container {
  z-index: 52;
  margin-top: 6px;
  border: 1px solid var(--black-8);
  border-radius: 10px;
  background-color: var(--card);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.35);
  font-family: inherit;
}

/* Nothing in it = nothing to draw. This is the hairline: Google leaves the
   node in the layout at zero height and its border + shadow keep painting.
   `!important` because the `display` this has to beat is written inline. */

body .pac-container:empty {
  display: none !important;
  border: 0;
  box-shadow: none;
}

body .pac-item {
  padding: 7px 12px;
  border-top-color: var(--black-8);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-body);
  cursor: pointer;
}

body .pac-item:first-child {
  border-top: 0;
}

body .pac-item:hover,
body .pac-item-selected,
body .pac-item-selected:hover {
  background-color: var(--black-3);
}

body .pac-item-query {
  font-size: var(--fs-sm);
  color: var(--text-heading);
}

body .pac-matched {
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Home hero — components/index/hero_new.html
   --------------------------------------------------------------------------
   Moved here from a \3c style> in that partial. output.css is deferred and the
   critical sheet is built by scanning the hero partials, so a rule kept next to
   the markup arrives a frame LATE: the block painted at its content height with
   no `--hero-gap-*` and then re-laid-out. Anything that decides an
   above-the-fold element's size, spacing or visibility belongs in this file.
   ========================================================================== */

/* Height comes from the shared `.hero-screen` in static/css/input.css. */

/* ── Vertical rhythm ──────────────────────────────────────────────────────
   Every vertical measurement is fluid in `svh` between a floor and the
   design's own value, so the composition compresses smoothly from a 1080p
   display down to a laptop rather than falling off a media-query cliff.
   `--hdr-total` (the two header tiers added up) comes from the shared
   `.has-framed-hero` token block in static/css/input.css. */

.hero-full {
  --hero-gap-1: clamp(0.5rem, 1.6svh, 1.25rem);
  --hero-gap-2: clamp(0.75rem, 2.2svh, 1.5rem);
  --hero-gap-3: clamp(1rem, 3.2svh, 2.5rem);
}

.hero-full .hero-inner {
  padding-top: calc(var(--hdr-total) + clamp(0.75rem, 3svh, 2.25rem));
  padding-bottom: clamp(1.5rem, 5svh, 3.5rem);
}

.hero-full .hero-title {
  margin-top: var(--hero-gap-1);
}

.hero-full .section-desc {
  margin-top: var(--hero-gap-2);
  line-height: clamp(1.45em, 3.1svh, 1.8em);
}

.hero-full .hero-action-row {
  margin-top: var(--hero-gap-3);
}

/* The card's 60px design padding is the ceiling, not a constant — it is the
   first thing that should give when the screen is short. Only from `sm`,
   where that 60px applies at all: below it the cards are already on the
   compact padding from the hero scale and a tall screen must not inflate
   them back up. */

@media (min-width: 640px) {
  .hero-full .hero-card {
    padding-top: clamp(1.125rem, 5.2svh, 3.75rem);
    padding-bottom: clamp(1.125rem, 5.2svh, 3.75rem);
  }
}

/* ── The notch ────────────────────────────────────────────────────────────
   Chamfered, and deliberately NOT rounded — square vertices are what the
   design draws, and a radius here reads as a mismatched second corner
   language against the frame's own. Because the corners are square the
   whole shape is one `clip-path` on this element: the sides rake out from a
   narrow top edge to the full footprint at the floor. (`clip-path` and
   `border-radius` do not compose — the clip wins — so rounding these
   corners would mean rebuilding the shape out of separate painted pieces.)
   `--notch-chamfer` is the horizontal run of each rake. */

.hero-notch {
  --notch-chamfer: 2.75rem;
  /* Sized as a share of the HERO, not of `vw` — a viewport unit counts the
       scrollbar and would reintroduce the overflow this layout just lost. */
  width: clamp(18rem, 32%, 34rem);
  height: clamp(2.125rem, 4.6svh, 3rem);
  padding: 0;
  clip-path: polygon(
        var(--notch-chamfer) 0,
        calc(100% - var(--notch-chamfer)) 0,
        100% 100%,
        0 100%
    );
}

.hero-notch i {
  transition: transform 0.2s ease;
}

.hero-notch:hover i {
  transform: translateY(2px);
}

/* A short screen has no room to give the notch, and it is a convenience
   rather than the page's only way down. */

@media (min-width: 1024px) and (max-height: 620px) {
  .hero-notch {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-notch:hover i {
    transform: none;
  }
}

/* ==========================================================================
   Interior hero band — components/common/primary_hero_new.html
   Here for the same reason as the home hero above: it is above the fold on
   every interior page, and its padding must be right on the first paint.
   ========================================================================== */

/* Height comes from the shared `.hero-screen` in static/css/input.css: one
   screen, same as the home hero. It replaced the 838px design band — an
   interior page that opens a full screen tall reads as the same kind of
   page as the home one, and the fold lands in the same place on both.

   Still looser than the home hero's title cap, because this hero has no
   choice cards to house: the headline holds the design's full 110px
   wherever the WIDTH affords it, and only gives way on a short viewport,
   where a hard screen height means it has to. */

.hero-band {
  /* Looser than the home hero's 9.1svh: this hero has no choice cards to
       house, so the headline holds its full size wherever the WIDTH affords
       it and only gives way on a short viewport. Both caps came down by the
       same factor when the title's leading went from 0.9 to 1.05 — the cap
       bounds the title BLOCK's share of a short screen, and that is size x
       leading (see `.hero-title` in static/css/input.css). */
  --hero-title-height-cap: 10.3svh;
}

/* ── Vertical rhythm ──────────────────────────────────────────────────────
   Fluid in `svh` between a floor and the design's own value, so the column
   compresses smoothly on a short screen rather than falling off a
   media-query cliff. `--hdr-total` is the two header tiers added up; the
   header is fixed and out of flow, so the band clears it itself. */

.hero-band-inner {
  padding-top: calc(var(--hdr-total, 5rem) + clamp(0.5rem, 3svh, 3rem));
  padding-bottom: clamp(1.5rem, 5svh, 3.5rem);
}

/* The content column, straight off the design's auto-layout frame: 945px
   wide, stacked, left-aligned, one uniform 24px gap. The gap replaces the
   five different per-element margins this used to carry — the design gives
   every row the same rhythm, and one property is easier to keep honest than
   five. It still floors at 14px on a short screen so the 838px cap has room
   to give.

   945px is a max, not a width: below that the column is simply the space it
   has. And it is the column, not a per-element `max-w-*`, that decides where
   the headline and the paragraph wrap — which is what puts the copy on the
   same line breaks as the design.

   The children stretch rather than sitting at `flex-start` as the design
   file has it. On desktop the two are identical, because every child here is
   either its own natural width (the inline-flex eyebrow, which carries
   `self-start`) or a full-measure text block. On a phone, stretch is what
   makes the CTA row go full-width instead of shrinking to the wider label. */

.hero-band-col {
  max-width: 945px;
  gap: clamp(0.75rem, 2.6svh, 1.5rem);
}

/* ==========================================================================
   Invoice lookup / payment page — templates/pages/make-payment.html
   ==========================================================================

   Two surfaces: white detail cards (`.pay-card`) in the reading column, and
   one dark summary (`.pay-summary`) that sits on the shared `.glow-plate` so
   it reads as the same premium dark surface as the packages band. Values are
   deliberately heavier and darker than their labels — a customer scans this
   page for numbers, references and names, so those carry `--text-heading` at
   semibold while the label above each stays the muted overline.
   -------------------------------------------------------------------------- */

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

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

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

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

.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\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

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

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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-\[\#1e3a8a\]\/50:hover {
  border-color: rgb(30 58 138 / 0.5);
}

.hover\:border-accent:hover {
  border-color: var(--accent);
}

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

.hover\:bg-\[\#004182\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 65 130 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#166fe5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 111 229 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#1ebe5a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 190 90 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-black-8:hover {
  background-color: var(--black-8);
}

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

.hover\:bg-muted:hover {
  background-color: var(--muted);
}

.hover\:bg-neutral-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / 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-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

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

.hover\:from-white:hover {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:text-\[\#2563eb\]:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-\[color\:var\(--accent-strong\)\]:hover {
  color: var(--accent-strong);
}

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

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

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

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

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

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

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

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

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

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

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

.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

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

.focus\:border-\[\#1e3a8a\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.focus\:border-accent:focus {
  border-color: var(--accent);
}

.focus\:border-primary:focus {
  border-color: var(--primary);
}

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

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

.focus\:ring-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-\[\#1e3a8a\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity, 1));
}

.focus\:ring-accent:focus {
  --tw-ring-color: var(--accent);
}

.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary);
}

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

.focus-visible\:-translate-y-2:focus-visible {
  --tw-translate-y: -0.5rem;
  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));
}

.focus-visible\:border-accent:focus-visible {
  border-color: var(--accent);
}

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

.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-accent:focus-visible {
  --tw-ring-color: var(--accent);
}

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

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

.active\:w-7:active {
  width: 1.75rem;
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

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

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

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

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

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

.group\/more[open] .group-open\/more\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.group\/card:hover .group-hover\/card\: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));
}

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

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

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

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

.group\/card:hover .group-hover\/card\:gap-2 {
  gap: 0.5rem;
}

.group:hover .group-hover\:border-primary {
  border-color: var(--primary);
}

.group\/card:hover .group-hover\/card\:bg-accent {
  background-color: var(--accent);
}

.group:hover .group-hover\:bg-green-500\/30 {
  background-color: rgb(34 197 94 / 0.3);
}

.group\/card:hover .group-hover\/card\:text-accent {
  color: var(--accent);
}

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

.group:hover .group-hover\:text-\[\#1e3a8a\] {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-\[\#2563eb\] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

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

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

.group\/card:hover .group-hover\/card\:decoration-accent {
  text-decoration-color: var(--accent);
}

.group\/card:hover .group-hover\/card\:decoration-2 {
  text-decoration-thickness: 2px;
}

.group\/card:hover .group-hover\/card\:underline-offset-4 {
  text-underline-offset: 4px;
}

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

.group:hover .group-hover\:opacity-10 {
  opacity: 0.1;
}

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

.peer:checked ~ .peer-checked\:z-10 {
  z-index: 10;
}

.peer:checked ~ .peer-checked\:border-accent {
  border-color: var(--accent);
}

.peer:checked ~ .peer-checked\:shadow-\[0_6px_20px_-6px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 6px 20px -6px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 6px 20px -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);
}

.peer:checked ~ .peer-checked\: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);
}

.peer:checked ~ .peer-checked\: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);
}

.group:has(:checked) .group-has-\[\:checked\]\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 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));
}

.group:has(:checked) .group-has-\[\:checked\]\:text-accent {
  color: var(--accent);
}

.group:has(:checked) .group-has-\[\:checked\]\:opacity-100 {
  opacity: 1;
}

.prose-headings\:font-semibold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-headings\:tracking-tight :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  letter-spacing: -0.025em;
}

.prose-a\:text-primary :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: var(--primary);
}

.hover\:prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
  text-decoration-line: underline;
}

.prose-blockquote\:border-l-4 :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-left-width: 4px;
}

.prose-blockquote\:text-muted-foreground :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: var(--muted-foreground);
}

.prose-img\:rounded-md :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: 0.375rem;
}

.prose-img\:shadow-md :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --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);
}

@media (min-width: 400px) {
  .min-\[400px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .sm\:left-4 {
    left: 1rem;
  }

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

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

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

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

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

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

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

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

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

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

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

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

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

  .sm\:mb-9 {
    margin-bottom: 2.25rem;
  }

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

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

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

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

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

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

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:hidden {
    display: none;
  }

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

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-3 {
    height: 0.75rem;
  }

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

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-44 {
    height: 11rem;
  }

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

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

  .sm\:h-56 {
    height: 14rem;
  }

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

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:h-72 {
    height: 18rem;
  }

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

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

  .sm\:h-\[90\%\] {
    height: 90%;
  }

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

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

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

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

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

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

  .sm\:w-3 {
    width: 0.75rem;
  }

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

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

  .sm\:w-4 {
    width: 1rem;
  }

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

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

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

  .sm\:w-8 {
    width: 2rem;
  }

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

  .sm\:w-\[35\%\] {
    width: 35%;
  }

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

  .sm\:w-\[calc\(50\%-16px\)\] {
    width: calc(50% - 16px);
  }

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

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

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

  .sm\:rotate-0 {
    --tw-rotate: 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));
  }

  .sm\:columns-2 {
    -moz-columns: 2;
         columns: 2;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-5 {
    gap: 1.25rem;
  }

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

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

  .sm\:gap-y-12 {
    row-gap: 3rem;
  }

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

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

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

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

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

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

  .sm\:divide-x-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(0px * var(--tw-divide-x-reverse));
    border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

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

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

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

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

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

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

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

  .sm\:p-7 {
    padding: 1.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:pr-7 {
    padding-right: 1.75rem;
  }

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

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

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

  .sm\:pt-32 {
    padding-top: 8rem;
  }

  .sm\:pt-36 {
    padding-top: 9rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -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);
  }
}

@media (min-width: 768px) {
  .md\:static {
    position: static;
  }

  .md\:sticky {
    position: sticky;
  }

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

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

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

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

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-auto {
    height: auto;
  }

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

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

  .md\:max-w-\[66\.666\%\] {
    max-width: 66.666%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

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

  .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\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }

  .lg\:sticky {
    position: sticky;
  }

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

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

  .lg\:top-32 {
    top: 8rem;
  }

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

  .lg\:order-last {
    order: 9999;
  }

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

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

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

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

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

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

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

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

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

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

  .lg\:mt-9 {
    margin-top: 2.25rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-\[5\/6\] {
    aspect-ratio: 5/6;
  }

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

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

  .lg\:h-20 {
    height: 5rem;
  }

  .lg\:h-64 {
    height: 16rem;
  }

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

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

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

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

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

  .lg\:w-\[calc\(33\.333\%-16px\)\] {
    width: calc(33.333% - 16px);
  }

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

  .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\:scroll-mt-20 {
    scroll-margin-top: 5rem;
  }

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

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

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

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

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

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

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

  .lg\:grid-cols-\[1\.6fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .lg\:grid-cols-\[1\.9fr_1fr_1fr_0\.95fr_1\.35fr\] {
    grid-template-columns: 1.9fr 1fr 1fr 0.95fr 1.35fr;
  }

  .lg\:grid-cols-\[1fr_1\.5fr\] {
    grid-template-columns: 1fr 1.5fr;
  }

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

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

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

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

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

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

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

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

  .lg\:gap-12 {
    gap: 3rem;
  }

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

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

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

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

  .lg\:gap-5 {
    gap: 1.25rem;
  }

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

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

  .lg\:gap-\[60px\] {
    gap: 60px;
  }

  .lg\:gap-x-7 {
    -moz-column-gap: 1.75rem;
         column-gap: 1.75rem;
  }

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

  .lg\:gap-y-14 {
    row-gap: 3.5rem;
  }

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

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

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

  .lg\:self-auto {
    align-self: auto;
  }

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

  .lg\:rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .lg\:rounded-tr-none {
    border-top-right-radius: 0px;
  }

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

  .lg\:bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }

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

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

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

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

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

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

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

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

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

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

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

  .lg\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .lg\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

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

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

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

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

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

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .lg\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 1280px) {
  .xl\:ml-4 {
    margin-left: 1rem;
  }

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

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

  .xl\:max-w-8xl {
    max-width: 88rem;
  }

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

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

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

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

  .xl\:gap-24 {
    gap: 6rem;
  }

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

  .xl\:gap-5 {
    gap: 1.25rem;
  }

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

  .xl\:gap-\[23px\] {
    gap: 23px;
  }

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

  .xl\:pr-\[88px\] {
    padding-right: 88px;
  }

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

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

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

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

@media (min-width: 1536px) {
  .\32xl\:max-w-9xl {
    max-width: 96rem;
  }

  .\32xl\:gap-\[224px\] {
    gap: 224px;
  }
}

.dark\:bg-\[\#070B14\]:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(7 11 20 / var(--tw-bg-opacity, 1));
}

.dark\:bg-card:where([data-theme="dark"], [data-theme="dark"] *) {
  background-color: var(--card);
}

.dark\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
  background-color: rgb(255 255 255 / 0.1);
}

.dark\:hover\:shadow-2xl:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:hover\:shadow-black\/40:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-shadow-color: rgb(0 0 0 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.group:hover .dark\:group-hover\:opacity-20:where([data-theme="dark"], [data-theme="dark"] *) {
  opacity: 0.2;
}

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

.\[\&_\.section-desc_a\]\:text-foreground .section-desc a {
  color: var(--foreground);
}

.\[\&_\.section-desc_a\]\:underline .section-desc a {
  text-decoration-line: underline;
}

.\[\&_\.section-desc_a\]\:underline-offset-2 .section-desc a {
  text-underline-offset: 2px;
}

.\[\&_\.section-desc_strong\]\:font-bold .section-desc strong {
  font-weight: 700;
}

.\[\&_\.section-desc_strong\]\:text-foreground .section-desc strong {
  color: var(--foreground);
}

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

.\[\&_a\]\:text-white a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}

.\[\&_a\]\:underline-offset-2 a {
  text-underline-offset: 2px;
}

.\[\&_strong\]\:font-bold strong {
  font-weight: 700;
}

.\[\&_strong\]\:font-semibold strong {
  font-weight: 600;
}

.\[\&_strong\]\:text-foreground strong {
  color: var(--foreground);
}