/* ────────────────────────────────────────────────────────────────
 * BIBI Cars typography — single brand family
 *
 *   • MazzardM-Light       → 300  (thin display weight, hero only)
 *   • MazzardH-Regular     → 400  (DEFAULT body / nav / phones)
 *   • MazzardH-Medium      → 500  (sub-headings, CTA labels)
 *   • MazzardH-Bold        → 700  (h1 / h2 / strong emphasis)
 *
 * The "H" (grotesque) and "M" (humanist) variants share the family
 * name `Mazzard` so the requested weight resolves to the real face.
 * No other display fonts are loaded (Helvetica Now / Mazzard Soft
 * were retired — they were never referenced by markup).
 * ──────────────────────────────────────────────────────────────── */

/* === Mazzard family — registered under "Mazzard", "Mazzard M", "Mazzard H" === */

/* 300 — Light */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardM-Light.d7f904a2b036eb27e28e.woff2) format('woff2'),
       url(/static/media/MazzardM-Light.26fb22b269b0f1301b44.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardM-Light.d7f904a2b036eb27e28e.woff2) format('woff2'),
       url(/static/media/MazzardM-Light.26fb22b269b0f1301b44.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardM-Light.d7f904a2b036eb27e28e.woff2) format('woff2'),
       url(/static/media/MazzardM-Light.26fb22b269b0f1301b44.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 400 — Regular  (DEFAULT) */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardH-Regular.d2d7ecec0ebe0e041ab0.woff2) format('woff2'),
       url(/static/media/MazzardH-Regular.5b01742c75a881bfa1ab.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardH-Regular.d2d7ecec0ebe0e041ab0.woff2) format('woff2'),
       url(/static/media/MazzardH-Regular.5b01742c75a881bfa1ab.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardH-Regular.d2d7ecec0ebe0e041ab0.woff2) format('woff2'),
       url(/static/media/MazzardH-Regular.5b01742c75a881bfa1ab.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 500 — Medium */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardH-Medium.d50c3b05eaff4ca6102a.woff2) format('woff2'),
       url(/static/media/MazzardH-Medium.a565bf759b3fcd032758.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardH-Medium.d50c3b05eaff4ca6102a.woff2) format('woff2'),
       url(/static/media/MazzardH-Medium.a565bf759b3fcd032758.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardH-Medium.d50c3b05eaff4ca6102a.woff2) format('woff2'),
       url(/static/media/MazzardH-Medium.a565bf759b3fcd032758.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 600/700 — Bold (one face used for both 600 and 700 to avoid synthetic bolding) */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardH-Bold.d4d73d18e7de59e17919.woff2) format('woff2'),
       url(/static/media/MazzardH-Bold.29bb8b2259a9f9a44bfc.woff) format('woff');
  font-weight: 600 750;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardH-Bold.d4d73d18e7de59e17919.woff2) format('woff2'),
       url(/static/media/MazzardH-Bold.29bb8b2259a9f9a44bfc.woff) format('woff');
  font-weight: 600 750;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardH-Bold.d4d73d18e7de59e17919.woff2) format('woff2'),
       url(/static/media/MazzardH-Bold.29bb8b2259a9f9a44bfc.woff) format('woff');
  font-weight: 600 750;
  font-style: normal;
  font-display: swap;
}

/* 600 italic — SemiBoldItalic (used for the giant "460+" backdrop number) */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardH-SemiBoldItalic.db3b67a43c4f677e7104.woff2) format('woff2'),
       url(/static/media/MazzardH-SemiBoldItalic.1481f328854c06351846.woff) format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardH-SemiBoldItalic.db3b67a43c4f677e7104.woff2) format('woff2'),
       url(/static/media/MazzardH-SemiBoldItalic.1481f328854c06351846.woff) format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardH-SemiBoldItalic.db3b67a43c4f677e7104.woff2) format('woff2'),
       url(/static/media/MazzardH-SemiBoldItalic.1481f328854c06351846.woff) format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


/* 800 — ExtraBold (used for the orange step numerals "1/" "2/" …) */
@font-face {
  font-family: 'Mazzard';
  src: url(/static/media/MazzardH-ExtraBold.522dcd0a65feb03da32a.woff2) format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard H';
  src: url(/static/media/MazzardH-ExtraBold.522dcd0a65feb03da32a.woff2) format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzard M';
  src: url(/static/media/MazzardH-ExtraBold.522dcd0a65feb03da32a.woff2) format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* === Mazzard Soft and Helvetica Now Display REMOVED — unused in production
   (kept code reserved for the brand kit, but no markup references them). === */

*, ::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 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Mazzard, "Mazzard H", "Mazzard M", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::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;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-6 {
  bottom: -1.5rem;
}
.-left-12 {
  left: -3rem;
}
.-left-7 {
  left: -1.75rem;
}
.-left-\[1\.7rem\] {
  left: -1.7rem;
}
.-left-\[22px\] {
  left: -22px;
}
.-right-1 {
  right: -0.25rem;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-2 {
  right: -0.5rem;
}
.-right-20 {
  right: -5rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-28 {
  top: -7rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-2\.5 {
  bottom: 0.625rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-3\.5 {
  left: 0.875rem;
}
.left-4 {
  left: 1rem;
}
.left-7 {
  left: 1.75rem;
}
.left-8 {
  left: 2rem;
}
.left-\[1\.05rem\] {
  left: 1.05rem;
}
.left-\[10\%\] {
  left: 10%;
}
.left-\[15px\] {
  left: 15px;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[8\%\] {
  left: 8%;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-8 {
  right: 2rem;
}
.right-\[10\%\] {
  right: 10%;
}
.right-\[8\%\] {
  right: 8%;
}
.right-full {
  right: 100%;
}
.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\/3 {
  top: 33.333333%;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-8 {
  top: 2rem;
}
.top-9 {
  top: 2.25rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[22px\] {
  top: 22px;
}
.top-\[46\%\] {
  top: 46%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-\[60px\] {
  top: 60px;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1050\] {
  z-index: 1050;
}
.z-\[1100\] {
  z-index: 1100;
}
.z-\[120\] {
  z-index: 120;
}
.z-\[150\] {
  z-index: 150;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-full {
  grid-column: 1 / -1;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.\!mb-0 {
  margin-bottom: 0px !important;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.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-2\.5 {
  margin-bottom: 0.625rem;
}
.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;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mb-\[5px\] {
  margin-bottom: 5px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-7 {
  margin-left: 1.75rem;
}
.ml-\[4px\] {
  margin-left: 4px;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.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-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.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-\[1px\] {
  margin-top: 1px;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-auto {
  margin-top: auto;
}
.box-border {
  box-sizing: border-box;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[361\/326\] {
  aspect-ratio: 361/326;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-\[5\/4\] {
  aspect-ratio: 5/4;
}
.aspect-\[517\/388\] {
  aspect-ratio: 517/388;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.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-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[130px\] {
  height: 130px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[170px\] {
  height: 170px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[37px\] {
  height: 37px;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[44px\] {
  height: 44px;
}
.h-\[45px\] {
  height: 45px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[48px\] {
  height: 48px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[540px\] {
  height: 540px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[60vh\] {
  height: 60vh;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[720px\] {
  height: 720px;
}
.h-\[78px\] {
  height: 78px;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[88px\] {
  height: 88px;
}
.h-\[calc\(100\%-60px\)\] {
  height: calc(100% - 60px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-28 {
  max-height: 7rem;
}
.max-h-44 {
  max-height: 11rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[220px\] {
  max-height: 220px;
}
.max-h-\[260px\] {
  max-height: 260px;
}
.max-h-\[280px\] {
  max-height: 280px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[360px\] {
  max-height: 360px;
}
.max-h-\[380px\] {
  max-height: 380px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[480px\] {
  max-height: 480px;
}
.max-h-\[500px\] {
  max-height: 500px;
}
.max-h-\[640px\] {
  max-height: 640px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[95vh\] {
  max-height: 95vh;
}
.max-h-\[calc\(100vh-110px\)\] {
  max-height: calc(100vh - 110px);
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[14px\] {
  min-height: 14px;
}
.min-h-\[160px\] {
  min-height: 160px;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}
.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}
.min-h-\[34px\] {
  min-height: 34px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[500px\] {
  min-height: 500px;
}
.min-h-\[520px\] {
  min-height: 520px;
}
.min-h-\[560px\] {
  min-height: 560px;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[88px\] {
  min-height: 88px;
}
.min-h-\[96px\] {
  min-height: 96px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[2px\] {
  width: 2px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[54px\] {
  width: 54px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[78px\] {
  width: 78px;
}
.w-\[86\%\] {
  width: 86%;
}
.w-\[calc\(100\%-24px\)\] {
  width: calc(100% - 24px);
}
.w-\[calc\(100\%-32px\)\] {
  width: calc(100% - 32px);
}
.w-\[calc\(100vw-24px\)\] {
  width: calc(100vw - 24px);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[1100px\] {
  min-width: 1100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[1200px\] {
  min-width: 1200px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[1280px\] {
  min-width: 1280px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[16px\] {
  min-width: 16px;
}
.min-w-\[170px\] {
  min-width: 170px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[2\.5rem\] {
  min-width: 2.5rem;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[24px\] {
  min-width: 24px;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.min-w-\[2rem\] {
  min-width: 2rem;
}
.min-w-\[3\.5rem\] {
  min-width: 3.5rem;
}
.min-w-\[36px\] {
  min-width: 36px;
}
.min-w-\[400px\] {
  min-width: 400px;
}
.min-w-\[40px\] {
  min-width: 40px;
}
.min-w-\[450px\] {
  min-width: 450px;
}
.min-w-\[460px\] {
  min-width: 460px;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[560px\] {
  min-width: 560px;
}
.min-w-\[680px\] {
  min-width: 680px;
}
.min-w-\[700px\] {
  min-width: 700px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[72px\] {
  min-width: 72px;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.min-w-\[800px\] {
  min-width: 800px;
}
.min-w-\[860px\] {
  min-width: 860px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[900px\] {
  min-width: 900px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.min-w-full {
  min-width: 100%;
}
.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-\[100px\] {
  max-width: 100px;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[110px\] {
  max-width: 110px;
}
.max-w-\[1180px\] {
  max-width: 1180px;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[1600px\] {
  max-width: 1600px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[1920px\] {
  max-width: 1920px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[230px\] {
  max-width: 230px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[372px\] {
  max-width: 372px;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[42ch\] {
  max-width: 42ch;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[565px\] {
  max-width: 565px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-\[calc\(100vw-16px\)\] {
  max-width: calc(100vw - 16px);
}
.max-w-\[calc\(100vw-32px\)\] {
  max-width: calc(100vw - 32px);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -webkit-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1;
}
.flex-\[2\] {
  flex: 2 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;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.table-auto {
  table-layout: auto;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-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-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-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-4 {
  --tw-translate-x: 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-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
  --tw-translate-x: 1.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));
}
.translate-x-8 {
  --tw-translate-x: 2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-1 {
  --tw-rotate: -1deg;
  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));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-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-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));
}
.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-\[1\.02\] {
  --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));
}
.scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}
.animate-\[bibi-cookie-in_0\.4s_cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)_both\] {
  animation: bibi-cookie-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.animate-\[bibi-fade-in_0\.18s_ease-out_both\] {
  animation: bibi-fade-in 0.18s ease-out both;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-\[ping_0\.35s_ease-out_1\] {
  animation: ping 0.35s ease-out 1;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-mt-32 {
  scroll-margin-top: 8rem;
}
.list-inside {
  list-style-position: inside;
}
.list-outside {
  list-style-position: outside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
          appearance: none;
}
.\!grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[110px_1fr\] {
  grid-template-columns: 110px 1fr;
}
.grid-cols-\[140px_1fr\] {
  grid-template-columns: 140px 1fr;
}
.grid-cols-\[1fr_1fr\] {
  grid-template-columns: 1fr 1fr;
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.grid-cols-\[90px_1fr\] {
  grid-template-columns: 90px 1fr;
}
.grid-cols-\[auto_1fr_auto\] {
  grid-template-columns: auto 1fr auto;
}
.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.grid-rows-\[auto_minmax\(0\2c 1fr\)_auto\] {
  grid-template-rows: auto minmax(0,1fr) auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.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\.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-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-28 {
  gap: 7rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-1\.5 {
  column-gap: 0.375rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.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-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-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * 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-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-\[\#1F1F1E\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(31 31 30 / 1);
  border-color: rgb(31 31 30 / var(--tw-divide-opacity, 1));
}
.divide-\[\#E4E4E7\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));
}
.divide-\[\#F1F1F2\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 241 242 / 1);
  border-color: rgb(241 241 242 / var(--tw-divide-opacity, 1));
}
.divide-\[\#F4F4F5\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-divide-opacity, 1));
}
.divide-\[\#FECACA\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-divide-opacity, 1));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / 1);
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-indigo-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(238 242 255 / 1);
  border-color: rgb(238 242 255 / var(--tw-divide-opacity, 1));
}
.divide-red-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 226 226 / 1);
  border-color: rgb(254 226 226 / var(--tw-divide-opacity, 1));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / 1);
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-divide-opacity, 1));
}
.divide-zinc-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(250 250 250 / 1);
  border-color: rgb(250 250 250 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-lg {
  border-radius: 0.75rem !important;
  border-radius: var(--radius) !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.75rem;
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(0.75rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(0.75rem - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(0.75rem - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.\!border {
  border-width: 1px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.\!border-\[\#3a3a38\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(58 58 56 / 1) !important;
  border-color: rgb(58 58 56 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#FEAE00\]\/30 {
  border-color: rgb(254 174 0 / 0.3) !important;
}
.\!border-\[\#FEAE00\]\/40 {
  border-color: rgb(254 174 0 / 0.4) !important;
}
.\!border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5) !important;
}
.border-\[\#059669\] {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / 1);
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-\[\#059669\]\/30 {
  border-color: rgb(5 150 105 / 0.3);
}
.border-\[\#0A0A0B\] {
  --tw-border-opacity: 1;
  border-color: rgb(10 10 11 / 1);
  border-color: rgb(10 10 11 / var(--tw-border-opacity, 1));
}
.border-\[\#0EA5E9\]\/40 {
  border-color: rgb(14 165 233 / 0.4);
}
.border-\[\#10B981\] {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-\[\#10B981\]\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-\[\#10B981\]\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-\[\#16A34A\] {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / 1);
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-\[\#16A34A\]\/30 {
  border-color: rgb(22 163 74 / 0.3);
}
.border-\[\#18181B\] {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.border-\[\#18181B\]\/15 {
  border-color: rgb(24 24 27 / 0.15);
}
.border-\[\#19A36C\] {
  --tw-border-opacity: 1;
  border-color: rgb(25 163 108 / 1);
  border-color: rgb(25 163 108 / var(--tw-border-opacity, 1));
}
.border-\[\#1A1A18\] {
  --tw-border-opacity: 1;
  border-color: rgb(26 26 24 / 1);
  border-color: rgb(26 26 24 / var(--tw-border-opacity, 1));
}
.border-\[\#1E1E1E\] {
  --tw-border-opacity: 1;
  border-color: rgb(30 30 30 / 1);
  border-color: rgb(30 30 30 / var(--tw-border-opacity, 1));
}
.border-\[\#22C55E\]\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-\[\#27272A\] {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-\[\#2A2A28\] {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 40 / 1);
  border-color: rgb(42 42 40 / var(--tw-border-opacity, 1));
}
.border-\[\#2A2A2A\] {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 42 / 1);
  border-color: rgb(42 42 42 / var(--tw-border-opacity, 1));
}
.border-\[\#2C2C30\] {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 48 / 1);
  border-color: rgb(44 44 48 / var(--tw-border-opacity, 1));
}
.border-\[\#2a2a2e\] {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 46 / 1);
  border-color: rgb(42 42 46 / var(--tw-border-opacity, 1));
}
.border-\[\#34343A\] {
  --tw-border-opacity: 1;
  border-color: rgb(52 52 58 / 1);
  border-color: rgb(52 52 58 / var(--tw-border-opacity, 1));
}
.border-\[\#3A3A37\] {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 55 / 1);
  border-color: rgb(58 58 55 / var(--tw-border-opacity, 1));
}
.border-\[\#3B82F6\]\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-\[\#3B82F6\]\/40 {
  border-color: rgb(59 130 246 / 0.4);
}
.border-\[\#3a3a38\] {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 56 / 1);
  border-color: rgb(58 58 56 / var(--tw-border-opacity, 1));
}
.border-\[\#4F46E5\] {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / 1);
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-\[\#52525B\] {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / 1);
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.border-\[\#555452\] {
  --tw-border-opacity: 1;
  border-color: rgb(85 84 82 / 1);
  border-color: rgb(85 84 82 / var(--tw-border-opacity, 1));
}
.border-\[\#555\] {
  --tw-border-opacity: 1;
  border-color: rgb(85 85 85 / 1);
  border-color: rgb(85 85 85 / var(--tw-border-opacity, 1));
}
.border-\[\#5A5A56\] {
  --tw-border-opacity: 1;
  border-color: rgb(90 90 86 / 1);
  border-color: rgb(90 90 86 / var(--tw-border-opacity, 1));
}
.border-\[\#5B1B1B\] {
  --tw-border-opacity: 1;
  border-color: rgb(91 27 27 / 1);
  border-color: rgb(91 27 27 / var(--tw-border-opacity, 1));
}
.border-\[\#635BFF\] {
  --tw-border-opacity: 1;
  border-color: rgb(99 91 255 / 1);
  border-color: rgb(99 91 255 / var(--tw-border-opacity, 1));
}
.border-\[\#635BFF\]\/20 {
  border-color: rgb(99 91 255 / 0.2);
}
.border-\[\#737373\]\/30 {
  border-color: rgb(115 115 115 / 0.3);
}
.border-\[\#7A2B2B\] {
  --tw-border-opacity: 1;
  border-color: rgb(122 43 43 / 1);
  border-color: rgb(122 43 43 / var(--tw-border-opacity, 1));
}
.border-\[\#7C3AED\] {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / 1);
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}
.border-\[\#86EFAC\] {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / 1);
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-\[\#A1A1AA\] {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.border-\[\#A78BFA\]\/60 {
  border-color: rgb(167 139 250 / 0.6);
}
.border-\[\#A7F3D0\] {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / 1);
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-\[\#BAE6FD\] {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / 1);
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-\[\#BFDBFE\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-\[\#C7D2FE\] {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / 1);
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-\[\#D4D4D8\] {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-\[\#D97706\]\/30 {
  border-color: rgb(217 119 6 / 0.3);
}
.border-\[\#DC2626\] {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / 1);
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-\[\#DDD6FE\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / 1);
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}
.border-\[\#E2E2E2\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / 1);
  border-color: rgb(226 226 226 / var(--tw-border-opacity, 1));
}
.border-\[\#E4E4E7\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-\[\#E5E5E7\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 231 / 1);
  border-color: rgb(229 229 231 / var(--tw-border-opacity, 1));
}
.border-\[\#E5E7EB\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-\[\#E6E6E3\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 227 / 1);
  border-color: rgb(230 230 227 / var(--tw-border-opacity, 1));
}
.border-\[\#EF4444\]\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-\[\#EFEFEF\] {
  --tw-border-opacity: 1;
  border-color: rgb(239 239 239 / 1);
  border-color: rgb(239 239 239 / var(--tw-border-opacity, 1));
}
.border-\[\#F0F0EE\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 238 / 1);
  border-color: rgb(240 240 238 / var(--tw-border-opacity, 1));
}
.border-\[\#F1F1F2\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 241 242 / 1);
  border-color: rgb(241 241 242 / var(--tw-border-opacity, 1));
}
.border-\[\#F4B500\] {
  --tw-border-opacity: 1;
  border-color: rgb(244 181 0 / 1);
  border-color: rgb(244 181 0 / var(--tw-border-opacity, 1));
}
.border-\[\#F4F4F5\] {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-\[\#F4F4F5\]\/70 {
  border-color: rgb(244 244 245 / 0.7);
}
.border-\[\#F59E0B\] {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / 1);
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-\[\#FACC15\] {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / 1);
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-\[\#FBBF24\] {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-\[\#FCA5A5\] {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-\[\#FCD34D\] {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-\[\#FDE68A\] {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / 1);
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-\[\#FEAE00\] {
  --tw-border-opacity: 1;
  border-color: rgb(254 174 0 / 1);
  border-color: rgb(254 174 0 / var(--tw-border-opacity, 1));
}
.border-\[\#FEAE00\]\/25 {
  border-color: rgb(254 174 0 / 0.25);
}
.border-\[\#FEAE00\]\/30 {
  border-color: rgb(254 174 0 / 0.3);
}
.border-\[\#FEAE00\]\/40 {
  border-color: rgb(254 174 0 / 0.4);
}
.border-\[\#FEAE00\]\/50 {
  border-color: rgb(254 174 0 / 0.5);
}
.border-\[\#FEAE00\]\/60 {
  border-color: rgb(254 174 0 / 0.6);
}
.border-\[\#FECACA\] {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-\[\#FECDD3\] {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / 1);
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / 1);
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / 1);
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / 1);
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / 1);
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-black\/70 {
  border-color: rgb(0 0 0 / 0.7);
}
.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / 1);
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / 1);
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / 1);
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-500\/40 {
  border-color: rgb(59 130 246 / 0.4);
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / 1);
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-destructive {
  border-color: hsl(0 84% 60%);
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(0 84% 60% / 0.5);
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / 1);
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / 1);
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / 1);
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/25 {
  border-color: rgb(16 185 129 / 0.25);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / 1);
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-fuchsia-200 {
  --tw-border-opacity: 1;
  border-color: rgb(245 208 254 / 1);
  border-color: rgb(245 208 254 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / 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 / 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 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / 1);
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / 1);
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / 1);
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 1);
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / 1);
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/50 {
  border-color: rgb(34 197 94 / 0.5);
}
.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / 1);
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}
.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / 1);
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / 1);
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-indigo-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / 1);
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-indigo-600 {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / 1);
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-input {
  border-color: hsl(240 6% 90%);
  border-color: hsl(var(--input));
}
.border-lime-500\/50 {
  border-color: rgb(132 204 22 / 0.5);
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / 1);
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / 1);
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-orange-500\/50 {
  border-color: rgb(249 115 22 / 0.5);
}
.border-pink-500\/30 {
  border-color: rgb(236 72 153 / 0.3);
}
.border-pink-500\/40 {
  border-color: rgb(236 72 153 / 0.4);
}
.border-primary {
  border-color: hsl(240 6% 10%);
  border-color: hsl(var(--primary));
}
.border-primary\/50 {
  border-color: hsl(240 6% 10% / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / 1);
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / 1);
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / 1);
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / 1);
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 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-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5);
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / 1);
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-rose-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / 1);
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / 1);
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / 1);
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-rose-500\/40 {
  border-color: rgb(244 63 94 / 0.4);
}
.border-rose-600 {
  --tw-border-opacity: 1;
  border-color: rgb(225 29 72 / 1);
  border-color: rgb(225 29 72 / var(--tw-border-opacity, 1));
}
.border-sky-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / 1);
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
}
.border-sky-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / 1);
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / 1);
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / 1);
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / 1);
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-700\/60 {
  border-color: rgb(51 65 85 / 0.6);
}
.border-slate-700\/80 {
  border-color: rgb(51 65 85 / 0.8);
}
.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / 1);
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / 1);
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-100 {
  --tw-border-opacity: 1;
  border-color: rgb(237 233 254 / 1);
  border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
}
.border-violet-200 {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / 1);
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}
.border-violet-600 {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / 1);
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 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\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / 1);
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-500\/40 {
  border-color: rgb(234 179 8 / 0.4);
}
.border-yellow-500\/50 {
  border-color: rgb(234 179 8 / 0.5);
}
.border-zinc-100 {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-zinc-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-zinc-200\/70 {
  border-color: rgb(228 228 231 / 0.7);
}
.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-zinc-400 {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.border-zinc-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / 1);
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}
.border-zinc-500\/40 {
  border-color: rgb(113 113 122 / 0.4);
}
.border-zinc-600\/40 {
  border-color: rgb(82 82 91 / 0.4);
}
.border-zinc-700 {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / 1);
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.border-zinc-700\/60 {
  border-color: rgb(63 63 70 / 0.6);
}
.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-zinc-800\/60 {
  border-color: rgb(39 39 42 / 0.6);
}
.border-zinc-800\/80 {
  border-color: rgb(39 39 42 / 0.8);
}
.border-zinc-900 {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.border-l-\[\#DC2626\] {
  --tw-border-opacity: 1;
  border-left-color: rgb(220 38 38 / 1);
  border-left-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-l-amber-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / 1);
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-l-orange-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(249 115 22 / 1);
  border-left-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / 1);
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-rose-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(244 63 94 / 1);
  border-left-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / 1);
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-t-zinc-900 {
  --tw-border-opacity: 1;
  border-top-color: rgb(24 24 27 / 1);
  border-top-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.\!bg-\[\#1D1D1B\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(29 29 27 / 1) !important;
  background-color: rgb(29 29 27 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#2a2a28\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(42 42 40 / 1) !important;
  background-color: rgb(42 42 40 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#FEAE00\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 174 0 / 1) !important;
  background-color: rgb(254 174 0 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.bg-\[\#000\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0088cc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 136 204 / 1);
  background-color: rgb(0 136 204 / var(--tw-bg-opacity, 1));
}
.bg-\[\#059669\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-\[\#070705\] {
  --tw-bg-opacity: 1;
  background-color: rgb(7 7 5 / 1);
  background-color: rgb(7 7 5 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0A09\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 9 / 1);
  background-color: rgb(10 10 9 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0A0B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 11 / 1);
  background-color: rgb(10 10 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0B0B0C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / 1);
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0C0C0C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(12 12 12 / 1);
  background-color: rgb(12 12 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0EA5E9\]\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.bg-\[\#0F0F0D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 13 / 1);
  background-color: rgb(15 15 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0F0F0E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 14 / 1);
  background-color: rgb(15 15 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0F0F0E\]\/95 {
  background-color: rgb(15 15 14 / 0.95);
}
.bg-\[\#0F0F0F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / 1);
  background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0F0F11\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 17 / 1);
  background-color: rgb(15 15 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e0e0e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 14 14 / 1);
  background-color: rgb(14 14 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f0e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 14 / 1);
  background-color: rgb(15 15 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#10B981\]\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-\[\#111110\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 16 / 1);
  background-color: rgb(17 17 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#141414\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / 1);
  background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#141416\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 22 / 1);
  background-color: rgb(20 20 22 / var(--tw-bg-opacity, 1));
}
.bg-\[\#161614\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 20 / 1);
  background-color: rgb(22 22 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#166534\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / 1);
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16A34A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#17150D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 21 13 / 1);
  background-color: rgb(23 21 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#17171A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 26 / 1);
  background-color: rgb(23 23 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#18181B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-\[\#18181B\]\/5 {
  background-color: rgb(24 24 27 / 0.05);
}
.bg-\[\#18181B\]\/90 {
  background-color: rgb(24 24 27 / 0.9);
}
.bg-\[\#1877F2\]\/10 {
  background-color: rgb(24 119 242 / 0.1);
}
.bg-\[\#19A36C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(25 163 108 / 1);
  background-color: rgb(25 163 108 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1A1A1A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / 1);
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1D1D1B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(29 29 27 / 1);
  background-color: rgb(29 29 27 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1D4ED8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1F2937\] {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-\[\#222227\] {
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 39 / 1);
  background-color: rgb(34 34 39 / var(--tw-bg-opacity, 1));
}
.bg-\[\#22C55E\]\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-\[\#2563EB\]\/10 {
  background-color: rgb(37 99 235 / 0.1);
}
.bg-\[\#27272A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2AABEE\]\/10 {
  background-color: rgb(42 171 238 / 0.1);
}
.bg-\[\#34343A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 52 58 / 1);
  background-color: rgb(52 52 58 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3A1212\] {
  --tw-bg-opacity: 1;
  background-color: rgb(58 18 18 / 1);
  background-color: rgb(58 18 18 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3A3A3A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 58 / 1);
  background-color: rgb(58 58 58 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3A3A40\] {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 64 / 1);
  background-color: rgb(58 58 64 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3B82F6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3B82F6\]\/15 {
  background-color: rgb(59 130 246 / 0.15);
}
.bg-\[\#4F46E5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / 1);
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#635BFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 91 255 / 1);
  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#635BFF\]\/10 {
  background-color: rgb(99 91 255 / 0.1);
}
.bg-\[\#635BFF\]\/5 {
  background-color: rgb(99 91 255 / 0.05);
}
.bg-\[\#71717A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / 1);
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7360F2\]\/10 {
  background-color: rgb(115 96 242 / 0.1);
}
.bg-\[\#737373\]\/10 {
  background-color: rgb(115 115 115 / 0.1);
}
.bg-\[\#7C3AED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / 1);
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7C3AED\]\/10 {
  background-color: rgb(124 58 237 / 0.1);
}
.bg-\[\#86EFAC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / 1);
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.bg-\[\#9F1239\] {
  --tw-bg-opacity: 1;
  background-color: rgb(159 18 57 / 1);
  background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A1A1AA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / 1);
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A7F3D0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / 1);
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-\[\#BFDBFE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / 1);
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#CA8A04\] {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / 1);
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D1FAE5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D4D4D8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / 1);
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D97706\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DBEAFE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DC2626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DCFCE7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 1);
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DDD6FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 214 254 / 1);
  background-color: rgb(221 214 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0E7FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E4E4E7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ECFDF5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EDEDEA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 237 234 / 1);
  background-color: rgb(237 237 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EEF2FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EF4444\]\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-\[\#EFF6FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0F9FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / 1);
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0FDF4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3E8FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / 1);
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F4B500\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 181 0 / 1);
  background-color: rgb(244 181 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F4F4F5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F59E0B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F59E0B\]\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-\[\#F5F3FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / 1);
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F6F6F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 244 / 1);
  background-color: rgb(246 246 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F7F8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 248 / 1);
  background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F8F8F8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / 1);
  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F8FAFC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F9FAFB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFAFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFAFA\]\/0 {
  background-color: rgb(250 250 250 / 0);
}
.bg-\[\#FCA5A5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / 1);
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCE7F3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / 1);
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FDE2FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 226 250 / 1);
  background-color: rgb(253 226 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEAE00\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 174 0 / 1);
  background-color: rgb(254 174 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEAE00\]\/10 {
  background-color: rgb(254 174 0 / 0.1);
}
.bg-\[\#FEAE00\]\/15 {
  background-color: rgb(254 174 0 / 0.15);
}
.bg-\[\#FEAE00\]\/20 {
  background-color: rgb(254 174 0 / 0.2);
}
.bg-\[\#FEAE00\]\/30 {
  background-color: rgb(254 174 0 / 0.3);
}
.bg-\[\#FEAE00\]\/5 {
  background-color: rgb(254 174 0 / 0.05);
}
.bg-\[\#FEAE00\]\/\[0\.07\] {
  background-color: rgb(254 174 0 / 0.07);
}
.bg-\[\#FECDD3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 205 211 / 1);
  background-color: rgb(254 205 211 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FED7AA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / 1);
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEE2E2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEF2F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEF2F2\]\/40 {
  background-color: rgb(254 242 242 / 0.4);
}
.bg-\[\#FEF3C7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEF3C7\]\/40 {
  background-color: rgb(254 243 199 / 0.4);
}
.bg-\[\#FEF9C3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / 1);
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF1F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / 1);
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF7ED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / 1);
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFFBEA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 234 / 1);
  background-color: rgb(255 251 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFFBEA\]\/50 {
  background-color: rgb(255 251 234 / 0.5);
}
.bg-\[\#FFFBEB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / 1);
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / 1);
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / 1);
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/30 {
  background-color: rgb(255 251 235 / 0.3);
}
.bg-amber-50\/40 {
  background-color: rgb(255 251 235 / 0.4);
}
.bg-amber-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}
.bg-amber-50\/70 {
  background-color: rgb(255 251 235 / 0.7);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / 1);
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: hsl(0 0% 98%);
  background-color: hsl(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / 1);
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/30 {
  background-color: rgb(239 246 255 / 0.3);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/15 {
  background-color: rgb(59 130 246 / 0.15);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-border {
  background-color: hsl(240 6% 90%);
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--card));
}
.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / 1);
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-destructive {
  background-color: hsl(0 84% 60%);
  background-color: hsl(var(--destructive));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / 1);
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / 1);
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / 1);
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/30 {
  background-color: rgb(236 253 245 / 0.3);
}
.bg-emerald-50\/40 {
  background-color: rgb(236 253 245 / 0.4);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/\[0\.06\] {
  background-color: rgb(16 185 129 / 0.06);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: hsl(240 10% 4%);
  background-color: hsl(var(--foreground));
}
.bg-fuchsia-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 244 255 / 1);
  background-color: rgb(253 244 255 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 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 / 1);
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / 1);
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/40 {
  background-color: rgb(249 250 251 / 0.4);
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / 1);
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/20 {
  background-color: rgb(107 114 128 / 0.2);
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/30 {
  background-color: rgb(31 41 55 / 0.3);
}
.bg-gray-800\/50 {
  background-color: rgb(31 41 55 / 0.5);
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 1);
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/30 {
  background-color: rgb(17 24 39 / 0.3);
}
.bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 1);
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / 1);
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / 1);
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 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 / 1);
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / 1);
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50\/40 {
  background-color: rgb(238 242 255 / 0.4);
}
.bg-indigo-50\/50 {
  background-color: rgb(238 242 255 / 0.5);
}
.bg-indigo-50\/60 {
  background-color: rgb(238 242 255 / 0.6);
}
.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / 1);
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / 1);
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-lime-500\/10 {
  background-color: rgb(132 204 22 / 0.1);
}
.bg-muted {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(240 5% 96% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / 1);
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / 1);
  background-color: rgb(253 186 116 / var(--tw-bg-opacity, 1));
}
.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / 1);
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / 1);
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / 1);
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / 1);
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-pink-500\/15 {
  background-color: rgb(236 72 153 / 0.15);
}
.bg-popover {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(240 6% 10%);
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(240 6% 10% / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(240 6% 10% / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / 1);
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(216 180 254 / 1);
  background-color: rgb(216 180 254 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / 1);
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / 1);
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / 1);
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 1);
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / 1);
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/30 {
  background-color: rgb(254 242 242 / 0.3);
}
.bg-red-50\/40 {
  background-color: rgb(254 242 242 / 0.4);
}
.bg-red-50\/50 {
  background-color: rgb(254 242 242 / 0.5);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / 1);
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / 1);
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / 1);
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / 1);
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / 1);
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--secondary));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / 1);
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / 1);
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / 1);
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / 1);
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / 1);
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / 1);
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / 1);
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60 {
  background-color: rgb(15 23 42 / 0.6);
}
.bg-slate-900\/85 {
  background-color: rgb(15 23 42 / 0.85);
}
.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / 1);
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / 1);
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / 1);
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / 1);
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / 1);
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-violet-50\/40 {
  background-color: rgb(245 243 255 / 0.4);
}
.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / 1);
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / 1);
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 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\/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\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.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\.015\] {
  background-color: rgb(255 255 255 / 0.015);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / 1);
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / 1);
  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / 1);
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / 1);
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / 1);
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/10 {
  background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-500\/15 {
  background-color: rgb(234 179 8 / 0.15);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / 1);
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-100\/50 {
  background-color: rgb(244 244 245 / 0.5);
}
.bg-zinc-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-zinc-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / 1);
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.bg-zinc-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / 1);
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50\/40 {
  background-color: rgb(250 250 250 / 0.4);
}
.bg-zinc-50\/60 {
  background-color: rgb(250 250 250 / 0.6);
}
.bg-zinc-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / 1);
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.bg-zinc-500\/15 {
  background-color: rgb(113 113 122 / 0.15);
}
.bg-zinc-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / 1);
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.bg-zinc-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800\/40 {
  background-color: rgb(39 39 42 / 0.4);
}
.bg-zinc-800\/80 {
  background-color: rgb(39 39 42 / 0.8);
}
.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900\/10 {
  background-color: rgb(24 24 27 / 0.1);
}
.bg-zinc-900\/40 {
  background-color: rgb(24 24 27 / 0.4);
}
.bg-zinc-900\/50 {
  background-color: rgb(24 24 27 / 0.5);
}
.bg-zinc-900\/60 {
  background-color: rgb(24 24 27 / 0.6);
}
.bg-zinc-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / 1);
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.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));
}
.from-\[\#0088cc\] {
  --tw-gradient-from: #0088cc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 136 204 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#17171A\] {
  --tw-gradient-from: #17171A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 26 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#18181B\] {
  --tw-gradient-from: #18181B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#3A3A3A\] {
  --tw-gradient-from: #3A3A3A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(58 58 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#4F46E5\] {
  --tw-gradient-from: #4F46E5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#635BFF\] {
  --tw-gradient-from: #635BFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 91 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#635BFF\]\/5 {
  --tw-gradient-from: rgb(99 91 255 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 91 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ECFDF5\] {
  --tw-gradient-from: #ECFDF5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F0FDF4\] {
  --tw-gradient-from: #F0FDF4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F5F3FF\] {
  --tw-gradient-from: #F5F3FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F7F7F5\] {
  --tw-gradient-from: #F7F7F5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 247 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FEAE00\] {
  --tw-gradient-from: #FEAE00 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 174 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FEF3C7\] {
  --tw-gradient-from: #FEF3C7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFFBEB\] {
  --tw-gradient-from: #FFFBEB var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400 {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-50 {
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/10 {
  --tw-gradient-from: rgb(245 158 11 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 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\/60 {
  --tw-gradient-from: rgb(0 0 0 / 0.6) 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\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) 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-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-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 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-emerald-400 {
  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50 {
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-800\/50 {
  --tw-gradient-from: rgb(31 41 55 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 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-orange-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-600 {
  --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-950\/40 {
  --tw-gradient-from: rgb(80 7 36 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(80 7 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50 {
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/20 {
  --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-50 {
  --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-50 {
  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-50 {
  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-600 {
  --tw-gradient-from: #52525b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(82 82 91 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-900 {
  --tw-gradient-from: #18181b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#7C6FFF\] {
  --tw-gradient-to: rgb(124 111 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #7C6FFF var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#FEAE00\]\/50 {
  --tw-gradient-to: rgb(254 174 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(254 174 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-500 {
  --tw-gradient-to: rgb(245 158 11 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/0 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/85 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500 {
  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-pink-500\/10 {
  --tw-gradient-to: rgb(236 72 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(236 72 153 / 0.1) 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-zinc-800 {
  --tw-gradient-to: rgb(39 39 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #27272a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-zinc-900\/80 {
  --tw-gradient-to: rgb(24 24 27 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(24 24 27 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-zinc-950 {
  --tw-gradient-to: rgb(9 9 11 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #09090b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#0F0F11\] {
  --tw-gradient-to: #0F0F11 var(--tw-gradient-to-position);
}
.to-\[\#10B981\] {
  --tw-gradient-to: #10B981 var(--tw-gradient-to-position);
}
.to-\[\#1D1D1B\] {
  --tw-gradient-to: #1D1D1B var(--tw-gradient-to-position);
}
.to-\[\#229ED9\] {
  --tw-gradient-to: #229ED9 var(--tw-gradient-to-position);
}
.to-\[\#27272A\] {
  --tw-gradient-to: #27272A var(--tw-gradient-to-position);
}
.to-\[\#3F3F46\] {
  --tw-gradient-to: #3F3F46 var(--tw-gradient-to-position);
}
.to-\[\#52525B\] {
  --tw-gradient-to: #52525B var(--tw-gradient-to-position);
}
.to-\[\#7C3AED\] {
  --tw-gradient-to: #7C3AED var(--tw-gradient-to-position);
}
.to-\[\#7C6FFF\] {
  --tw-gradient-to: #7C6FFF var(--tw-gradient-to-position);
}
.to-\[\#9D8EFF\] {
  --tw-gradient-to: #9D8EFF var(--tw-gradient-to-position);
}
.to-\[\#9D8EFF\]\/5 {
  --tw-gradient-to: rgb(157 142 255 / 0.05) var(--tw-gradient-to-position);
}
.to-\[\#E69900\] {
  --tw-gradient-to: #E69900 var(--tw-gradient-to-position);
}
.to-\[\#ECECEA\] {
  --tw-gradient-to: #ECECEA var(--tw-gradient-to-position);
}
.to-\[\#ECFDF5\] {
  --tw-gradient-to: #ECFDF5 var(--tw-gradient-to-position);
}
.to-\[\#EEF2FF\] {
  --tw-gradient-to: #EEF2FF var(--tw-gradient-to-position);
}
.to-\[\#F59E0B\] {
  --tw-gradient-to: #F59E0B var(--tw-gradient-to-position);
}
.to-\[\#FDE68A\] {
  --tw-gradient-to: #FDE68A var(--tw-gradient-to-position);
}
.to-\[\#FEE2E2\] {
  --tw-gradient-to: #FEE2E2 var(--tw-gradient-to-position);
}
.to-\[\#FEF3C7\] {
  --tw-gradient-to: #FEF3C7 var(--tw-gradient-to-position);
}
.to-amber-50 {
  --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}
.to-amber-500\/10 {
  --tw-gradient-to: rgb(245 158 11 / 0.1) var(--tw-gradient-to-position);
}
.to-amber-600 {
  --tw-gradient-to: #d97706 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-400 {
  --tw-gradient-to: #60a5fa 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-900\/20 {
  --tw-gradient-to: rgb(30 58 138 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-400 {
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-gray-900\/50 {
  --tw-gradient-to: rgb(17 24 39 / 0.5) var(--tw-gradient-to-position);
}
.to-green-50 {
  --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);
}
.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}
.to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}
.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}
.to-rose-50 {
  --tw-gradient-to: #fff1f2 var(--tw-gradient-to-position);
}
.to-teal-50 {
  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
}
.to-teal-600 {
  --tw-gradient-to: #0d9488 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);
}
.to-zinc-800 {
  --tw-gradient-to: #27272a var(--tw-gradient-to-position);
}
.to-zinc-900 {
  --tw-gradient-to: #18181b var(--tw-gradient-to-position);
}
.to-zinc-900\/80 {
  --tw-gradient-to: rgb(24 24 27 / 0.8) var(--tw-gradient-to-position);
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(240 6% 10%);
  fill: hsl(var(--primary));
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.\!p-3 {
  padding: 0.75rem !important;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.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-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[100px\] {
  padding-top: 100px;
  padding-bottom: 100px;
}
.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-\[1px\] {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[60px\] {
  padding-bottom: 60px;
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[14px\] {
  padding-left: 14px;
}
.pl-\[28px\] {
  padding-left: 28px;
}
.pl-\[52px\] {
  padding-left: 52px;
}
.pl-\[70px\] {
  padding-left: 70px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-14 {
  padding-right: 3.5rem;
}
.pr-16 {
  padding-right: 4rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-20 {
  padding-right: 5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pr-\[60px\] {
  padding-right: 60px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.pt-\[110px\] {
  padding-top: 110px;
}
.pt-\[220px\] {
  padding-top: 220px;
}
.text-left {
  text-align: left;
}
.\!text-center {
  text-align: center !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-\[Mazzard\] {
  font-family: Mazzard;
}
.font-mazzard {
  font-family: Mazzard, "Mazzard H", "Mazzard M", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Mazzard, "Mazzard H", "Mazzard M", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !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-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[36px\] {
  font-size: 36px;
}
.text-\[48px\] {
  font-size: 48px;
}
.text-\[56px\] {
  font-size: 56px;
}
.text-\[8\.5px\] {
  font-size: 8.5px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\!font-semibold {
  font-weight: 600 !important;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.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;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-\[0\.85\] {
  line-height: 0.85;
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.12\] {
  line-height: 1.12;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.55\] {
  line-height: 1.55;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[50px\] {
  line-height: 50px;
}
.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\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.10em\] {
  letter-spacing: 0.10em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.25em\] {
  letter-spacing: 0.25em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-\[0\.5em\] {
  letter-spacing: 0.5em;
}
.tracking-\[2px\] {
  letter-spacing: 2px;
}
.tracking-normal {
  letter-spacing: 0em;
}
.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-\[\#B0B0B0\] {
  --tw-text-opacity: 1 !important;
  color: rgb(176 176 176 / 1) !important;
  color: rgb(176 176 176 / var(--tw-text-opacity, 1)) !important;
}
.\!text-black {
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / 1) !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / 1) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#0088cc\] {
  --tw-text-opacity: 1;
  color: rgb(0 136 204 / 1);
  color: rgb(0 136 204 / var(--tw-text-opacity, 1));
}
.text-\[\#0369A1\] {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / 1);
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-\[\#047857\] {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-\[\#059669\] {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 1);
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-\[\#065F46\] {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / 1);
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-\[\#065F46\]\/70 {
  color: rgb(6 95 70 / 0.7);
}
.text-\[\#075985\] {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / 1);
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-\[\#075985\]\/70 {
  color: rgb(7 89 133 / 0.7);
}
.text-\[\#0891B2\] {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / 1);
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-\[\#0C4A6E\] {
  --tw-text-opacity: 1;
  color: rgb(12 74 110 / 1);
  color: rgb(12 74 110 / var(--tw-text-opacity, 1));
}
.text-\[\#0EA5E9\] {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / 1);
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-\[\#10B981\] {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-\[\#111110\] {
  --tw-text-opacity: 1;
  color: rgb(17 17 16 / 1);
  color: rgb(17 17 16 / var(--tw-text-opacity, 1));
}
.text-\[\#15803D\] {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / 1);
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-\[\#166534\] {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / 1);
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-\[\#16A34A\] {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / 1);
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-\[\#18181B\] {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.text-\[\#1877F2\] {
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / 1);
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}
.text-\[\#1A1A1A\] {
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / 1);
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}
.text-\[\#1D4ED8\] {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-\[\#1E40AF\] {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-\[\#1F1F1F\] {
  --tw-text-opacity: 1;
  color: rgb(31 31 31 / 1);
  color: rgb(31 31 31 / var(--tw-text-opacity, 1));
}
.text-\[\#1a1a18\] {
  --tw-text-opacity: 1;
  color: rgb(26 26 24 / 1);
  color: rgb(26 26 24 / var(--tw-text-opacity, 1));
}
.text-\[\#22C55E\] {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / 1);
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-\[\#2563EB\] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-\[\#27272A\] {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / 1);
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-\[\#2AABEE\] {
  --tw-text-opacity: 1;
  color: rgb(42 171 238 / 1);
  color: rgb(42 171 238 / var(--tw-text-opacity, 1));
}
.text-\[\#3730A3\] {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / 1);
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-\[\#3B82F6\] {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 1);
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-\[\#3F3F46\] {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-\[\#3a3a38\] {
  --tw-text-opacity: 1;
  color: rgb(58 58 56 / 1);
  color: rgb(58 58 56 / var(--tw-text-opacity, 1));
}
.text-\[\#4F46E5\] {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-\[\#52525B\] {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-\[\#555452\] {
  --tw-text-opacity: 1;
  color: rgb(85 84 82 / 1);
  color: rgb(85 84 82 / var(--tw-text-opacity, 1));
}
.text-\[\#555\] {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / 1);
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-\[\#5B21B6\] {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / 1);
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-\[\#5E5E5E\] {
  --tw-text-opacity: 1;
  color: rgb(94 94 94 / 1);
  color: rgb(94 94 94 / var(--tw-text-opacity, 1));
}
.text-\[\#635BFF\] {
  --tw-text-opacity: 1;
  color: rgb(99 91 255 / 1);
  color: rgb(99 91 255 / var(--tw-text-opacity, 1));
}
.text-\[\#6A6A6A\] {
  --tw-text-opacity: 1;
  color: rgb(106 106 106 / 1);
  color: rgb(106 106 106 / var(--tw-text-opacity, 1));
}
.text-\[\#6b6b68\] {
  --tw-text-opacity: 1;
  color: rgb(107 107 104 / 1);
  color: rgb(107 107 104 / var(--tw-text-opacity, 1));
}
.text-\[\#71717A\] {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-\[\#7360F2\] {
  --tw-text-opacity: 1;
  color: rgb(115 96 242 / 1);
  color: rgb(115 96 242 / var(--tw-text-opacity, 1));
}
.text-\[\#78350F\] {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / 1);
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-\[\#7A7A7A\] {
  --tw-text-opacity: 1;
  color: rgb(122 122 122 / 1);
  color: rgb(122 122 122 / var(--tw-text-opacity, 1));
}
.text-\[\#7C3AED\] {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / 1);
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-\[\#7C3AED\]\/80 {
  color: rgb(124 58 237 / 0.8);
}
.text-\[\#7F1D1D\] {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / 1);
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-\[\#7F1D1D\]\/60 {
  color: rgb(127 29 29 / 0.6);
}
.text-\[\#7F1D1D\]\/80 {
  color: rgb(127 29 29 / 0.8);
}
.text-\[\#854D0E\] {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / 1);
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-\[\#8A8A8A\] {
  --tw-text-opacity: 1;
  color: rgb(138 138 138 / 1);
  color: rgb(138 138 138 / var(--tw-text-opacity, 1));
}
.text-\[\#8C8A86\] {
  --tw-text-opacity: 1;
  color: rgb(140 138 134 / 1);
  color: rgb(140 138 134 / var(--tw-text-opacity, 1));
}
.text-\[\#8a8a86\] {
  --tw-text-opacity: 1;
  color: rgb(138 138 134 / 1);
  color: rgb(138 138 134 / var(--tw-text-opacity, 1));
}
.text-\[\#92400E\] {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / 1);
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-\[\#92400E\]\/70 {
  color: rgb(146 64 14 / 0.7);
}
.text-\[\#92400E\]\/80 {
  color: rgb(146 64 14 / 0.8);
}
.text-\[\#991B1B\] {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-\[\#9A9A9A\] {
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / 1);
  color: rgb(154 154 154 / var(--tw-text-opacity, 1));
}
.text-\[\#9D174D\] {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / 1);
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.text-\[\#9F1239\] {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / 1);
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-\[\#9FE8C6\] {
  --tw-text-opacity: 1;
  color: rgb(159 232 198 / 1);
  color: rgb(159 232 198 / var(--tw-text-opacity, 1));
}
.text-\[\#9a9a96\] {
  --tw-text-opacity: 1;
  color: rgb(154 154 150 / 1);
  color: rgb(154 154 150 / var(--tw-text-opacity, 1));
}
.text-\[\#9a9a98\] {
  --tw-text-opacity: 1;
  color: rgb(154 154 152 / 1);
  color: rgb(154 154 152 / var(--tw-text-opacity, 1));
}
.text-\[\#A0A0A0\] {
  --tw-text-opacity: 1;
  color: rgb(160 160 160 / 1);
  color: rgb(160 160 160 / var(--tw-text-opacity, 1));
}
.text-\[\#A16207\] {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / 1);
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-\[\#A1A1AA\] {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-\[\#A3A3A3\] {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / 1);
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-\[\#A5B4FC\] {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / 1);
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-\[\#B45309\] {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-\[\#B5B5B3\] {
  --tw-text-opacity: 1;
  color: rgb(181 181 179 / 1);
  color: rgb(181 181 179 / var(--tw-text-opacity, 1));
}
.text-\[\#B5B5B5\] {
  --tw-text-opacity: 1;
  color: rgb(181 181 181 / 1);
  color: rgb(181 181 181 / var(--tw-text-opacity, 1));
}
.text-\[\#B91C1C\] {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-\[\#C2410C\] {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / 1);
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-\[\#C8C8C8\] {
  --tw-text-opacity: 1;
  color: rgb(200 200 200 / 1);
  color: rgb(200 200 200 / var(--tw-text-opacity, 1));
}
.text-\[\#D0D0D0\] {
  --tw-text-opacity: 1;
  color: rgb(208 208 208 / 1);
  color: rgb(208 208 208 / var(--tw-text-opacity, 1));
}
.text-\[\#D4D4D8\] {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-\[\#D97706\] {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-\[\#DB2777\] {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / 1);
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-\[\#DC2626\] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-\[\#E4E3DF\] {
  --tw-text-opacity: 1;
  color: rgb(228 227 223 / 1);
  color: rgb(228 227 223 / var(--tw-text-opacity, 1));
}
.text-\[\#EF4444\] {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / 1);
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-\[\#EFEFEF\] {
  --tw-text-opacity: 1;
  color: rgb(239 239 239 / 1);
  color: rgb(239 239 239 / var(--tw-text-opacity, 1));
}
.text-\[\#F59E0B\] {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / 1);
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-\[\#FEAE00\] {
  --tw-text-opacity: 1;
  color: rgb(254 174 0 / 1);
  color: rgb(254 174 0 / var(--tw-text-opacity, 1));
}
.text-\[\#FEAE00\]\/80 {
  color: rgb(254 174 0 / 0.8);
}
.text-\[\#FF6B6B\] {
  --tw-text-opacity: 1;
  color: rgb(255 107 107 / 1);
  color: rgb(255 107 107 / var(--tw-text-opacity, 1));
}
.text-\[\#FF8B8B\] {
  --tw-text-opacity: 1;
  color: rgb(255 139 139 / 1);
  color: rgb(255 139 139 / var(--tw-text-opacity, 1));
}
.text-\[\#FFCACA\] {
  --tw-text-opacity: 1;
  color: rgb(255 202 202 / 1);
  color: rgb(255 202 202 / var(--tw-text-opacity, 1));
}
.text-\[\#a8a8a4\] {
  --tw-text-opacity: 1;
  color: rgb(168 168 164 / 1);
  color: rgb(168 168 164 / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / 1);
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-100\/80 {
  color: rgb(254 243 199 / 0.8);
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 1);
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-200\/80 {
  color: rgb(253 230 138 / 0.8);
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / 1);
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / 1);
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / 1);
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/70 {
  color: rgb(0 0 0 / 0.7);
}
.text-black\/80 {
  color: rgb(0 0 0 / 0.8);
}
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / 1);
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 1);
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 1);
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / 1);
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: hsl(240 10% 4%);
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / 1);
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-destructive {
  color: hsl(0 84% 60%);
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--destructive-foreground));
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / 1);
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / 1);
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 1);
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-700\/80 {
  color: rgb(4 120 87 / 0.8);
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / 1);
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / 1);
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(240 10% 4% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-fuchsia-700 {
  --tw-text-opacity: 1;
  color: rgb(162 28 175 / 1);
  color: rgb(162 28 175 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 1);
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / 1);
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / 1);
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / 1);
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / 1);
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / 1);
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / 1);
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / 1);
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / 1);
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / 1);
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.text-input {
  color: hsl(240 6% 90%);
  color: hsl(var(--input));
}
.text-lime-400 {
  --tw-text-opacity: 1;
  color: rgb(163 230 53 / 1);
  color: rgb(163 230 53 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / 1);
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / 1);
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / 1);
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / 1);
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / 1);
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: hsl(240 10% 4%);
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(240 6% 10%);
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / 1);
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / 1);
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / 1);
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / 1);
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / 1);
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-600\/80 {
  color: rgb(220 38 38 / 0.8);
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-700\/80 {
  color: rgb(185 28 28 / 0.8);
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / 1);
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / 1);
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / 1);
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / 1);
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / 1);
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / 1);
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / 1);
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: hsl(240 6% 10%);
  color: hsl(var(--secondary-foreground));
}
.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / 1);
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / 1);
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / 1);
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / 1);
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / 1);
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / 1);
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / 1);
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / 1);
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / 1);
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / 1);
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / 1);
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.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\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / 1);
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 1);
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / 1);
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / 1);
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / 1);
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / 1);
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / 1);
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / 1);
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.decoration-\[\#A1A1AA\] {
  -webkit-text-decoration-color: #A1A1AA;
          text-decoration-color: #A1A1AA;
}
.decoration-\[\#FEAE00\]\/40 {
  -webkit-text-decoration-color: rgb(254 174 0 / 0.4);
          text-decoration-color: rgb(254 174 0 / 0.4);
}
.decoration-dotted {
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
}
.decoration-1 {
  text-decoration-thickness: 1px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-\[3px\] {
  text-underline-offset: 3px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-\[\#6A6A6A\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(106 106 106 / 1);
  color: rgb(106 106 106 / var(--tw-placeholder-opacity, 1));
}
.placeholder-\[\#A1A1AA\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white\/30::placeholder {
  color: rgb(255 255 255 / 0.3);
}
.placeholder-zinc-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-placeholder-opacity, 1));
}
.accent-\[\#18181B\] {
  accent-color: #18181B;
}
.accent-\[\#4F46E5\] {
  accent-color: #4F46E5;
}
.accent-\[\#FEAE00\] {
  accent-color: #FEAE00;
}
.accent-amber-500 {
  accent-color: #f59e0b;
}
.accent-indigo-600 {
  accent-color: #4f46e5;
}
.accent-zinc-900 {
  accent-color: #18181b;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.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-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.05\] {
  opacity: 0.05;
}
.\!shadow-\[0_12px_40px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1\.5px_\#18181B\] {
  --tw-shadow: 0 0 0 1.5px #18181B;
  --tw-shadow-colored: 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(16\2c 185\2c 129\2c 0\.18\)\] {
  --tw-shadow: 0 0 0 3px rgba(16,185,129,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_4px_rgba\(254\2c 174\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 0 0 4px rgba(254,174,0,0.12);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(254\2c 174\2c 0\2c 0\.8\)\] {
  --tw-shadow: 0 0 8px rgba(254,174,0,0.8);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_28px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 12px 28px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 12px 28px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_40px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 12px 40px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_40px_rgba\(0\2c 0\2c 0\2c 0\.14\)\] {
  --tw-shadow: 0 16px 40px rgba(0,0,0,0.14);
  --tw-shadow-colored: 0 16px 40px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_60px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 18px 60px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.55\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\] {
  --tw-shadow: 0 20px 60px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.04);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_48px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 24px 48px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 24px 48px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_48px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 24px 48px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 24px 48px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_56px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-shadow: 0 24px 56px rgba(0,0,0,0.65);
  --tw-shadow-colored: 0 24px 56px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.22\)\] {
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.65);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_14px_-2px_rgba\(0\2c 0\2c 0\2c 0\.6\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.5\)\] {
  --tw-shadow: 0 4px 14px -2px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.5);
  --tw-shadow-colored: 0 4px 14px -2px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_14px_rgba\(16\2c 185\2c 129\2c 0\.35\)\] {
  --tw-shadow: 0 4px 14px rgba(16,185,129,0.35);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_18px_rgba\(254\2c 174\2c 0\2c 0\.28\)\] {
  --tw-shadow: 0 6px 18px rgba(254,174,0,0.28);
  --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_18px_rgba\(254\2c 174\2c 0\2c 0\.30\)\] {
  --tw-shadow: 0 6px 18px rgba(254,174,0,0.30);
  --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_22px_rgba\(254\2c 174\2c 0\2c 0\.28\)\] {
  --tw-shadow: 0 8px 22px rgba(254,174,0,0.28);
  --tw-shadow-colored: 0 8px 22px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_22px_rgba\(254\2c 174\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 8px 22px rgba(254,174,0,0.35);
  --tw-shadow-colored: 0 8px 22px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/30 {
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-900\/20 {
  --tw-shadow-color: rgb(30 58 138 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-slate-300\/40 {
  --tw-shadow-color: rgb(203 213 225 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  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), 0 0 #0000;
  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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-\[\#18181B\]\/10 {
  --tw-ring-color: rgb(24 24 27 / 0.1);
}
.ring-\[\#1877F2\]\/30 {
  --tw-ring-color: rgb(24 119 242 / 0.3);
}
.ring-\[\#2AABEE\]\/30 {
  --tw-ring-color: rgb(42 171 238 / 0.3);
}
.ring-\[\#4F46E5\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.ring-\[\#4F46E5\]\/30 {
  --tw-ring-color: rgb(79 70 229 / 0.3);
}
.ring-\[\#7360F2\]\/30 {
  --tw-ring-color: rgb(115 96 242 / 0.3);
}
.ring-\[\#DC2626\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.ring-\[\#E4E4E7\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity, 1));
}
.ring-\[\#F59E0B\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.ring-\[\#FEAE00\]\/30 {
  --tw-ring-color: rgb(254 174 0 / 0.3);
}
.ring-amber-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 243 199 / var(--tw-ring-opacity, 1));
}
.ring-amber-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
}
.ring-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-blue-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}
.ring-blue-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-emerald-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}
.ring-emerald-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity, 1));
}
.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-indigo-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(224 231 255 / var(--tw-ring-opacity, 1));
}
.ring-indigo-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.ring-orange-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity, 1));
}
.ring-orange-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity, 1));
}
.ring-red-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1));
}
.ring-red-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-rose-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity, 1));
}
.ring-rose-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1));
}
.ring-rose-400\/40 {
  --tw-ring-color: rgb(251 113 133 / 0.4);
}
.ring-sky-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity, 1));
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.ring-zinc-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity, 1));
}
.ring-zinc-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity, 1));
}
.ring-zinc-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity, 1));
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
}
.blur-sm {
  --tw-blur: blur(4px);
  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);
}
.brightness-0 {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --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-\[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-md {
  --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-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, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[box-shadow\2c border-color\] {
  transition-property: box-shadow,border-color;
  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, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  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;
}
.duration-1000 {
  transition-duration: 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);
}
@keyframes enter {
  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(180px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
}
.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(200px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(220px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}
.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(260px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

/* ────────────────────────────────────────────────────────────────
 * Tailwind arbitrary font-family overrides — placed AFTER
 * @tailwind utilities so the cascade resolves them last and the
 * design's `font-[Mazzard]` / `font-['Mazzard_M']` classes always
 * bind to the real local family (which now spans 300/400/500/700).
 * ──────────────────────────────────────────────────────────────── */
.font-\[Mazzard\],
.font-\[\'Mazzard\'\],
.font-\[\"Mazzard\"\],
.font-\[Mazzard_M\],
.font-\[\'Mazzard_M\'\],
.font-\[\"Mazzard_M\"\],
.font-\[MazzardM\],
.font-\[Mazzard_H\],
.font-\[\'Mazzard_H\'\],
.font-\[MazzardH\] {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* LIGHT theme (admin/cabinet) */
:root {
  --background: 0 0% 98%;
  --foreground: 240 10% 4%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 4%;
  --primary: 240 6% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 240 6% 10%;
  --radius: 0.75rem;
}

/* PUBLIC THEME — BIBI Cars dark+amber */
.public-theme {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 60 4% 11%;         /* #1D1D1B */
  --card-foreground: 0 0% 100%;
  --popover: 60 4% 11%;
  --popover-foreground: 0 0% 100%;
  --primary: 41 100% 50%;    /* #FEAE00 */
  --primary-foreground: 0 0% 0%;
  --secondary: 60 4% 11%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 37%;          /* #5E5E5E */
  --muted-foreground: 0 0% 58%;
  --accent: 41 100% 50%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 60 1% 33%;        /* #555452 */
  --input: 60 1% 33%;
  --ring: 41 100% 50%;
  --radius: 0.5rem;
  background-color: #000;
  color: #FFFFFF;
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, sans-serif;
}

.public-theme ::selection { background: #FEAE00; color: #000; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  background-color: #F7F7F8;
  color: #18181B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, button, input, select, textarea {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.public-theme, .public-theme h1, .public-theme h2, .public-theme h3,
.public-theme h4, .public-theme h5, .public-theme h6,
.public-theme button, .public-theme input, .public-theme select, .public-theme textarea {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F4F4F5; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }
.public-theme ::-webkit-scrollbar-track { background: #0E0E0E; }
.public-theme ::-webkit-scrollbar-thumb { background: #2E2E2E; }
.public-theme ::-webkit-scrollbar-thumb:hover { background: #404040; }

/* BIBI logo with yellow gradient */
.bibi-wordmark {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #FEAE00 0%, #FFEA43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  line-height: 1;
  position: relative;
  display: inline-block;
}
.bibi-cars-tag {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.28em;
  letter-spacing: 0.12em;
  color: #FEAE00;
  position: absolute;
  top: -0.15em;
  right: -1.2em;
}
.bibi-streaks { display: inline-block; margin-right: 0.15em; vertical-align: middle; }
.bibi-streaks span {
  display: block;
  height: 0.08em;
  background: linear-gradient(90deg, #FEAE00, #FFEA43);
  border-radius: 1px;
  margin: 0.04em 0;
}
.bibi-streaks span:nth-child(1){ width: 0.35em; }
.bibi-streaks span:nth-child(2){ width: 0.55em; }
.bibi-streaks span:nth-child(3){ width: 0.25em; }

/* Primary CTA button — yellow */
.btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FEAE00;
  color: #000;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: background-color 160ms ease;
  white-space: nowrap;
}
.btn-amber:hover { background: #FFBF2D; }
.btn-amber:active { background: #E89D00; }
.btn-amber:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-amber-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: #FEAE00;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 8px 16px;
  border: 1px solid #FEAE00;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn-amber-outline:hover { background: #FEAE00; color: #000; }

/* Text input on dark */
.input-dark {
  width: 100%;
  background: transparent;
  border: 1px solid #555452;
  border-radius: 4px;
  height: 45px;
  padding: 0 16px;
  color: #FFFFFF;
  font-size: 14px;
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', sans-serif;
  transition: border-color 160ms ease;
}
.input-dark::placeholder { color: #949494; }
.input-dark:focus { outline: none; border-color: #FEAE00; }

/* Hover link amber */
.link-amber { color: #FFFFFF; transition: color 160ms ease; }
.link-amber:hover { color: #FEAE00; }
.link-amber.active { color: #FEAE00; }

/* Image fade-in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 240ms ease-out; }

/* ============ LEGACY ADMIN STYLES (untouched) ============ */
.card { background: white; border-radius: 16px; border: 1px solid #E4E4E7; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card:hover { border-color: #D4D4D8; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.table-premium { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-premium th { text-align: left; padding: 14px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #71717A; background: #FAFAFA; border-bottom: 1px solid #E4E4E7; }
.table-premium td { padding: 16px 20px; border-bottom: 1px solid #F4F4F5; font-size: 14px; color: #3F3F46; }
.table-premium tr:last-child td { border-bottom: none; }
.table-premium tr:hover td { background: #FAFAFA; }
.badge { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 9999px; }
.status-new { background: #EEF2FF; color: #4F46E5; }
.status-contacted { background: #FEF3C7; color: #D97706; }
.status-qualified { background: #D1FAE5; color: #059669; }
.status-proposal { background: #EDE9FE; color: #7C3AED; }
.status-negotiation { background: #FCE7F3; color: #DB2777; }
.status-won { background: #D1FAE5; color: #059669; }
.status-lost { background: #FEE2E2; color: #DC2626; }
.status-archived { background: #F4F4F5; color: #71717A; }
.kpi-card { position: relative; overflow: hidden; background: white; border-radius: 16px; border: 1px solid #E4E4E7; padding: 20px 24px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.kpi-card:hover { border-color: #D4D4D8; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.kpi-value { font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #18181B; }
.kpi-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #71717A; margin-top: 8px; }

/* Compact KPI variant — used inside dense dashboards (analytics, etc.).
   Responsive font-size via clamp so big numbers like "15 000" never overflow
   on mobile, while still looking strong on desktop. */
.kpi-card--compact { padding: 14px 14px; }
@media (min-width: 640px) { .kpi-card--compact { padding: 16px 18px; } }
@media (min-width: 1024px) { .kpi-card--compact { padding: 18px 22px; } }
.kpi-value--fit {
  font-size: clamp(1.25rem, 5.5vw, 2rem);
  line-height: 1.05;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .kpi-value--fit { font-size: clamp(1.5rem, 1.8vw, 2.25rem); }
}
.sidebar { width: 260px; background: white; border-right: 1px solid #E4E4E7; min-height: 100vh; display: flex; flex-direction: column; }
.sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #71717A; cursor: pointer; border-radius: 12px; margin: 2px 8px; transition: background-color 0.15s ease, color 0.15s ease; min-width: 0; }
.sidebar-item > span:not(:first-child) { min-width: 0; flex: 1 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item:hover { background: #F4F4F5; color: #18181B; }
.sidebar-item.active { background: #18181B; color: white; }
.sidebar-group-header { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 16px); padding: 12px 16px; font-size: 14px; font-weight: 500; color: #71717A; cursor: pointer; border-radius: 12px; margin: 2px 8px; transition: background-color 0.15s ease, color 0.15s ease; border: none; background: transparent; }
.sidebar-group-header:hover { background: #F4F4F5; color: #3F3F46; }
.sidebar-group-header.active { color: #18181B; background: #F4F4F5; }
.sidebar-group-items { margin-left: 8px; padding-left: 12px; border-left: 2px solid #E4E4E7; margin-bottom: 8px; }
.sidebar-subitem { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: #71717A; cursor: pointer; border-radius: 10px; margin: 2px 8px 2px 0; transition: background-color 0.15s ease, color 0.15s ease; }
.sidebar-subitem:hover { background: #F4F4F5; color: #18181B; }
.sidebar-subitem.active { background: #18181B; color: white; }
.btn-primary { background: #18181B; color: white; padding: 10px 20px; font-size: 14px; font-weight: 500; border: none; border-radius: 12px; cursor: pointer; transition: background-color 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: #27272A; }
.btn-secondary { background: white; color: #18181B; padding: 10px 20px; font-size: 14px; font-weight: 500; border: 1px solid #E4E4E7; border-radius: 12px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-secondary:hover { background: #F4F4F5; border-color: #D4D4D8; }
.input { background: white; border: 1px solid #E4E4E7; border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #18181B; transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; }
.input::placeholder { color: #A1A1AA; }
.input:focus { outline: none; border-color: #18181B; box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
.period-tabs { display: inline-flex; background: #FAFAFA; border: 1px solid #E4E4E7; border-radius: 12px; padding: 4px; gap: 4px; max-width: 100%; }
.period-tab { padding: 6px 14px; font-size: 13px; font-weight: 500; color: #52525B; border-radius: 8px; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; border: none; background: transparent; line-height: 1.25; }
.period-tab:hover { color: #18181B; }
.period-tab:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,0,0,0.08); }
.period-tab.active { background: #FFFFFF; color: #18181B; font-weight: 600; box-shadow: 0 0 0 1.5px #18181B; }
.period-tab.active:hover { background: #FFFFFF; }
.section-card { background: white; border-radius: 16px; border: 1px solid #E4E4E7; padding: 24px; }
.section-title { font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif; font-size: 16px; font-weight: 600; color: #18181B; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-title-clean { font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif; font-size: 16px; font-weight: 600; color: #18181B; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.section-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F4F4F5; }
.metric-row:last-child { border-bottom: none; }
.metric-label { font-size: 14px; color: #71717A; }
.metric-value { font-size: 14px; font-weight: 600; color: #18181B; }
.metric-value.alert { color: #DC2626; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* WhiteSelect popover open animation (transform-origin set inline per direction) */
@keyframes ws-popover-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
select.input, .custom-select { background: white; border: 1px solid #E4E4E7; border-radius: 12px; padding: 12px 16px; padding-right: 40px; font-size: 14px; color: #18181B; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2371717A%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
select.input:hover, .custom-select:hover { border-color: #D4D4D8; }
select.input:focus, .custom-select:focus { outline: none; border-color: #18181B; box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
select.input option, .custom-select option { background: white; color: #18181B; padding: 12px 16px; font-size: 14px; }

/* ============================================================
   GLOBAL <select> NORMALIZATION (admin / cabinet light theme)
   ------------------------------------------------------------
   On macOS / iOS the native <select> renders with a translucent
   gray (system) background that breaks our white card design
   across Executive Center, Auction Center, Notification Center,
   CRM 360, Forecasting 360, Contracts 360, Finances 360, Local
   Workflow, Reminders, Delivery 360 and any other admin module.

   This base rule forces every native <select> to:
     • appearance: none      (kill OS chrome)
     • white background
     • thin neutral border + 10px radius (matches our inputs)
     • compact 12px caret indicator on the right
     • dark text + cursor:pointer

   Scope:  body  (admin + customer cabinet light surfaces)
   Excluded:
     • .public-theme        (BIBI Cars dark landing — own styles)
     • .cabinet-scope[data-theme="dark"]  (overridden later)
   Components that already apply their own appearance:none
   (Select.jsx, WhiteSelect.jsx, select.input, .custom-select)
   continue to win via tailwind utility specificity / explicit
   classes — those rules also set bg-white, so nothing changes
   visually for them. This base rule only kicks in for the
   "naive" native <select> that previously rendered gray.
   ============================================================ */
body select,
body select:not([multiple]) {
  background-color: #FFFFFF;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2371717A%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 28px;
  color: #18181B;
  cursor: pointer;
}
body select option {
  background: #FFFFFF;
  color: #18181B;
}
/* Restore native rendering for the BIBI Cars public landing dark theme */
.public-theme select {
  background-color: transparent;
  color: inherit;
}

/* On mobile Safari/iOS the OS still tints disabled <select> grey — keep ours white */
body select:disabled {
  background-color: #FAFAFA;
  color: #A1A1AA;
  cursor: not-allowed;
}

/* Native <input type="date"> and <input type="datetime-local"> — same logic.
   Browsers (esp. Safari iOS) render these with a translucent gray panel.
   Force white surface to match our other inputs. */
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body input[type="month"] {
  background-color: #FFFFFF;
  color: #18181B;
  -webkit-appearance: none;
  appearance: none;
}
.public-theme input[type="date"],
.public-theme input[type="datetime-local"],
.public-theme input[type="time"],
.public-theme input[type="month"] {
  background-color: transparent;
  color: inherit;
}


/* ===== Catalog filter sidebar — thin amber scrollbar (Firefox + WebKit) ===== */
.filter-sidebar-scroll { scrollbar-width: thin; scrollbar-color: #FEAE00 #1A1A1A; scroll-behavior: smooth; overscroll-behavior: contain; }
.filter-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.filter-sidebar-scroll::-webkit-scrollbar-track { background: #141414; border-radius: 3px; }
.filter-sidebar-scroll::-webkit-scrollbar-thumb { background: #FEAE00; border-radius: 3px; }
.filter-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #FFBF2D; }


/* ==========================================================================
   CUSTOMER CABINET — DARK THEME OVERRIDES
   Activated by wrapping the cabinet in <div className="cabinet-scope" data-theme="dark">.
   Light theme remains the default, completely untouched.
   Every rule below is scoped to .cabinet-scope[data-theme="dark"], so nothing
   outside the cabinet is affected.
   ========================================================================== */

.cabinet-scope {
  /* Smooth theme transition for hero surfaces (keeps interactions snappy for text) */
  transition: background-color 180ms ease;
}

.cabinet-scope[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0A0A09;
  color: #F4F4F5;
}

/* --- Page + section surfaces ---------------------------------------------- */
.cabinet-scope[data-theme="dark"] .bg-\[\#F8F8F8\],
.cabinet-scope[data-theme="dark"] .bg-\[\#FAFAFA\] {
  background-color: #0A0A09 !important;
}

.cabinet-scope[data-theme="dark"] .bg-white {
  background-color: #17171A !important;
}

.cabinet-scope[data-theme="dark"] .bg-zinc-50 {
  background-color: #141416 !important;
}

.cabinet-scope[data-theme="dark"] .bg-zinc-100,
.cabinet-scope[data-theme="dark"] .bg-\[\#F4F4F5\] {
  background-color: #222227 !important;
}

/* --- Text -----------------------------------------------------------------
   NB: we do NOT blanket-flip .text-[#18181B] → white because many components
   use that same class as the **dark-text** on a bright amber button
   (e.g. bg-[#FEAE00] text-[#18181B] for the "Browse catalog" CTA).
   Instead: flip to white ONLY when the element sits on a light/dark surface
   (not on an amber/warning bg). We achieve this with two rules:
     1) Default flip for any .text-[#18181B]  → white-ish  (F4F4F5)
     2) Override inside amber/yellow/warning backgrounds → keep dark  (#18181B)
--------------------------------------------------------------------------- */
.cabinet-scope[data-theme="dark"] .text-\[\#18181B\] {
  color: #F4F4F5 !important;
}
.cabinet-scope[data-theme="dark"] .text-\[\#27272A\] {
  color: #E4E4E7 !important;
}
.cabinet-scope[data-theme="dark"] .text-\[\#71717A\],
.cabinet-scope[data-theme="dark"] .text-zinc-500,
.cabinet-scope[data-theme="dark"] .text-slate-600 {
  color: #A1A1AA !important;
}
.cabinet-scope[data-theme="dark"] .text-\[\#A1A1AA\],
.cabinet-scope[data-theme="dark"] .text-zinc-700 {
  color: #D4D4D8 !important;
}

/* Keep .text-[#18181B] truly dark when placed INSIDE an amber bg container
   (primary CTAs like "Browse catalog", "Pay now", status pills, etc.). */
.cabinet-scope[data-theme="dark"] .bg-\[\#FEAE00\] .text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-\[\#FEAE00\].text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-amber-100 .text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-amber-200 .text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-amber-500 .text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-yellow-100 .text-\[\#18181B\],
.cabinet-scope[data-theme="dark"] .bg-yellow-400 .text-\[\#18181B\] {
  color: #18181B !important;
}
/* And the same for white text used as icon color on bright amber CTAs — keep
   it dark so it stays readable (the flip from light theme was hurting us). */
.cabinet-scope[data-theme="dark"] .bg-\[\#FEAE00\] .text-white,
.cabinet-scope[data-theme="dark"] .bg-\[\#FEAE00\] svg {
  color: #18181B !important;
}

/* --- Borders -------------------------------------------------------------- */
.cabinet-scope[data-theme="dark"] .border-\[\#E4E4E7\],
.cabinet-scope[data-theme="dark"] .border-zinc-200,
.cabinet-scope[data-theme="dark"] .border-zinc-100 {
  border-color: #27272A !important;
}
.cabinet-scope[data-theme="dark"] .border-\[\#F4F4F5\] {
  border-color: #222227 !important;
}
.cabinet-scope[data-theme="dark"] .divide-\[\#E4E4E7\] > :not([hidden]) ~ :not([hidden]),
.cabinet-scope[data-theme="dark"] .divide-zinc-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #27272A !important;
}

/* --- Brand-black surfaces (sidebar item, avatar, buttons) -----------------
   In light theme `bg-[#18181B]` is a "dark card / dark button" (e.g. the
   manager card, active sidebar pill). In dark theme we keep it DARK — just
   one shade lighter than the page bg so it still stands out, and we preserve
   its white text (no color flip). This prevents the "inverted / all-yellow"
   look the user reported.
--------------------------------------------------------------------------- */
.cabinet-scope[data-theme="dark"] .bg-\[\#18181B\] {
  background-color: #26262A !important;
  color: #F4F4F5 !important;
  border-color: #34343A !important;
}
.cabinet-scope[data-theme="dark"] .bg-\[\#18181B\]:hover {
  background-color: #2E2E33 !important;
}
/* Active navigation item — give it an amber accent via border/ring, not a fill,
   so it still pops in dark mode without the awful white-on-yellow text. */
.cabinet-scope[data-theme="dark"] a.bg-\[\#18181B\],
.cabinet-scope[data-theme="dark"] button.bg-\[\#18181B\] {
  background-color: #26262A !important;
  box-shadow: inset 0 0 0 1px rgba(254, 174, 0, 0.45) !important;
}
.cabinet-scope[data-theme="dark"] a.bg-\[\#18181B\]:hover,
.cabinet-scope[data-theme="dark"] button.bg-\[\#18181B\]:hover {
  background-color: #2E2E33 !important;
  box-shadow: inset 0 0 0 1px rgba(254, 174, 0, 0.65) !important;
}

/* --- Hover states --------------------------------------------------------- */
.cabinet-scope[data-theme="dark"] .hover\:bg-\[\#F4F4F5\]:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-zinc-100:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-zinc-50:hover,
/* Phase B3.1 — catch the remaining off-white hover tints used by
   WatchlistPage / ComparePage / CustomerCabinet shipments table /
   any future page so hover NEVER flips a black card to a white card. */
.cabinet-scope[data-theme="dark"] .hover\:bg-\[\#FAFAFA\]:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-\[\#F9FAFB\]:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-\[\#F8F8F8\]:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-gray-50:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-gray-100:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-neutral-50:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-neutral-100:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-slate-50:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: #1E1E22 !important;
  color: #F4F4F5 !important;
}
/* And nuke any "hover:bg-white" (solid or alpha-suffixed) — these surface
   as a glaring white panel on dark backgrounds and were the visible bug. */
.cabinet-scope[data-theme="dark"] .hover\:bg-white:hover {
  background-color: #1E1E22 !important;
  color: #F4F4F5 !important;
}
/* Translucent white overlays (e.g. icon buttons next to the manager card
   in the sidebar) are intentional — keep them readable on dark. */
.cabinet-scope[data-theme="dark"] .hover\:bg-white\/50:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.cabinet-scope[data-theme="dark"] .hover\:text-\[\#18181B\]:hover {
  color: #F4F4F5 !important;
}

/* --- Coloured status bubbles (keep tint but darken surface) ----------------
   *-50 are the LIGHTEST pastel tints (used for stat tiles, summary pills,
   page-section banners). In dark mode they MUST be subtle translucent tints,
   otherwise they punch through as glaring pale rectangles. */
.cabinet-scope[data-theme="dark"] .bg-red-50,
.cabinet-scope[data-theme="dark"] .bg-rose-50 { background-color: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.28) !important; }
.cabinet-scope[data-theme="dark"] .bg-amber-50,
.cabinet-scope[data-theme="dark"] .bg-orange-50,
.cabinet-scope[data-theme="dark"] .bg-yellow-50 { background-color: rgba(254, 174, 0, 0.10) !important; border-color: rgba(254, 174, 0, 0.28) !important; }
.cabinet-scope[data-theme="dark"] .bg-green-50,
.cabinet-scope[data-theme="dark"] .bg-emerald-50,
.cabinet-scope[data-theme="dark"] .bg-teal-50 { background-color: rgba(16, 185, 129, 0.10) !important; border-color: rgba(16, 185, 129, 0.28) !important; }
.cabinet-scope[data-theme="dark"] .bg-blue-50,
.cabinet-scope[data-theme="dark"] .bg-sky-50,
.cabinet-scope[data-theme="dark"] .bg-cyan-50,
.cabinet-scope[data-theme="dark"] .bg-indigo-50 { background-color: rgba(59, 130, 246, 0.10) !important; border-color: rgba(59, 130, 246, 0.28) !important; }
.cabinet-scope[data-theme="dark"] .bg-purple-50,
.cabinet-scope[data-theme="dark"] .bg-violet-50,
.cabinet-scope[data-theme="dark"] .bg-fuchsia-50,
.cabinet-scope[data-theme="dark"] .bg-pink-50 { background-color: rgba(168, 85, 247, 0.12) !important; border-color: rgba(168, 85, 247, 0.30) !important; }

/* --- Status pills (bg-*-100 / text-*-700) — the "ready / Оплачено / Очікує"
   badges the user flagged as illegible. In light theme they are pastel bg +
   dark text. In dark theme we need translucent colored bg + bright text. */
.cabinet-scope[data-theme="dark"] .bg-amber-100 { background-color: rgba(254, 174, 0, 0.18) !important; border-color: rgba(254, 174, 0, 0.35) !important; }
.cabinet-scope[data-theme="dark"] .bg-amber-200 { background-color: rgba(254, 174, 0, 0.22) !important; }
.cabinet-scope[data-theme="dark"] .bg-emerald-100,
.cabinet-scope[data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.18) !important; border-color: rgba(16, 185, 129, 0.35) !important; }
.cabinet-scope[data-theme="dark"] .bg-red-100,
.cabinet-scope[data-theme="dark"] .bg-rose-100 { background-color: rgba(239, 68, 68, 0.18) !important; border-color: rgba(239, 68, 68, 0.40) !important; }
.cabinet-scope[data-theme="dark"] .bg-blue-100,
.cabinet-scope[data-theme="dark"] .bg-indigo-100 { background-color: rgba(59, 130, 246, 0.18) !important; border-color: rgba(59, 130, 246, 0.40) !important; }
.cabinet-scope[data-theme="dark"] .bg-purple-100,
.cabinet-scope[data-theme="dark"] .bg-violet-100 { background-color: rgba(168, 85, 247, 0.20) !important; border-color: rgba(168, 85, 247, 0.40) !important; }
.cabinet-scope[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.20) !important; border-color: rgba(234, 179, 8, 0.40) !important; }

.cabinet-scope[data-theme="dark"] .text-red-500,
.cabinet-scope[data-theme="dark"] .text-red-600,
.cabinet-scope[data-theme="dark"] .text-red-700 { color: #FCA5A5 !important; }
.cabinet-scope[data-theme="dark"] .text-amber-600,
.cabinet-scope[data-theme="dark"] .text-amber-700,
.cabinet-scope[data-theme="dark"] .text-amber-800 { color: #FCD34D !important; }
.cabinet-scope[data-theme="dark"] .text-yellow-700,
.cabinet-scope[data-theme="dark"] .text-yellow-800 { color: #FDE68A !important; }
.cabinet-scope[data-theme="dark"] .text-blue-600,
.cabinet-scope[data-theme="dark"] .text-blue-700,
.cabinet-scope[data-theme="dark"] .text-blue-800 { color: #93C5FD !important; }
.cabinet-scope[data-theme="dark"] .text-green-600,
.cabinet-scope[data-theme="dark"] .text-green-700,
.cabinet-scope[data-theme="dark"] .text-emerald-600,
.cabinet-scope[data-theme="dark"] .text-emerald-700,
.cabinet-scope[data-theme="dark"] .text-emerald-800 { color: #6EE7B7 !important; }
.cabinet-scope[data-theme="dark"] .text-purple-600,
.cabinet-scope[data-theme="dark"] .text-purple-700,
.cabinet-scope[data-theme="dark"] .text-violet-600,
.cabinet-scope[data-theme="dark"] .text-violet-700 { color: #C4B5FD !important; }
.cabinet-scope[data-theme="dark"] .text-indigo-600,
.cabinet-scope[data-theme="dark"] .text-indigo-700 { color: #A5B4FC !important; }

/* Solid coloured filled buttons / step indicators (bg-emerald-500, bg-amber-500
   etc. — used in the shipping progress steps and in "Оплатити" buttons).
   Slightly darken/desaturate them so they're not too glowing on black. */
.cabinet-scope[data-theme="dark"] .bg-emerald-500,
.cabinet-scope[data-theme="dark"] .bg-emerald-600 { background-color: #059669 !important; }
.cabinet-scope[data-theme="dark"] .bg-emerald-700:hover,
.cabinet-scope[data-theme="dark"] .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
.cabinet-scope[data-theme="dark"] .bg-blue-500 { background-color: #2563EB !important; }
.cabinet-scope[data-theme="dark"] .bg-amber-500 { background-color: #D97706 !important; }
.cabinet-scope[data-theme="dark"] .bg-red-500,
.cabinet-scope[data-theme="dark"] .bg-red-600 { background-color: #DC2626 !important; }

/* Inactive/track colors (bg-zinc-200 as "not yet completed" step) */
.cabinet-scope[data-theme="dark"] .bg-zinc-200 { background-color: #2A2A2E !important; }
.cabinet-scope[data-theme="dark"] .text-zinc-400 { color: #71717A !important; }
.cabinet-scope[data-theme="dark"] .text-zinc-900 { color: #F4F4F5 !important; }

/* Gradient background cards (Оплачено / Очікують summary, Packages section) —
   the user flagged the "Оплачено 2" pale mint card. Use subtle dark gradients. */
.cabinet-scope[data-theme="dark"] .from-emerald-50 { --tw-gradient-from: rgba(16,185,129,0.12) !important; }
.cabinet-scope[data-theme="dark"] .to-emerald-100 { --tw-gradient-to: rgba(16,185,129,0.22) !important; }
.cabinet-scope[data-theme="dark"] .from-amber-50   { --tw-gradient-from: rgba(254,174,0,0.12) !important; }
.cabinet-scope[data-theme="dark"] .to-amber-100    { --tw-gradient-to: rgba(254,174,0,0.22) !important; }
.cabinet-scope[data-theme="dark"] .from-blue-50    { --tw-gradient-from: rgba(59,130,246,0.10) !important; }
.cabinet-scope[data-theme="dark"] .to-indigo-50    { --tw-gradient-to: rgba(99,102,241,0.14) !important; }
.cabinet-scope[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.35) !important; }
.cabinet-scope[data-theme="dark"] .border-amber-200 { border-color: rgba(254,174,0,0.35) !important; }
.cabinet-scope[data-theme="dark"] .border-emerald-200 { border-color: rgba(16,185,129,0.35) !important; }

/* Semi-transparent bubble chips used inside dark cards (bg-white/10, /20) —
   since we now keep bg-[#18181B] dark (not amber), the semi-white bubbles
   work as intended, but we bump opacity a touch for better visibility. */
.cabinet-scope[data-theme="dark"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; }
.cabinet-scope[data-theme="dark"] .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.16) !important; }
.cabinet-scope[data-theme="dark"] .text-white\/60 { color: rgba(255, 255, 255, 0.65) !important; }
.cabinet-scope[data-theme="dark"] .text-white\/70 { color: rgba(255, 255, 255, 0.78) !important; }

.cabinet-scope[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.18) !important; }

/* --- Inputs / selects ----------------------------------------------------- */
.cabinet-scope[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.cabinet-scope[data-theme="dark"] select,
.cabinet-scope[data-theme="dark"] textarea {
  background-color: #0F0F11 !important;
  color: #F4F4F5 !important;
  border-color: #2C2C30 !important;
}
.cabinet-scope[data-theme="dark"] input::placeholder,
.cabinet-scope[data-theme="dark"] textarea::placeholder {
  color: #6B6B73 !important;
}
.cabinet-scope[data-theme="dark"] input:focus,
.cabinet-scope[data-theme="dark"] select:focus,
.cabinet-scope[data-theme="dark"] textarea:focus {
  border-color: #FEAE00 !important;
  box-shadow: 0 0 0 3px rgba(254, 174, 0, 0.22) !important;
}

/* --- Shadows become subtle in dark ---------------------------------------- */
.cabinet-scope[data-theme="dark"] .shadow,
.cabinet-scope[data-theme="dark"] .shadow-sm,
.cabinet-scope[data-theme="dark"] .shadow-md,
.cabinet-scope[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.6) !important;
}

/* --- Progress bars / fill strips ------------------------------------------
   Previously we added a ring around every amber element — that produced the
   "double outline around pills" the user complained about. Removed. Only the
   Tailwind .bg-[#FEAE00] is styled where the component itself asks for it. */

/* --- Theme toggle pill ---------------------------------------------------- */
.cabinet-theme-toggle {
  --pill-bg: #F4F4F5;
  --pill-indicator: #FFFFFF;
  --pill-text: #71717A;
  --pill-active-text: #18181B;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid #E4E4E7;
  -webkit-user-select: none;
          user-select: none;
}
.cabinet-scope[data-theme="dark"] .cabinet-theme-toggle {
  --pill-bg: #141416;
  --pill-indicator: #FEAE00;
  --pill-text: #A1A1AA;
  --pill-active-text: #0A0A09;
  border-color: #2C2C30;
}
.cabinet-theme-toggle button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--pill-text);
  transition: all 140ms ease;
}
.cabinet-theme-toggle button:hover { color: var(--pill-active-text); }
.cabinet-theme-toggle button[data-active="true"] {
  background: var(--pill-indicator);
  color: var(--pill-active-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.cabinet-scope[data-theme="dark"] .cabinet-theme-toggle button[data-active="true"] {
  box-shadow: 0 0 0 1px rgba(254, 174, 0, 0.3), 0 4px 14px -4px rgba(254, 174, 0, 0.6);
}

/* --- Toast / notification defaults ---------------------------------------- */
.cabinet-scope[data-theme="dark"] .border-yellow-200 { border-color: rgba(254, 174, 0, 0.30) !important; }

/* Avatar circle — it's typically a small circle with user initials or icon
   on a dark surface. Keep it dark-surfaced with an amber ring accent. */
.cabinet-scope[data-theme="dark"] .bg-\[\#18181B\].text-white {
  background-color: #26262A !important;
  color: #F4F4F5 !important;
  box-shadow: inset 0 0 0 1px rgba(254, 174, 0, 0.35);
}

/* ---------- Sonner toast (BIBI dark/amber palette) ---------- */
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] {
  background: #1D1D1B !important;
  color: #FFFFFF !important;
  border: 1px solid #3a3a38 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='success'] {
  border-color: rgba(254, 174, 0, 0.45) !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='success'] [data-icon] {
  color: #FEAE00 !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='success'] [data-icon] svg {
  color: #FEAE00 !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='error'] {
  border-color: rgba(239, 68, 68, 0.55) !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='error'] [data-icon] svg {
  color: #f87171 !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='info'] {
  border-color: rgba(254, 174, 0, 0.35) !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-type='info'] [data-icon] svg {
  color: #FEAE00 !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-title] {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-description] {
  color: #B0B0B0 !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-close-button] {
  background: #2a2a28 !important;
  border-color: #3a3a38 !important;
  color: #B0B0B0 !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-close-button]:hover {
  color: #FEAE00 !important;
  border-color: #FEAE00 !important;
}

[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-button] {
  background: #FEAE00 !important;
  color: #0A0A09 !important;
  font-weight: 600 !important;
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast] [data-button]:hover {
  background: #FFBF2D !important;
}




/* ========================================================================
 * TYPOGRAPHY SOFTENING (admin / cabinet / default light theme only)
 * ------------------------------------------------------------------------
 * Mazzard's variable Bold face (font-weight 600 900) renders very heavy for
 * subheaders, KPI labels, table headers and tab buttons across the CRM.
 *
 * Rule of thumb (now enforced):
 *   • h1 main page title  → 600  (semibold-looking, not black)
 *   • h2 / h3 / h4        → 500  (medium)
 *   • Tailwind .font-bold → 600  (down from 700/black)
 *   • Tailwind .font-semibold → 500 (down from 600 black-ish)
 *   • Component classes (.section-title, .badge, table th, tabs) → 500
 *
 * The .public-theme scope (BIBI Cars landing) is NOT affected and keeps
 * its original heavy display weights.
 * ======================================================================== */

body :is(.font-bold, .font-extrabold, .font-black) {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}
body .font-semibold {
  font-weight: 500 !important;
}
body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 500;
  letter-spacing: -0.005em;
}
body h1 { font-weight: 600; }

/* Re-restore heavy weights inside the public landing theme */
.public-theme :is(h1, h2, h3, h4, h5, h6),
.public-theme .font-bold,
.public-theme .font-extrabold,
.public-theme .font-black {
  font-weight: 700 !important;
  letter-spacing: normal;
}
.public-theme .font-semibold {
  font-weight: 600 !important;
}

/* Calmer component classes used across the admin */
.section-title,
.section-title-clean { font-weight: 500 !important; }
.kpi-value           { font-weight: 600 !important; letter-spacing: -0.015em; }
.kpi-label           { font-weight: 500 !important; }
.badge               { font-weight: 500 !important; }
.metric-value        { font-weight: 500 !important; }
.table-premium th    { font-weight: 500 !important; }

/* Sidebar items stay at 500 (already are) — keep readable hierarchy */
.sidebar-item.active,
.sidebar-subitem.active { font-weight: 500; }

/* Ensure card titles like "SYSTEM PARTIAL" / "CRITICAL · EXTENSION OFFLINE"
   inside admin alert blocks stay readable but not super-heavy. */
[class*="bg-amber"] :is(h1,h2,h3),
[class*="bg-red"]   :is(h1,h2,h3),
[class*="bg-rose"]  :is(h1,h2,h3),
[class*="bg-emerald"] :is(h1,h2,h3) {
  font-weight: 600 !important;
}
.file\:mr-3::-webkit-file-upload-button {
  margin-right: 0.75rem;
}
.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}
.file\:rounded-xl::-webkit-file-upload-button {
  border-radius: 0.75rem;
}
.file\:rounded-xl::file-selector-button {
  border-radius: 0.75rem;
}
.file\:border-0::-webkit-file-upload-button {
  border-width: 0px;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-\[\#EEF2FF\]::-webkit-file-upload-button {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.file\:bg-\[\#EEF2FF\]::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.file\:bg-transparent::-webkit-file-upload-button {
  background-color: transparent;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:px-3::-webkit-file-upload-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:py-2::-webkit-file-upload-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::-webkit-file-upload-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::-webkit-file-upload-button {
  font-weight: 500;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-\[\#4F46E5\]::-webkit-file-upload-button {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.file\:text-\[\#4F46E5\]::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.file\:text-foreground::-webkit-file-upload-button {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.file\:text-foreground::file-selector-button {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.placeholder\:tracking-wide::placeholder {
  letter-spacing: 0.025em;
}
.placeholder\:text-\[\#5E5E5E\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(94 94 94 / 1);
  color: rgb(94 94 94 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#6A6A66\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(106 106 102 / 1);
  color: rgb(106 106 102 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#A1A1AA\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-zinc-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:mt-0:first-child {
  margin-top: 0px;
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(0.75rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.75rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(0.75rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.75rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.focus-within\:relative:focus-within {
  position: relative;
}
.focus-within\:z-20:focus-within {
  z-index: 20;
}
.focus-within\:border-\[\#18181B\]:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.focus-within\:border-\[\#FEAE00\]:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(254 174 0 / 1);
  border-color: rgb(254 174 0 / var(--tw-border-opacity, 1));
}
.focus-within\:ring-2:focus-within {
  --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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-\[\#18181B\]\/10:focus-within {
  --tw-ring-color: rgb(24 24 27 / 0.1);
}
.focus-within\:ring-\[\#18181B\]\/20:focus-within {
  --tw-ring-color: rgb(24 24 27 / 0.2);
}
.focus-within\:ring-\[\#DC2626\]\/30:focus-within {
  --tw-ring-color: rgb(220 38 38 / 0.3);
}
.focus-within\:ring-\[\#FEAE00\]\/20:focus-within {
  --tw-ring-color: rgb(254 174 0 / 0.2);
}
.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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-\[\#18181B\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#18181B\]\/40:hover {
  border-color: rgb(24 24 27 / 0.4);
}
.hover\:border-\[\#4F46E5\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / 1);
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#4F46E5\]\/30:hover {
  border-color: rgb(79 70 229 / 0.3);
}
.hover\:border-\[\#4F46E5\]\/40:hover {
  border-color: rgb(79 70 229 / 0.4);
}
.hover\:border-\[\#55544E\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(85 84 78 / 1);
  border-color: rgb(85 84 78 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#71717A\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / 1);
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#7a7a78\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(122 122 120 / 1);
  border-color: rgb(122 122 120 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#A1A1AA\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#A5B4FC\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / 1);
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#D4D4D8\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#E4E4E7\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#F9A8D4\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 168 212 / 1);
  border-color: rgb(249 168 212 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#FCA5A5\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#FEAE00\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 174 0 / 1);
  border-color: rgb(254 174 0 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#FEAE00\]\/40:hover {
  border-color: rgb(254 174 0 / 0.4);
}
.hover\:border-\[\#FEAE00\]\/60:hover {
  border-color: rgb(254 174 0 / 0.6);
}
.hover\:border-amber-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.hover\:border-amber-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / 1);
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / 1);
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / 1);
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / 1);
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.hover\:border-pink-500\/50:hover {
  border-color: rgb(236 72 153 / 0.5);
}
.hover\:border-red-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.hover\:border-rose-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / 1);
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.hover\:border-rose-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / 1);
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.hover\:border-rose-500\/40:hover {
  border-color: rgb(244 63 94 / 0.4);
}
.hover\:border-zinc-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / 1);
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-700:hover {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / 1);
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.hover\:\!bg-\[\#FFBF2D\]:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 191 45 / 1) !important;
  background-color: rgb(255 191 45 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-\[\#006699\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 153 / 1);
  background-color: rgb(0 102 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#047857\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / 1);
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#15803D\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 1);
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#17150D\]\/60:hover {
  background-color: rgb(23 21 13 / 0.6);
}
.hover\:bg-\[\#18181B\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1D1D1B\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 29 27 / 1);
  background-color: rgb(29 29 27 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#232321\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(35 35 33 / 1);
  background-color: rgb(35 35 33 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#27272A\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#3730A3\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / 1);
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#3F3F46\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#4338CA\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / 1);
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#4F46E5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / 1);
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#5147d4\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(81 71 212 / 1);
  background-color: rgb(81 71 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#635BFF\]\/10:hover {
  background-color: rgb(99 91 255 / 0.1);
}
.hover\:bg-\[\#881337\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(136 19 55 / 1);
  background-color: rgb(136 19 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#B91C1C\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#D1FAE5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#D97706\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#DCFCE7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 1);
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#E0E7FF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#E4E4E7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#E5A800\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 168 0 / 1);
  background-color: rgb(229 168 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#E89D00\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 157 0 / 1);
  background-color: rgb(232 157 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#ECFDF5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#EEF2FF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#EFEFEF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 239 / 1);
  background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#EFF6FF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F4F4F5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F59E0B\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F5F5F5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / 1);
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F9F9FB\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 251 / 1);
  background-color: rgb(249 249 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F9FAFB\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FAFAF8\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 248 / 1);
  background-color: rgb(250 250 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FAFAFA\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FAFAFA\]\/50:hover {
  background-color: rgb(250 250 250 / 0.5);
}
.hover\:bg-\[\#FBCFE8\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 207 232 / 1);
  background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FCA5A5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / 1);
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FEAE00\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 174 0 / 1);
  background-color: rgb(254 174 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FEAE00\]\/60:hover {
  background-color: rgb(254 174 0 / 0.6);
}
.hover\:bg-\[\#FEE2E2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FEF2F2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FEF3C7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FFBF2D\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 45 / 1);
  background-color: rgb(255 191 45 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FFC04A\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 192 74 / 1);
  background-color: rgb(255 192 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FFC233\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 194 51 / 1);
  background-color: rgb(255 194 51 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#FFC347\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 195 71 / 1);
  background-color: rgb(255 195 71 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / 1);
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / 1);
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-50\/60:hover {
  background-color: rgb(255 251 235 / 0.6);
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / 1);
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / 1);
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-black\/60:hover {
  background-color: rgb(0 0 0 / 0.6);
}
.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}
.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / 1);
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(0 84% 60% / 0.8);
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(0 84% 60% / 0.9);
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / 1);
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / 1);
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / 1);
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / 1);
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50\/50:hover {
  background-color: rgb(249 250 251 / 0.5);
}
.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / 1);
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 1);
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-50\/30:hover {
  background-color: rgb(238 242 255 / 0.3);
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / 1);
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(240 5% 96% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-orange-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / 1);
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary:hover {
  background-color: hsl(240 6% 10%);
  background-color: hsl(var(--primary));
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(240 6% 10% / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(240 6% 10% / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / 1);
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 1);
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / 1);
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / 1);
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / 1);
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500\/25:hover {
  background-color: rgb(244 63 94 / 0.25);
}
.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / 1);
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary:hover {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(240 5% 96% / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-sky-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / 1);
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / 1);
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / 1);
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / 1);
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / 1);
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/50:hover {
  background-color: rgb(255 255 255 / 0.5);
}
.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}
.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}
.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}
.hover\:bg-zinc-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-50\/60:hover {
  background-color: rgb(250 250 250 / 0.6);
}
.hover\:bg-zinc-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / 1);
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.hover\:from-green-500:hover {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-orange-500:hover {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-emerald-500:hover {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.hover\:to-red-500:hover {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}
.hover\:\!text-\[\#FEAE00\]:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(254 174 0 / 1) !important;
  color: rgb(254 174 0 / var(--tw-text-opacity, 1)) !important;
}
.hover\:\!text-white:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / 1) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.hover\:text-\[\#059669\]:hover {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 1);
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#065F46\]:hover {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / 1);
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#18181B\]:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#1D4ED8\]:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#3730A3\]:hover {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / 1);
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#3B82F6\]:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 1);
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#4F46E5\]:hover {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#52525B\]:hover {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#D97706\]:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#DC2626\]:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#FEAE00\]:hover {
  --tw-text-opacity: 1;
  color: rgb(254 174 0 / 1);
  color: rgb(254 174 0 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.hover\:text-amber-500:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / 1);
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-700:hover {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-800:hover {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / 1);
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-900:hover {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / 1);
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-600:hover {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-700:hover {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / 1);
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.hover\:text-muted-foreground:hover {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.hover\:text-pink-200:hover {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / 1);
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-foreground:hover {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 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 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-500:hover {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / 1);
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-600:hover {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / 1);
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-200:hover {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-500:hover {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-800:hover {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / 1);
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.hover\:no-underline:hover {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.hover\:decoration-\[\#FEAE00\]:hover {
  -webkit-text-decoration-color: #FEAE00;
          text-decoration-color: #FEAE00;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_10px_28px_rgba\(254\2c 174\2c 0\2c 0\.36\)\]:hover {
  --tw-shadow: 0 10px 28px rgba(254,174,0,0.36);
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:brightness-125:hover {
  --tw-brightness: brightness(1.25);
  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);
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  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);
}
.hover\:file\:bg-\[\#E0E7FF\]::-webkit-file-upload-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:file\:bg-\[\#E0E7FF\]::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.focus\:border-\[\#0EA5E9\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / 1);
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#18181B\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#4F46E5\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / 1);
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#635BFF\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(99 91 255 / 1);
  border-color: rgb(99 91 255 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#E4E4E7\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#FEAE00\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(254 174 0 / 1);
  border-color: rgb(254 174 0 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#FF6B6B\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(255 107 107 / 1);
  border-color: rgb(255 107 107 / var(--tw-border-opacity, 1));
}
.focus\:border-\[\#bbb\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(187 187 187 / 1);
  border-color: rgb(187 187 187 / var(--tw-border-opacity, 1));
}
.focus\:border-amber-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / 1);
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / 1);
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / 1);
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.focus\:border-red-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.focus\:border-rose-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / 1);
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.focus\:border-transparent:focus {
  border-color: transparent;
}
.focus\:border-zinc-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.focus\:border-zinc-900:focus {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.focus\:bg-primary:focus {
  background-color: hsl(240 6% 10%);
  background-color: hsl(var(--primary));
}
.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:text-\[\#4F46E5\]:focus {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / 1);
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.focus\:text-primary-foreground:focus {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:shadow-\[0_0_0_4px_rgba\(254\2c 174\2c 0\2c 0\.18\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\]:focus {
  --tw-shadow: 0 0 0 4px rgba(254,174,0,0.18),inset 0 1px 0 rgba(255,255,255,0.04);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-\[\#0A0A0B\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(10 10 11 / var(--tw-ring-opacity, 1));
}
.focus\:ring-\[\#0EA5E9\]\/30:focus {
  --tw-ring-color: rgb(14 165 233 / 0.3);
}
.focus\:ring-\[\#18181B\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(24 24 27 / var(--tw-ring-opacity, 1));
}
.focus\:ring-\[\#18181B\]\/10:focus {
  --tw-ring-color: rgb(24 24 27 / 0.1);
}
.focus\:ring-\[\#18181B\]\/15:focus {
  --tw-ring-color: rgb(24 24 27 / 0.15);
}
.focus\:ring-\[\#4F46E5\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.focus\:ring-\[\#4F46E5\]\/20:focus {
  --tw-ring-color: rgb(79 70 229 / 0.2);
}
.focus\:ring-\[\#4F46E5\]\/30:focus {
  --tw-ring-color: rgb(79 70 229 / 0.3);
}
.focus\:ring-\[\#635BFF\]\/20:focus {
  --tw-ring-color: rgb(99 91 255 / 0.2);
}
.focus\:ring-\[\#635BFF\]\/30:focus {
  --tw-ring-color: rgb(99 91 255 / 0.3);
}
.focus\:ring-\[\#DC2626\]\/30:focus {
  --tw-ring-color: rgb(220 38 38 / 0.3);
}
.focus\:ring-\[\#F4F4F5\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 244 245 / var(--tw-ring-opacity, 1));
}
.focus\:ring-\[\#FEAE00\]\/20:focus {
  --tw-ring-color: rgb(254 174 0 / 0.2);
}
.focus\:ring-\[\#FEAE00\]\/30:focus {
  --tw-ring-color: rgb(254 174 0 / 0.3);
}
.focus\:ring-\[\#FEAE00\]\/35:focus {
  --tw-ring-color: rgb(254 174 0 / 0.35);
}
.focus\:ring-\[\#FEAE00\]\/40:focus {
  --tw-ring-color: rgb(254 174 0 / 0.4);
}
.focus\:ring-\[\#FF6B6B\]\/30:focus {
  --tw-ring-color: rgb(255 107 107 / 0.3);
}
.focus\:ring-black\/10:focus {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-emerald-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(224 231 255 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-rose-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity, 1));
}
.focus\:ring-zinc-200\/50:focus {
  --tw-ring-color: rgb(228 228 231 / 0.5);
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:bg-\[\#FAFAFA\]:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.focus-visible\:bg-zinc-50:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-black\/10:focus-visible {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.focus-visible\:ring-black\/15:focus-visible {
  --tw-ring-color: rgb(0 0 0 / 0.15);
}
.focus-visible\:ring-indigo-200:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-indigo-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-red-200:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-violet-200:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:scale-95:active {
  --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));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}
.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));
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.active\:bg-\[\#000000\]:active {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.active\:bg-\[\#E69900\]:active {
  --tw-bg-opacity: 1;
  background-color: rgb(230 153 0 / 1);
  background-color: rgb(230 153 0 / var(--tw-bg-opacity, 1));
}
.active\:bg-\[\#E89D00\]:active {
  --tw-bg-opacity: 1;
  background-color: rgb(232 157 0 / 1);
  background-color: rgb(232 157 0 / var(--tw-bg-opacity, 1));
}
.active\:bg-\[\#EEEEEE\]:active {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / 1);
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
.active\:bg-black:active {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.active\:bg-indigo-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / 1);
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
}
.active\:bg-white\/10:active {
  background-color: rgb(255 255 255 / 0.1);
}
.active\:bg-zinc-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-\[\#A1A1AA\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / 1);
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#A5B4FC\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / 1);
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#F4F4F5\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#F6F6F4\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 244 / 1);
  background-color: rgb(246 246 244 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#FAFAFA\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-zinc-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / 1);
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.disabled\:text-\[\#A1A1AA\]:disabled {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.disabled\:text-\[\#B4B4B0\]:disabled {
  --tw-text-opacity: 1;
  color: rgb(180 180 176 / 1);
  color: rgb(180 180 176 / var(--tw-text-opacity, 1));
}
.disabled\:no-underline:disabled {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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: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-\[1\.04\] {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  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\:bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-\[\#18181B\] {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#635BFF\] {
  --tw-text-opacity: 1;
  color: rgb(99 91 255 / 1);
  color: rgb(99 91 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#FEAE00\] {
  --tw-text-opacity: 1;
  color: rgb(254 174 0 / 1);
  color: rgb(254 174 0 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(240 5% 96% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}
.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(240 6% 90%);
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(240 6% 10%);
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(0 0% 98%);
  background-color: hsl(var(--background));
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\: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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(0 84% 60% / 0.3);
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(0 84% 60%);
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(0 0% 98%);
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}
.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(240 5% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 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));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[active\=true\]\:border-amber-300[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:border-emerald-300[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / 1);
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:border-sky-300[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / 1);
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:border-zinc-300[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-amber-50[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.data-\[active\=true\]\:bg-emerald-50[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.data-\[active\=true\]\:bg-sky-50[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / 1);
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.data-\[active\=true\]\:bg-zinc-100[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=active\]\:bg-\[\#18181B\][data-state="active"] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-white[data-state="active"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(240 6% 10%);
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(240 5% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--secondary));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(240 6% 90%);
  background-color: hsl(var(--input));
}
.data-\[state\=active\]\:font-semibold[data-state="active"] {
  font-weight: 600;
}
.data-\[active\=true\]\:text-amber-700[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.data-\[active\=true\]\:text-emerald-700[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.data-\[active\=true\]\:text-sky-700[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / 1);
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.data-\[active\=true\]\:text-zinc-700[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-\[\#18181B\][data-state="active"] {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.data-\[state\=active\]\:text-white[data-state="active"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(240 6% 10%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=active\]\:hover\:bg-black:hover[data-state="active"] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
  .supports-\[backdrop-filter\]\:bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8);
  }
}
.dark\:border-destructive:is(.dark *) {
  border-color: hsl(0 84% 60%);
  border-color: hsl(var(--destructive));
}
.dark\:border-slate-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / 1);
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / 1);
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}
.dark\:bg-red-950\/30:is(.dark *) {
  background-color: rgb(69 10 10 / 0.3);
}
.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / 1);
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
  .sm\:absolute {
    position: absolute;
  }
  .sm\:bottom-0 {
    bottom: 0px;
  }
  .sm\:left-auto {
    left: auto;
  }
  .sm\:right-0 {
    right: 0px;
  }
  .sm\:right-auto {
    right: auto;
  }
  .sm\:top-auto {
    top: auto;
  }
  .sm\:col-auto {
    grid-column: auto;
  }
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.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\:ml-0 {
    margin-left: 0px;
  }
  .sm\:ml-auto {
    margin-left: auto;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:mt-1 {
    margin-top: 0.25rem;
  }
  .sm\:mt-2 {
    margin-top: 0.5rem;
  }
  .sm\:mt-3 {
    margin-top: 0.75rem;
  }
  .sm\:mt-4 {
    margin-top: 1rem;
  }
  .sm\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline-block {
    display: inline-block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:table-cell {
    display: table-cell;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:h-10 {
    height: 2.5rem;
  }
  .sm\:h-12 {
    height: 3rem;
  }
  .sm\:h-14 {
    height: 3.5rem;
  }
  .sm\:h-16 {
    height: 4rem;
  }
  .sm\:h-2 {
    height: 0.5rem;
  }
  .sm\:h-3 {
    height: 0.75rem;
  }
  .sm\:h-8 {
    height: 2rem;
  }
  .sm\:h-9 {
    height: 2.25rem;
  }
  .sm\:h-auto {
    height: auto;
  }
  .sm\:w-10 {
    width: 2.5rem;
  }
  .sm\:w-12 {
    width: 3rem;
  }
  .sm\:w-14 {
    width: 3.5rem;
  }
  .sm\:w-16 {
    width: 4rem;
  }
  .sm\:w-24 {
    width: 6rem;
  }
  .sm\:w-40 {
    width: 10rem;
  }
  .sm\:w-60 {
    width: 15rem;
  }
  .sm\:w-64 {
    width: 16rem;
  }
  .sm\:w-72 {
    width: 18rem;
  }
  .sm\:w-8 {
    width: 2rem;
  }
  .sm\:w-9 {
    width: 2.25rem;
  }
  .sm\:w-96 {
    width: 24rem;
  }
  .sm\:w-\[120px\] {
    width: 120px;
  }
  .sm\:w-\[150px\] {
    width: 150px;
  }
  .sm\:w-\[160px\] {
    width: 160px;
  }
  .sm\:w-\[170px\] {
    width: 170px;
  }
  .sm\:w-\[180px\] {
    width: 180px;
  }
  .sm\:w-\[200px\] {
    width: 200px;
  }
  .sm\:w-\[240px\] {
    width: 240px;
  }
  .sm\:w-\[280px\] {
    width: 280px;
  }
  .sm\:w-\[340px\] {
    width: 340px;
  }
  .sm\:w-\[480px\] {
    width: 480px;
  }
  .sm\:w-\[540px\] {
    width: 540px;
  }
  .sm\:w-\[560px\] {
    width: 560px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:min-w-0 {
    min-width: 0px;
  }
  .sm\:min-w-\[200px\] {
    min-width: 200px;
  }
  .sm\:min-w-\[220px\] {
    min-width: 220px;
  }
  .sm\:min-w-\[240px\] {
    min-width: 240px;
  }
  .sm\:max-w-lg {
    max-width: 32rem;
  }
  .sm\:max-w-md {
    max-width: 28rem;
  }
  .sm\:max-w-none {
    max-width: none;
  }
  .sm\:max-w-sm {
    max-width: 24rem;
  }
  .sm\:max-w-xl {
    max-width: 36rem;
  }
  .sm\:flex-1 {
    flex: 1 1;
  }
  .sm\:flex-initial {
    flex: 0 1 auto;
  }
  .sm\:flex-none {
    flex: none;
  }
  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }
  .sm\:shrink-0 {
    flex-shrink: 0;
  }
  .sm\:basis-auto {
    flex-basis: auto;
  }
  .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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:grid-cols-\[1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr auto;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-col {
    flex-direction: column;
  }
  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-1 {
    gap: 0.25rem;
  }
  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }
  .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-y-4 {
    row-gap: 1rem;
  }
  .sm\: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)));
  }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\: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));
  }
  .sm\: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));
  }
  .sm\: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));
  }
  .sm\: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));
  }
  .sm\:space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * 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\:self-auto {
    align-self: auto;
  }
  .sm\:overflow-visible {
    overflow: visible;
  }
  .sm\:rounded-2xl {
    border-radius: 1rem;
  }
  .sm\:rounded-lg {
    border-radius: 0.75rem;
    border-radius: var(--radius);
  }
  .sm\:p-12 {
    padding: 3rem;
  }
  .sm\:p-2 {
    padding: 0.5rem;
  }
  .sm\:p-2\.5 {
    padding: 0.625rem;
  }
  .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-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .sm\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sm\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
  .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-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .sm\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .sm\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .sm\:pb-0\.5 {
    padding-bottom: 0.125rem;
  }
  .sm\:pl-0 {
    padding-left: 0px;
  }
  .sm\:pt-6 {
    padding-top: 1.5rem;
  }
  .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-\[10\.5px\] {
    font-size: 10.5px;
  }
  .sm\:text-\[11px\] {
    font-size: 11px;
  }
  .sm\:text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .sm\:text-\[12px\] {
    font-size: 12px;
  }
  .sm\:text-\[13px\] {
    font-size: 13px;
  }
  .sm\:text-\[14px\] {
    font-size: 14px;
  }
  .sm\:text-\[15px\] {
    font-size: 15px;
  }
  .sm\:text-\[16px\] {
    font-size: 16px;
  }
  .sm\:text-\[18px\] {
    font-size: 18px;
  }
  .sm\:text-\[19px\] {
    font-size: 19px;
  }
  .sm\:text-\[20px\] {
    font-size: 20px;
  }
  .sm\:text-\[22px\] {
    font-size: 22px;
  }
  .sm\:text-\[24px\] {
    font-size: 24px;
  }
  .sm\:text-\[26px\] {
    font-size: 26px;
  }
  .sm\:text-\[28px\] {
    font-size: 28px;
  }
  .sm\:text-\[40px\] {
    font-size: 40px;
  }
  .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\:\[grid-template-columns\:minmax\(280px\2c 2fr\)_repeat\(3\2c minmax\(180px\2c 1fr\)\)\] {
    grid-template-columns: minmax(280px,2fr) repeat(3,minmax(180px,1fr));
  }
  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px) {
  .md\:static {
    position: static;
  }
  .md\:absolute {
    position: absolute;
  }
  .md\:left-\[260px\] {
    left: 260px;
  }
  .md\:right-auto {
    right: auto;
  }
  .md\:top-\[80px\] {
    top: 80px;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:block {
    display: block;
  }
  .md\:inline {
    display: inline;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:table-cell {
    display: table-cell;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:h-10 {
    height: 2.5rem;
  }
  .md\:h-16 {
    height: 4rem;
  }
  .md\:h-\[280px\] {
    height: 280px;
  }
  .md\:h-\[540px\] {
    height: 540px;
  }
  .md\:w-\[260px\] {
    width: 260px;
  }
  .md\:w-\[380px\] {
    width: 380px;
  }
  .md\:w-\[640px\] {
    width: 640px;
  }
  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:min-w-\[360px\] {
    min-width: 360px;
  }
  .md\:max-w-\[420px\] {
    max-width: 420px;
  }
  .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-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\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-\[100px_1fr\] {
    grid-template-columns: 100px 1fr;
  }
  .md\:grid-cols-\[180px_1fr\] {
    grid-template-columns: 180px 1fr;
  }
  .md\:grid-cols-\[1fr_1fr_1fr\] {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .md\:grid-cols-\[320px_1fr\] {
    grid-template-columns: 320px 1fr;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:gap-3 {
    gap: 0.75rem;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\: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));
  }
  .md\: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));
  }
  .md\:border-t {
    border-top-width: 1px;
  }
  .md\:border-\[\#1E1E1E\] {
    --tw-border-opacity: 1;
    border-color: rgb(30 30 30 / 1);
    border-color: rgb(30 30 30 / var(--tw-border-opacity, 1));
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-12 {
    padding: 3rem;
  }
  .md\:p-16 {
    padding: 4rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:p-5 {
    padding: 1.25rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .md\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .md\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .md\:pt-4 {
    padding-top: 1rem;
  }
  .md\:pt-\[260px\] {
    padding-top: 260px;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-\[13px\] {
    font-size: 13px;
  }
  .md\:text-\[14px\] {
    font-size: 14px;
  }
  .md\:text-\[15px\] {
    font-size: 15px;
  }
  .md\:text-\[16px\] {
    font-size: 16px;
  }
  .md\:text-\[18px\] {
    font-size: 18px;
  }
  .md\:text-\[20px\] {
    font-size: 20px;
  }
  .md\:text-\[22px\] {
    font-size: 22px;
  }
  .md\:text-\[24px\] {
    font-size: 24px;
  }
  .md\:text-\[26px\] {
    font-size: 26px;
  }
  .md\:text-\[28px\] {
    font-size: 28px;
  }
  .md\:text-\[32px\] {
    font-size: 32px;
  }
  .md\:text-\[40px\] {
    font-size: 40px;
  }
  .md\:text-\[56px\] {
    font-size: 56px;
  }
  .md\:text-\[64px\] {
    font-size: 64px;
  }
  .md\:text-\[80px\] {
    font-size: 80px;
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .lg\:absolute {
    position: absolute;
  }
  .lg\:relative {
    position: relative;
  }
  .lg\:sticky {
    position: -webkit-sticky;
    position: sticky;
  }
  .lg\:left-0 {
    left: 0px;
  }
  .lg\:right-0 {
    right: 0px;
  }
  .lg\:top-3 {
    top: 0.75rem;
  }
  .lg\:top-4 {
    top: 1rem;
  }
  .lg\:top-6 {
    top: 1.5rem;
  }
  .lg\:top-\[104px\] {
    top: 104px;
  }
  .lg\:z-auto {
    z-index: auto;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .lg\:mb-8 {
    margin-bottom: 2rem;
  }
  .lg\:mt-0 {
    margin-top: 0px;
  }
  .lg\:mt-4 {
    margin-top: 1rem;
  }
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:table-cell {
    display: table-cell;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:h-9 {
    height: 2.25rem;
  }
  .lg\:h-fit {
    height: -webkit-fit-content;
    height: fit-content;
  }
  .lg\:max-h-\[calc\(100vh-120px\)\] {
    max-height: calc(100vh - 120px);
  }
  .lg\:w-72 {
    width: 18rem;
  }
  .lg\:w-\[42\%\] {
    width: 42%;
  }
  .lg\:w-\[760px\] {
    width: 760px;
  }
  .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\:transform-none {
    transform: none;
  }
  .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-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1\.2fr_1fr\] {
    grid-template-columns: 1.2fr 1fr;
  }
  .lg\:grid-cols-\[1fr_180px_180px_auto_auto\] {
    grid-template-columns: 1fr 180px 180px auto auto;
  }
  .lg\:grid-cols-\[1fr_1fr\] {
    grid-template-columns: 1fr 1fr;
  }
  .lg\:grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }
  .lg\:grid-cols-\[260px\2c 1fr\] {
    grid-template-columns: 260px 1fr;
  }
  .lg\:grid-cols-\[260px_1fr\] {
    grid-template-columns: 260px 1fr;
  }
  .lg\:grid-cols-\[300px_1fr\] {
    grid-template-columns: 300px 1fr;
  }
  .lg\:grid-cols-\[320px_1fr\] {
    grid-template-columns: 320px 1fr;
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_420px\] {
    grid-template-columns: minmax(0,1fr) 420px;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:justify-center {
    justify-content: center;
  }
  .lg\:gap-12 {
    gap: 3rem;
  }
  .lg\:gap-24 {
    gap: 6rem;
  }
  .lg\:gap-5 {
    gap: 1.25rem;
  }
  .lg\:gap-6 {
    gap: 1.5rem;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:overflow-y-auto {
    overflow-y: auto;
  }
  .lg\:rounded-2xl {
    border-radius: 1rem;
  }
  .lg\:p-6 {
    padding: 1.5rem;
  }
  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:px-\[100px\] {
    padding-left: 100px;
    padding-right: 100px;
  }
  .lg\:px-\[50px\] {
    padding-left: 50px;
    padding-right: 50px;
  }
  .lg\:px-\[60px\] {
    padding-left: 60px;
    padding-right: 60px;
  }
  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lg\:pl-10 {
    padding-left: 2.5rem;
  }
  .lg\:pt-8 {
    padding-top: 2rem;
  }
  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .lg\:text-\[13\.5px\] {
    font-size: 13.5px;
  }
  .lg\:text-\[15px\] {
    font-size: 15px;
  }
  .lg\:text-\[16px\] {
    font-size: 16px;
  }
  .lg\:text-\[2\.25rem\] {
    font-size: 2.25rem;
  }
  .lg\:text-\[22px\] {
    font-size: 22px;
  }
  .lg\:text-\[28px\] {
    font-size: 28px;
  }
  .lg\:text-\[34px\] {
    font-size: 34px;
  }
  .lg\:text-\[38px\] {
    font-size: 38px;
  }
  .lg\:text-\[40px\] {
    font-size: 40px;
  }
  .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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .lg\:\[grid-template-columns\:repeat\(3\2c minmax\(240px\2c 1fr\)\)\] {
    grid-template-columns: repeat(3,minmax(240px,1fr));
  }
}
@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .xl\:mt-2 {
    margin-top: 0.5rem;
  }
  .xl\:mt-6 {
    margin-top: 1.5rem;
  }
  .xl\:table-cell {
    display: table-cell;
  }
  .xl\:h-\[320px\] {
    height: 320px;
  }
  .xl\:w-\[420px\] {
    width: 420px;
  }
  .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\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:grid-cols-\[340px_1fr\] {
    grid-template-columns: 340px 1fr;
  }
  .xl\:grid-cols-\[400px_1fr_220px\] {
    grid-template-columns: 400px 1fr 220px;
  }
  .xl\:flex-col {
    flex-direction: column;
  }
  .xl\:items-stretch {
    align-items: stretch;
  }
  .xl\:gap-3 {
    gap: 0.75rem;
  }
  .xl\:border-t-0 {
    border-top-width: 0px;
  }
  .xl\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .xl\:px-\[100px\] {
    padding-left: 100px;
    padding-right: 100px;
  }
  .xl\:pt-0 {
    padding-top: 0px;
  }
  .xl\:text-\[24px\] {
    font-size: 24px;
  }
}
.\[\&\+div\]\:text-xs+div {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
  border-top-right-radius: calc(0.75rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.75rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
  border-top-left-radius: calc(0.75rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.75rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
  border-radius: calc(0.75rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(240 5% 96%);
  background-color: hsl(var(--accent));
}
.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(0.75rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.75rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(0.75rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.75rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(240 5% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(0.75rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.75rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}
.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(0 84% 60%);
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(240 10% 4%);
  color: hsl(var(--foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(240 4% 46%);
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

/* ────────────────────────────────────────────────────────────────
 * BIBI Cars — Adaptive i18n layout protection (v2 — mobile-safe)
 *
 * Purpose: gracefully handle longer BG / UK translations in admin
 * chrome WITHOUT breaking short uppercase labels or whitespace-nowrap
 * intent on horizontally-scrollable tabs/tables.
 *
 * Key principles of v2 vs v1:
 *   • Never use `overflow-wrap: anywhere` globally — it breaks short
 *     labels like "TYPE", "DEALS", "Customer Legal" into one letter
 *     per line when columns get squeezed on small screens.
 *   • Respect explicit `whitespace-nowrap` (Tailwind) on tabs/buttons.
 *   • Allow tables to overflow horizontally on mobile (no clamp).
 *   • Apply heavy wrapping only to *known* long-text containers
 *     (.kpi-label, modal headings, form labels) where it is safe.
 *
 * Scope: `.admin-layout` only — public Figma-pixel site untouched.
 * ──────────────────────────────────────────────────────────────── */

/* 1. KPI / stat cards: ensure label fits, but only here -------------- */
.admin-layout .kpi-label,
.admin-layout .stat-label,
.admin-layout .metric-label {
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* 2. Sidebar nav items: scale font on long BG/UK strings ------------ */
body[data-app-lang="bg"] .admin-layout nav a,
body[data-app-lang="uk"] .admin-layout nav a,
body[data-app-lang="bg"] .admin-layout .nav-item,
body[data-app-lang="uk"] .admin-layout .nav-item {
  font-size: 13px;
  line-height: 1.3;
}

/* 3. Modal / dialog titles: ellipsis if overflow -------------------- */
.admin-layout [role="dialog"] h1,
.admin-layout [role="dialog"] h2,
.admin-layout [role="dialog"] h3 {
  overflow-wrap: break-word;
  word-break: normal;
}

/* 4. Form labels: word-level wrap only ------------------------------ */
.admin-layout label {
  overflow-wrap: break-word;
  word-break: normal;
}

/* 5. Mobile (< 768px) tightening for BG / UK ------------------------ */
@media (max-width: 768px) {
  body[data-app-lang="bg"] .admin-layout,
  body[data-app-lang="uk"] .admin-layout {
    font-size: 13px;
  }
  body[data-app-lang="bg"] .admin-layout h1,
  body[data-app-lang="uk"] .admin-layout h1 {
    font-size: clamp(18px, 4.5vw, 24px);
    line-height: 1.2;
  }
  body[data-app-lang="bg"] .admin-layout h2,
  body[data-app-lang="uk"] .admin-layout h2 {
    font-size: clamp(16px, 4vw, 20px);
  }
}

/* 6. Auto-wrap toolbars that contain many filter chips -------------- */
.admin-layout .toolbar,
.admin-layout .header-actions,
.admin-layout .crm-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

/* 7. Tab triggers (Radix or generic role=tab):
 *    DO NOT char-break — instead let the parent scroll horizontally.
 *    This is what enables proper mobile tab rows. ------------------- */
.admin-layout [role="tablist"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-layout [role="tablist"] [role="tab"] {
  white-space: nowrap;
  word-break: normal;
  flex-shrink: 0;
  padding-inline: 0.75rem;
}

/* 8. Dropdown menu items -------------------------------------------- */
.admin-layout [role="menu"] [role="menuitem"],
.admin-layout .dropdown-item {
  white-space: normal;
  overflow-wrap: break-word;
  min-height: 32px;
}

/* 9. Tables — allow horizontal scroll, NEVER char-break headers ----- */
.admin-layout table th {
  white-space: nowrap;            /* short uppercase headers stay on 1 line */
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.2;
  vertical-align: middle;
}
.admin-layout table td {
  word-break: normal;
  overflow-wrap: break-word;       /* long values (emails, IDs) wrap at spaces */
}

/* 10. Tooltip text wrapping ----------------------------------------- */
.admin-layout [data-radix-tooltip-content],
.admin-layout .tooltip-content {
  max-width: 280px;
  white-space: normal;
}

/* 11. Compact mobile header layout (cabinet hub) -------------------- */
@media (max-width: 640px) {
  .admin-layout header > div {
    gap: 0.375rem !important;        /* gap-1.5 */
  }
  .admin-layout header .icon-btn,
  .admin-layout header button[data-testid="mobile-search-btn"],
  .admin-layout header button[data-testid="lang-switcher-btn"],
  .admin-layout header button[data-testid="global-tracker-btn"],
  .admin-layout header [data-testid="notification-bell-button"] {
    padding: 0.375rem !important;
  }
}

/* 12. NotificationBell popover — safe positioning on mobile --------- */
@media (max-width: 480px) {
  [data-testid="notification-dropdown"] {
    position: fixed !important;
    top: 64px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* end i18n adaptive v2 ---------------------------------------------- */

/* ============================================================
   reveal.global.css — universal animation primitives.

   These classes can be slapped onto ANY existing element to get
   the site-wide reveal motion without changing the DOM tree.
   Use together with `useInView()` which toggles `.is-visible` on
   a parent element when it scrolls into view.

   Pattern:
     const [ref, visible] = useInView();
     <div ref={ref} className={visible ? 'is-visible' : ''}>
       <Card className="reveal reveal--fade-up" style={{animationDelay: '0ms'}}/>
       <Card className="reveal reveal--fade-up" style={{animationDelay: '80ms'}}/>
       <Card className="reveal reveal--fade-up" style={{animationDelay: '160ms'}}/>
     </div>

   The keyframes match the hero's `cubic-bezier(0.22, 1, 0.36, 1)`
   ease-out-quint, ~760ms duration — so the entire site speaks
   one motion language.
   ============================================================ */

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}
.reveal--fade-up {
  transform: translate3d(0, 28px, 0);
}
.reveal--slide-left {
  transform: translate3d(-72px, 0, 0);
}
.reveal--fade {
  transform: none;
}
.reveal--block-pop {
  transform: scale(0.94);
}

.is-visible .reveal,
.reveal.is-visible {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-duration: 900ms;
}

.is-visible .reveal--fade-up,
.reveal--fade-up.is-visible {
  animation-name: bibiRevealFadeUp;
}
.is-visible .reveal--slide-left,
.reveal--slide-left.is-visible {
  animation-name: bibiRevealSlideLeft;
}
.is-visible .reveal--fade,
.reveal--fade.is-visible {
  animation-name: bibiRevealFade;
}
.is-visible .reveal--block-pop,
.reveal--block-pop.is-visible {
  animation-name: bibiRevealBlockPop;
}

@keyframes bibiRevealFadeUp {
  0%   { opacity: 0; transform: translate3d(0, 28px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes bibiRevealSlideLeft {
  0%   { opacity: 0; transform: translate3d(-72px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes bibiRevealFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bibiRevealBlockPop {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   stagger-children — drop-in cascade for any existing container.

   Usage:
     const [ref, inView] = useInView();
     <div ref={ref} className={`my-grid ${inView ? 'is-visible' : ''}`}
          data-stagger="80">
       <Card/><Card/><Card/>
     </div>

   • Each direct child starts hidden (opacity:0, translateY:28px)
   • When `.is-visible` is added on the parent, children fade-up in
     sequence, 80ms (default) apart.
   • Override the gap by passing `data-stagger="<ms>"` and the
     extra rules below pick it up automatically.

   The keyframe is the same `bibiRevealFadeUp` used by the manual
   `.reveal--fade-up` class, so every cascade across the site looks
   identical to the hero motion.
   ============================================================ */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
}
[data-stagger].is-visible > * {
  animation: bibiRevealFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger delays — applied to nth children. Default step is 80ms,
   but containers can override with `style="--stagger-step:120ms"`. */
[data-stagger] {
  --stagger-step: 80ms;
}
[data-stagger].is-visible > *:nth-child(1)  { animation-delay: calc(var(--stagger-step) * 0); }
[data-stagger].is-visible > *:nth-child(2)  { animation-delay: calc(var(--stagger-step) * 1); }
[data-stagger].is-visible > *:nth-child(3)  { animation-delay: calc(var(--stagger-step) * 2); }
[data-stagger].is-visible > *:nth-child(4)  { animation-delay: calc(var(--stagger-step) * 3); }
[data-stagger].is-visible > *:nth-child(5)  { animation-delay: calc(var(--stagger-step) * 4); }
[data-stagger].is-visible > *:nth-child(6)  { animation-delay: calc(var(--stagger-step) * 5); }
[data-stagger].is-visible > *:nth-child(7)  { animation-delay: calc(var(--stagger-step) * 6); }
[data-stagger].is-visible > *:nth-child(8)  { animation-delay: calc(var(--stagger-step) * 7); }
[data-stagger].is-visible > *:nth-child(9)  { animation-delay: calc(var(--stagger-step) * 8); }
[data-stagger].is-visible > *:nth-child(10) { animation-delay: calc(var(--stagger-step) * 9); }
[data-stagger].is-visible > *:nth-child(11) { animation-delay: calc(var(--stagger-step) * 10); }
[data-stagger].is-visible > *:nth-child(12) { animation-delay: calc(var(--stagger-step) * 11); }
/* Extra ranks for paginated grids ("Show more +" appends 6 more rows). */
[data-stagger].is-visible > *:nth-child(13) { animation-delay: calc(var(--stagger-step) * 12); }
[data-stagger].is-visible > *:nth-child(14) { animation-delay: calc(var(--stagger-step) * 13); }
[data-stagger].is-visible > *:nth-child(15) { animation-delay: calc(var(--stagger-step) * 14); }
[data-stagger].is-visible > *:nth-child(16) { animation-delay: calc(var(--stagger-step) * 15); }
[data-stagger].is-visible > *:nth-child(17) { animation-delay: calc(var(--stagger-step) * 16); }
[data-stagger].is-visible > *:nth-child(18) { animation-delay: calc(var(--stagger-step) * 17); }
[data-stagger].is-visible > *:nth-child(19) { animation-delay: calc(var(--stagger-step) * 18); }
[data-stagger].is-visible > *:nth-child(20) { animation-delay: calc(var(--stagger-step) * 19); }
[data-stagger].is-visible > *:nth-child(21) { animation-delay: calc(var(--stagger-step) * 20); }
[data-stagger].is-visible > *:nth-child(22) { animation-delay: calc(var(--stagger-step) * 21); }
[data-stagger].is-visible > *:nth-child(23) { animation-delay: calc(var(--stagger-step) * 22); }
[data-stagger].is-visible > *:nth-child(24) { animation-delay: calc(var(--stagger-step) * 23); }
/* Cap delays at the 24th child — any further siblings just snap-in. */
[data-stagger].is-visible > *:nth-child(n+25) { animation-delay: calc(var(--stagger-step) * 23); }

/* Also support a parent ancestor carrying `.is-visible`: useful when a
   single IntersectionObserver lives on a section wrapper and we want
   multiple `[data-stagger]` rows inside it to all cascade together. */
.is-visible [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
  animation: bibiRevealFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.is-visible [data-stagger] > *:nth-child(1)  { animation-delay: calc(80ms * 0); animation-delay: calc(var(--stagger-step, 80ms) * 0); }
.is-visible [data-stagger] > *:nth-child(2)  { animation-delay: calc(80ms * 1); animation-delay: calc(var(--stagger-step, 80ms) * 1); }
.is-visible [data-stagger] > *:nth-child(3)  { animation-delay: calc(80ms * 2); animation-delay: calc(var(--stagger-step, 80ms) * 2); }
.is-visible [data-stagger] > *:nth-child(4)  { animation-delay: calc(80ms * 3); animation-delay: calc(var(--stagger-step, 80ms) * 3); }
.is-visible [data-stagger] > *:nth-child(5)  { animation-delay: calc(80ms * 4); animation-delay: calc(var(--stagger-step, 80ms) * 4); }
.is-visible [data-stagger] > *:nth-child(6)  { animation-delay: calc(80ms * 5); animation-delay: calc(var(--stagger-step, 80ms) * 5); }
.is-visible [data-stagger] > *:nth-child(7)  { animation-delay: calc(80ms * 6); animation-delay: calc(var(--stagger-step, 80ms) * 6); }
.is-visible [data-stagger] > *:nth-child(8)  { animation-delay: calc(80ms * 7); animation-delay: calc(var(--stagger-step, 80ms) * 7); }

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

.c-o-n-t-a-c-t-s1_contacts__-L6rK {
  height: var(--height-24);
  width: 69px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-5) var(--padding-0);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.c-o-n-t-a-c-t-s1_contacts2__Yopf7 {
  height: var(--height-19);
  width: var(--width-78);
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
}

.b-u-t-t-o-n1_button__TOZtr,
.b-u-t-t-o-n1_contactUs__zfKFe {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── Button (Figma: 171 × 45). Becomes adaptive when the label is
 * longer than English (BG: "СВЪРЖЕТЕ СЕ С НАС" → ~16 chars vs EN 10).
 * Uses min-width so EN layout is byte-identical to Figma, but BG can
 * expand horizontally without breaking the text. */
.b-u-t-t-o-n1_button__TOZtr {
  cursor: pointer;
  border: 0;
  padding: 0 24px;
  background-color: var(--color-orange-100);
  height: 45px;
  min-width: var(--width-171);
  width: auto;
  border-radius: var(--br-6);
  box-sizing: border-box;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.b-u-t-t-o-n1_button__TOZtr:hover { opacity: 0.9; }
.b-u-t-t-o-n1_contactUs__zfKFe {
  height: auto;
  flex: 1 1;
  position: relative;
  /* H Medium 14 px per Figma spec — uppercase, weight 500. */
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-family: var(--font-mazzard);
  color: var(--color-black);
  text-align: center;
  text-transform: uppercase;
}

/* ── Right-side controls (language, profile, CONTACT US) ─────────────────
 * Figma export originally used `margin-bottom: -1046px` together with
 * `height: 1089.5px` + `gap: 999.5px` so a "ghost" outline CONTACT US could
 * be stacked far above a solid yellow one (clipped by the header's
 * `align-items: flex-end`). That hack was visually fragile and at certain
 * viewports the second button overflowed the header (tall yellow strip).
 *
 * Replaced with a clean centered flex row: profile, language picker and
 * ONE solid CONTACT US button (171 × 45 per Figma spec) all vertically
 * centered inside the 100 px tall header. */
.frame-component17_languageSelectParent__jfAyz {
  height: var(--height-100);
  width: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-gainsboro-100);
  font-family: var(--font-mazzard);
  margin-bottom: 0;
  padding-right: 0;
}
.frame-component17_languageOptions__5zajk,
.frame-component17_languageSelect__pTblG {
  display: flex;
  align-items: center;
}
.frame-component17_languageSelect__pTblG {
  height: auto;
  width: auto;
  flex-direction: row;
  padding: 0;
  box-sizing: border-box;
}
.frame-component17_languageOptions__5zajk {
  gap: var(--gap-3);
}
.frame-component17_languageOption__9ZsIf {
  display: flex;
  align-items: center;
}
/* ── Active language label (Figma: 31 × 17 hug, Mazzard H Regular 14) ────── */
.frame-component17_eng__7mGiH {
  position: relative;
  width: 31px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 400;        /* Regular */
  font-size: 14px;
  line-height: 17px;        /* matches the 17 px hug height */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
/* ── Dropdown chevron (Figma: 16 × 16) ────────────────────────────────────── */
.frame-component17_lsicondownFilled__eNt2s {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  display: block;
}
.frame-component17_iconamoonprofileLightWrapper__cSYS\+ {
  height: 24px;
  width: var(--width-24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}
.frame-component17_iconamoonprofileLight__6DxxO {
  width: 100%;
  position: relative;
  max-height: 100%;
  height: auto;
}
.frame-component17_actionButtons__lrqrn {
  min-width: 171px;
  width: auto;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The ghost outline duplicate (kept in JSX for backward-compat) is hidden;
 * only the solid yellow CONTACT US 171 × 45 is rendered. */
.frame-component17_contactButtons__hGA43 {
  display: none;
}

/* VinSearchDropdown — typeahead panel rendered below header / hero search inputs.
   Dark variant matches the BIBI public chrome (#0A0A0B + #FEAE00 accent). */

.vinsd-panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 1100;                        /* above sticky header (header z=1000) */
  max-height: 480px;
  overflow-y: auto;
  border-radius: 8px;                   /* Figma: 8 (same as search bar) */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-family: "Mazzard H", system-ui, sans-serif;
  font-family: var(--font-mazzard, "Mazzard H", system-ui, sans-serif);
  animation: vinsd-pop 140ms ease-out both;
  min-width: 459px;                     /* match search bar width */
}
@keyframes vinsd-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.vinsd-align-left  { left: 0; }
.vinsd-align-right { right: 0; }

.vinsd-dark {
  background: #18191A;                  /* match platform bg */
  border: 1px solid #2A2B2C;
  color: #ECECEC;
}
.vinsd-light {
  background: #ffffff;
  border: 1px solid #E5E5E7;
  color: #0A0A0B;
}

/* State rows ------------------------------------------------------------- */
.vinsd-state {
  padding: 18px 20px;
  font-size: 14px;
  color: #B8B8B8;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vinsd-state--error { color: #FF8080; }
.vinsd-q {
  color: #FEAE00;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(254, 174, 0, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 4px;
}
.vinsd-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(254, 174, 0, 0.25);
  border-top-color: #FEAE00;
  border-radius: 50%;
  display: inline-block;
  animation: vinsd-spin 0.7s linear infinite;
}
@keyframes vinsd-spin { to { transform: rotate(360deg); } }

/* List ------------------------------------------------------------------- */
.vinsd-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vinsd-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.vinsd-item:hover,
.vinsd-item.is-hover {
  background: rgba(254, 174, 0, 0.07);
  border-color: rgba(254, 174, 0, 0.35);
}
.vinsd-thumb {
  width: 76px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #25252a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vinsd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vinsd-thumb-fallback {
  font-size: 11px;
  font-weight: 700;
  color: #FEAE00;
  letter-spacing: 0.08em;
}
.vinsd-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vinsd-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.vinsd-light .vinsd-title { color: #0A0A0B; }
.vinsd-sub {
  font-size: 12px;
  color: #b8b8b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vinsd-light .vinsd-sub { color: #525258; }
.vinsd-vin {
  font-size: 11px;
  color: #FEAE00;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}

/* Chips ----------------------------------------------------------------- */
.vinsd-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.vinsd-chip--live {
  background: rgba(56, 224, 122, 0.12);
  color: #38E07A;
  border: 1px solid rgba(56, 224, 122, 0.35);
}
.vinsd-chip--stale {
  background: rgba(255, 255, 255, 0.06);
  color: #b8b8b8;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Footer CTA ------------------------------------------------------------ */
.vinsd-footer {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vinsd-light .vinsd-footer { border-top-color: #E5E5E7; }
.vinsd-cta {
  width: 100%;
  padding: 10px 12px;
  background: rgba(254, 174, 0, 0.1);
  border: 1px dashed rgba(254, 174, 0, 0.4);
  border-radius: 8px;
  color: #FEAE00;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.vinsd-cta:hover {
  background: rgba(254, 174, 0, 0.18);
  border-color: #FEAE00;
}
.vinsd-cta strong {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}

/* Compact mobile sizing -------------------------------------------------- */
@media (max-width: 720px) {
  /* Constrain dropdown to viewport width — anchor left+right relative to
   * the search bar parent so it never overflows the screen edge.  The
   * inline `width` prop is overridden via !important so the desktop
   * 459 px value can't bring the panel off-screen on small viewports. */
  .vinsd-panel {
    max-height: 60vh;
    min-width: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .vinsd-item { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 8px; }
  .vinsd-thumb { width: 60px; height: 44px; }
  .vinsd-title { font-size: 13px; }
}

.header1_bibiLogo021Parent__mYio9,
.header1_header__tb322 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header1_header__tb322 {
  width: var(--width-1920);
  height: var(--height-100);
  background-color: var(--color-gray-200);
  overflow: visible;
  padding: 0 32px;
  box-sizing: border-box;
  gap: 40px;
  z-index: 5;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
  justify-content: space-between;
}
.header1_bibiLogo021Parent__mYio9 {
  height: 48.2px;
  width: auto;
  gap: 51px;
  z-index: 2;
  flex-shrink: 0;
}
.header1_bibiLogo021Icon__QekJC {
  height: 48.2px;
  width: 141px;
  position: relative;
  z-index: 2;
}
.header1_frameWrapper__X4pBO {
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  z-index: 1;
}
.header1_contactsParent__GAahe {
  margin: 0;
  width: auto;
  display: flex;
  align-items: center;
  gap: 55px;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.header1_headerInner__\+jkIg {
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  z-index: 1;
  flex-shrink: 0;
}
.header1_searchInputParent__BEbKA {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.header1_searchInput__1K96B,
.header1_searchInputChild__S-fJN {
  border-radius: 8px;                   /* Figma: corner radius 8 */
  box-sizing: border-box;
}
.header1_searchInput__1K96B {
  height: 40px;                         /* Figma: 459 × 40 */
  width: 459px;
  display: flex;
  align-items: center;
  padding: 0 16px 0 9px;                /* Figma: 9 px to magnifier */
  position: relative;
  isolation: isolate;
  z-index: 2;
}
.header1_searchInputChild__S-fJN {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #2C2D2A;
  background: transparent;
  z-index: 0;
  flex-shrink: 0;
}
.header1_boxiconssearchParent__AujPw {
  display: flex;
  align-items: center;
  gap: 9px;                             /* Figma: 9 px from icon to input */
  z-index: 1;
  flex-shrink: 0;
  flex: 1 1;
  min-width: 0;
}
.header1_boxiconssearch__DC9mG {
  width: 24px;                          /* Figma: 24 × 24 */
  height: 24px;
  position: relative;
}
.header1_searchByVin__AjspM {
  flex: 1 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                     /* Mazzard H Regular */
  font-size: 14px;                      /* Figma: 14 */
  background-color: transparent;
  position: relative;
  color: #FFFFFF;
  text-align: left;
  display: inline-block;
  padding: 0;
}
.header1_searchByVin__AjspM::placeholder { color: #5E5E5E; }
.header1_searchByVin__AjspM:focus { outline: 0; }
.header1_searchInput__1K96B:focus-within .header1_searchInputChild__S-fJN { border-color: #FEAE00; }
.header1_searchInputItem__Ye3-m {
  height: var(--height-30);
  width: 278px;
  position: relative;
  background-color: var(--color-gainsboro-200);
  display: none;
  z-index: 2;
  flex-shrink: 0;
}
.header1_placeholder__Hj6Lj {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 1;
  line-height: 1.2;
  /* Phone numbers — Mazzard H SemiBold 16 per Figma spec */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
}
.header1_placeholderContent__MDpKl {
  height: auto;
}
.header1_placeholderContent__MDpKl,
.header1_placeholderContent2__dZhzK {
  width: auto;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  /* Inherit the SemiBold 16 typography from .placeholder so both phone
   * links render identically (was previously inheriting Regular 16 from
   * the header). */
  font-weight: 600;
  font-size: 16px;
}

/* =============================================================================
 * BIBI Cars — Footer (pixel-perfect, anchored to 1920 × 1017 Figma frame)
 * =============================================================================
 *
 * The footer is rendered through <ScaledChrome>, which renders this block at
 * its native 1920px width and `transform: scale(...)`s it down on smaller
 * viewports. That means every element inside this CSS file can use absolute
 * pixel coordinates against the 1920 × 1017 footer frame and the design will
 * remain pixel-perfect at any viewport ≤ 1920.
 *
 * Key anchors (from the latest spec):
 *   • Frame size                                  : 1920 × 1017
 *   • Address column                              : left 958, right 588 (w 374)
 *   • Working hours bottom edge                   : bottom 466.55
 *   • Viber icon bottom edge                      : bottom 301
 *   • Registration address block bottom edge      : bottom 142.24
 *   • "Get in touch" button right offset          : right 358.5
 *
 * All right-column textual items (Address label, Bulgaria addresses, Phone
 * number label, phone numbers, Viber label) share the same left=958 anchor.
 * ========================================================================== */

.footer1_footer__S63fT {
  position: relative;
  width: 1920px;
  /* 1920 × 1025 — designed footer frame (was 1017, +8 px globally per spec). */
  height: 1025px;
  background-color: var(--color-black);
  font-family: 'Mazzard H', var(--font-mazzard);
  color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 10;
}

/* ── BIBI logo (top-left) ─────────────────────────────────────────────────── */
.footer1_logoBlock__PqseQ {
  position: absolute;
  top: 110px;
  left: 100px;
  width: 427px;
  height: 145.9px;
  z-index: 2;
}
.footer1_bibiLogo021Icon__z979c {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Phone block (top, x=958) ─────────────────────────────────────────────── */
.footer1_phoneBlock__xYc6s {
  position: absolute;
  left: 958px;
  top: 138px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
  text-align: left;
}
.footer1_phoneLabel__dgvgy {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 18px;
  line-height: 99.9%;
  text-transform: capitalize;
  color: var(--color-white);
  margin: 0;
}
.footer1_phoneNumbers__9sOoU {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  text-transform: capitalize;
  color: var(--color-orange-100);
  white-space: nowrap;
  margin: 0;
}
.footer1_phoneNumbers__9sOoU a,
.footer1_phoneNumbers__9sOoU span {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Get in Touch CTA (top-right, right=358.5) ────────────────────────────── */
.footer1_ctaButton__1JcIF {
  position: absolute;
  top: 170px;
  right: 358.5px;
  z-index: 2;
}

/* ── Menu links column (left, middle row) ─────────────────────────────────── */
.footer1_menuLinks__yjn99 {
  position: absolute;
  left: 290px;
  top: 414px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  z-index: 2;
}
.footer1_menuLink__0gAzS {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-whitesmoke);
  text-decoration: none;
  margin: 0;
  padding: 0;
  transition: color 0.15s ease;
}
.footer1_menuLink__0gAzS:hover { color: var(--color-orange-100); }

/* ── Address column (label + Bulgaria addresses + working hours)
   Anchored from the bottom so the working-hours bottom edge sits exactly at
   466.55px from the frame bottom. Items stack top→bottom inside it.
   ────────────────────────────────────────────────────────────────────────── */
.footer1_addressColumn__JkD6G {
  position: absolute;
  left: 958px;
  bottom: 466.55px;          /* working hours bottom edge anchor */
  width: 374px;              /* 1920 − 958 − 588 = 374 */
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.footer1_addressLabel__7ksmf {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 18px;
  line-height: 99.9%;
  text-transform: capitalize;
  color: var(--color-white);
  margin: 0 0 21.6px 0;
}
.footer1_addressLines__Enuni {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  text-transform: capitalize;
  color: var(--color-orange-100);
  margin: 0 0 14.4px 0;
  display: flex;
  flex-direction: column;
}
.footer1_addressLines__Enuni span {
  display: block;
  /* Allow natural wrapping when an address line is longer than the
     374px column (notably BG: "България, София, Драгалевци, бул. Витоша
     № 230" is ~25% wider than the EN counterpart). EN baseline was tight
     to begin with — letting it wrap when necessary is preferable to
     overflowing the column. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* BG: addresses (cyrillic) run longer than the 374px column — drop the
   font-size a notch so the lines stay readable and don't wrap mid-name. */
html[lang="bg"] .footer1_addressLines__Enuni {
  font-size: 22px;
}
.footer1_workingHours__Tirnf {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  color: var(--color-gray-100);
  white-space: nowrap;
  margin: 0;
}

/* ── Viber column (label + icon) — left=958, icon bottom edge at 301 ──────── */
.footer1_viberColumn__cx9JP {
  position: absolute;
  left: 958px;
  bottom: 301px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
}
.footer1_viberLabel__fIsB8 {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 14px;
  line-height: 130%;
  text-transform: capitalize;
  color: var(--color-white);
  max-width: 220px;          /* allow 2-line wrap per Figma */
  margin: 0;
}
.footer1_viberIconLink__1IFYk {
  display: inline-flex;
  width: 45px;
  height: 45px;
  line-height: 0;
}
.footer1_viberIcon__pvAx3 {
  width: 45px;
  height: 45px;
  display: block;
}

/* ── Social media column (right side, aligned to CTA's right edge) ────────── */
.footer1_socialColumn__PjXiF {
  position: absolute;
  right: 358.5px;
  bottom: 301px;            /* share row with Viber icon */
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
}
.footer1_socialLabel__He9h5 {
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 14px;
  line-height: 99.9%;
  text-transform: capitalize;
  color: var(--color-white);
  margin: 0;
  white-space: nowrap;
}
.footer1_socialIconsRow__a2Vq3 {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer1_socialIcon__W25td {
  width: 32px;
  height: 32px;
  display: block;
}

/* ── Registration address — left=958, bottom 142.24 ───────────────────────── */
.footer1_registrationBlock__Arj8f {
  position: absolute;
  left: 958px;
  bottom: 142.24px;
  font-family: 'Mazzard H', var(--font-mazzard);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-gray-100);
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
  z-index: 2;
}

/* ── Footer bottom legal bar ─────────────────────────────────────────────── *
 * The legal row ("ALL RIGHT RESERVED…" + policy links + WEBSITE credits) is
 * pinned to the bottom of the footer frame with an 8 px breathing strip
 * underneath so the 2-line "Website design / Website made with Eva-X"
 * column never kisses the page bottom on wide viewports. The footer
 * frame itself is 1920 × 1025 (see `.footer`), so:
 *
 *      ┌────── 1025 px footer ──────┐
 *      │  …other absolute children… │
 *      │  legal bar (height ≈ 40)   │ ← bottom: 8 px
 *      │  ━━ 8 px black strip ━━    │
 *      └────────────────────────────┘
 *
 * Everything else inside the 1920 × 1025 frame remains anchored exactly
 * as the Figma export specifies.
 */
.footer1_footerBottom__SmqQx {
  position: absolute;
  left: 100px;
  right: 100px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  z-index: 2;
  font-family: 'Mazzard H', var(--font-mazzard);
  font-size: 14px;
  color: var(--color-white);
}
.footer1_copyrightInfo__g2o4C {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 3;
}
.footer1_antDesigncopyrightCircleOuIcon__1ftWC {
  width: 18px;
  height: 18px;
  display: block;
}
.footer1_allRightReserved__XaCY2 {
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer1_companyInfo__hDGFx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
.footer1_vatBg206637283Parent__OgPnM {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: nowrap;
}
.footer1_pmAutoGroup__lS3IO,
.footer1_conditions__KOoK0 {
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer1_policyLinks__FsCdh {
  display: flex;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.footer1_policyLinkBtn__ETE7F {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s ease;
}
.footer1_policyLinkBtn__ETE7F:hover { color: var(--color-orange-100); }
.footer1_policyLinkBtn__ETE7F:focus-visible {
  outline: 2px solid rgba(254, 174, 0, 0.6);
  outline-offset: 4px;
  border-radius: 2px;
}
.footer1_websiteCredits__jWG\+c {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  font-size: 14px;
  text-align: right;
  z-index: 2;
}
.footer1_websiteDesign__otGxa {
  position: relative;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.footer1_websiteDesign__otGxa:hover { color: var(--color-orange-100); }

/* =============================================================================
 * BIBI Cars — About Us page (V6 — PIXEL-PERFECT Figma 1920×5031)
 *
 * Точные координаты с canvas Figma (1920×5031):
 *
 *   FRAME 1 (y=858–1333)
 *     • IMG-0463 (big landscape) :  x=108  y=858   634×475
 *     • TEXT  "Our company..."   :  x≈978  y≈858    ~830×~120
 *     • IMG-0450 (small portrait):  x=1215 y=1030   214×303
 *
 *   FRAME 2 (y=1480–2311)
 *     • HEADLINE "We combine..." :  x≈275  y≈1480  1126×141
 *     • image-84 (small portrait):  x=307  y=1699   236×314
 *     • TEXT "We'll help..."     :  x≈960  y≈1820   ~860×120
 *     • IMG-8461 (big landscape) :  x=928  y=1903   725×408
 *
 *   CTA / Quick Call card        :  x=678  y=3534   564×268
 *
 * На десктопе (≥1024px) фото/тексты позиционируются ABSOLUTE с процентами от
 * 1920px ⇒ pixel-perfect воспроизведение Figma.
 * На планшете/мобильном переключаемся в flex-column.
 * ========================================================================== */

:root {
  --bibi-yellow: #FEAE00;
  --bibi-bg-dark: #1D1D1B;
  --bibi-black: #000;
  --bibi-white: #FFF;
  --bibi-border: #555452;
  --bibi-text-mute: #5E5E5E;
  --bibi-text-mute-2: #949494;

  --bibi-font: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* --bibi-font-helv aliased to the brand family — Helvetica Now Display
     was retired so all numeric / phone callouts now share Mazzard. */
  --bibi-font-helv: var(--bibi-font);

  --bibi-container: 1920px;
  --bibi-container-pad: 100px;
}

.bibi-about,
.bibi-about * { box-sizing: border-box; }

.bibi-about {
  width: 100%;
  background: #000;
  background: var(--bibi-black);
  color: #FFF;
  color: var(--bibi-white);
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.bibi-container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
  padding: 0 var(--bibi-container-pad);
}

.bibi-accent { color: #FEAE00; color: var(--bibi-yellow); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.bibi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  padding: 0 32px;
  height: 45px;
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.05s ease;
  white-space: nowrap;
}
.bibi-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bibi-btn:hover:not(:disabled) { filter: brightness(1.08); }
.bibi-btn:active:not(:disabled) { transform: translateY(1px); }
.bibi-btn--primary { background: #FEAE00; background: var(--bibi-yellow); color: #000; }
.bibi-btn--ghost {
  background: transparent;
  color: #FEAE00;
  color: var(--bibi-yellow);
  border: 1px solid #FEAE00;
  border: 1px solid var(--bibi-yellow);
}
.bibi-btn--ghost:hover:not(:disabled) {
  background: rgba(254, 174, 0, 0.1);
  filter: none;
}

/* =============================================================================
 *  HEADER
 * ========================================================================== */

.bibi-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #1D1D1B;
  background: var(--bibi-bg-dark);
  height: 100px;
}
.bibi-header__inner {
  max-width: 1720px;
  margin: 0 auto;
  height: 100%;
  padding: 0 100px;
  padding: 0 var(--bibi-container-pad);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 32px);
}
.bibi-header__logo { display: block; flex-shrink: 0; }
.bibi-header__logo img { display: block; height: 48px; width: auto; }
.bibi-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 40px);
  margin-left: clamp(8px, 1.6vw, 32px);
}
.bibi-header__nav-link {
  color: #FFF;
  color: var(--bibi-white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.bibi-header__nav-link:hover,
.bibi-header__nav-link.is-active { color: #FEAE00; color: var(--bibi-yellow); }

.bibi-header__search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 277px;
  min-width: 180px;
  height: 39px;
  padding: 0 11px;
  border: 1px solid #555452;
  border: 1px solid var(--bibi-border);
  border-radius: 7.5px;
  background: transparent;
}
.bibi-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.bibi-header__search img,
.bibi-header__search-btn img { width: 22px; height: 22px; opacity: 0.85; }
.bibi-header__search input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  color: #FFF;
  color: var(--bibi-white);
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font-helv);
  font-size: 14px;
  min-width: 0;
}
.bibi-header__search input::placeholder { color: #5E5E5E; color: var(--bibi-text-mute); }

.bibi-header__phones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 16px;
  font-weight: 500;
  color: #FEAE00;
  color: var(--bibi-yellow);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.bibi-header__phones a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-weight: inherit;
}
.bibi-header__lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.bibi-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: #E8E8E8;
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 4px;
}
.bibi-header__lang:hover { color: #FEAE00; color: var(--bibi-yellow); }
.bibi-header__lang-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.bibi-header__lang-arrow.is-open { transform: rotate(180deg); }

.bibi-header__lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 88px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #1D1D1B;
  background: var(--bibi-bg-dark);
  border: 1px solid #555452;
  border: 1px solid var(--bibi-border);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.bibi-header__lang-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #FFF;
  color: var(--bibi-white);
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bibi-header__lang-item:hover {
  background: rgba(254, 174, 0, 0.12);
  color: #FEAE00;
  color: var(--bibi-yellow);
}
.bibi-header__lang-item.is-active { color: #FEAE00; color: var(--bibi-yellow); }
.bibi-header__profile { display: flex; align-items: center; }
.bibi-header__profile img { width: 24px; height: 24px; }
.bibi-header__cta { width: 171px; padding: 0 16px; flex-shrink: 0; }

.bibi-header__burger {
  display: none;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.bibi-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FEAE00;
  background: var(--bibi-yellow);
  transition: transform 0.25s, opacity 0.25s;
}
.bibi-header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bibi-header__burger.is-open span:nth-child(2) { opacity: 0; }
.bibi-header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =============================================================================
 *  HERO
 * ========================================================================== */

.bibi-hero {
  background: #000;
  background: var(--bibi-black);
  /* Figma: breadcrumb y≈350, About Us h1 y≈486, tagline y≈623 → frame1 y=858 */
  padding: clamp(56px, 4.5vw, 87px) 0 clamp(60px, 6.6vw, 127px);
}
.bibi-breadcrumb {
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 600;
  text-transform: uppercase;
  color: #5E5E5E;
  color: var(--bibi-text-mute);
}
.bibi-breadcrumb a { color: #5E5E5E; color: var(--bibi-text-mute); text-decoration: none; }
.bibi-breadcrumb a:hover { color: #FEAE00; color: var(--bibi-yellow); }
.bibi-breadcrumb span { color: #FEAE00; color: var(--bibi-yellow); }

.bibi-hero__title {
  margin: clamp(32px, 3.4vw, 65px) 0 0;
  /* Figma h1 size 64 */
  font-size: clamp(38px, 3.33vw, 64px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF;
  color: var(--bibi-white);
}
.bibi-hero__tagline {
  /* Figma: tagline x=344, y=623, font 100, line-height 99.9% */
  margin: clamp(48px, 6.5vw, 125px) 0 0;
  padding-left: clamp(0px, 12.7vw, 244px);
  max-width: 1500px;
  font-size: clamp(34px, 5.2vw, 100px);
  line-height: 1;
  font-weight: 700;
  color: #FEAE00;
  color: var(--bibi-yellow);
}

/* =============================================================================
 *  FRAME 1 — pixel-perfect at desktop
 *  Canvas y=858–1333  (height 475)
 * ========================================================================== */

.bibi-section { background: #000; background: var(--bibi-black); }

.bibi-frame-1 {
  position: relative;
  width: 100%;
  /* gap 858 - hero_bottom; padding included via hero */
  padding-top: 0;
  padding-bottom: clamp(60px, 7vw, 130px);
}

.bibi-frame-1__canvas {
  position: relative;
  max-width: 1920px;
  max-width: var(--bibi-container);
  margin: 0 auto;
  /* canvas section height = 475 ; width = 1920 → aspect-ratio 1920/475 */
  aspect-ratio: 1920 / 475;
}

/* All frame-1 children positioned absolutely on the 1920×475 canvas */
.bibi-frame-1__photo--big {
  position: absolute;
  /* x=108, y=0, w=634, h=475 */
  left: 5.625%;        /* 108 / 1920 */
  top: 0;
  width: 33.0208%;     /* 634 / 1920 */
  height: 100%;
}
.bibi-frame-1__photo--big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-1__photo--small {
  position: absolute;
  /* x=1215, y=172, w=214, h=303 → on 1920×475 canvas
     y % = 172/475 = 36.21%, h % = 303/475 = 63.79% */
  left: 63.281%;       /* 1215 / 1920 */
  top: 36.21%;         /* 172 / 475 */
  width: 11.146%;      /* 214 / 1920 */
  height: 63.79%;      /* 303 / 475 */
}
.bibi-frame-1__photo--small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-1__text {
  position: absolute;
  /* Text "Our company specializes..." top-right block.
     Approx from Figma render: x≈973, y≈18, width≈830, font-size 24 */
  left: 50.677%;       /* 973 / 1920 */
  top: 3.78%;          /* 18 / 475 */
  width: 43.23%;       /* 830 / 1920 */
  margin: 0;
  /* responsive font scaling: at 1920w ⇒ 24px */
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  color: #FFF;
  color: var(--bibi-white);
}

/* =============================================================================
 *  FRAME 2 — pixel-perfect at desktop
 *  Canvas: section starts at y=1480 (headline) ends at y=2311.
 *  Total height 831. Use canvas 1920×831.
 * ========================================================================== */

.bibi-frame-2 {
  position: relative;
  width: 100%;
  padding-top: clamp(40px, 5vw, 100px);
  padding-bottom: clamp(80px, 10vw, 180px);
}

.bibi-frame-2__canvas {
  position: relative;
  max-width: 1920px;
  max-width: var(--bibi-container);
  margin: 0 auto;
  /* canvas height 831 (1480→2311); width 1920 */
  aspect-ratio: 1920 / 831;
}

.bibi-frame-2__headline {
  position: absolute;
  /* Figma: x≈275, y≈0 (relative to canvas top), w≈1126, font 40 */
  left: 14.32%;        /* 275 / 1920 */
  top: 0;
  width: 58.65%;       /* 1126 / 1920 */
  margin: 0;
  font-size: clamp(20px, 2.08vw, 40px);
  line-height: 1.05;
  font-weight: 500;
  color: #FFF;
  color: var(--bibi-white);
}

.bibi-frame-2__photo--small {
  position: absolute;
  /* x=307, y=219, w=236, h=314 → on canvas 1920×831
     y%=219/831=26.36%, h%=314/831=37.79% */
  left: 15.99%;        /* 307 / 1920 */
  top: 26.36%;         /* 219 / 831 */
  width: 12.292%;      /* 236 / 1920 */
  height: 37.79%;      /* 314 / 831 */
}
.bibi-frame-2__photo--small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-2__text {
  position: absolute;
  /* "We'll help..." text — top-right area above big landscape photo.
     Approx: x≈960, y≈339, w≈497, font 24 */
  left: 50%;           /* 960 / 1920 */
  top: 40.79%;         /* 339 / 831 */
  width: 30%;          /* 576 / 1920 - a bit wider for safety */
  margin: 0;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  color: #FFF;
  color: var(--bibi-white);
}

.bibi-frame-2__photo--big {
  position: absolute;
  /* x=928, y=423, w=725, h=408 → canvas 1920×831
     y%=423/831=50.90%, h%=408/831=49.10% */
  left: 48.333%;       /* 928 / 1920 */
  top: 50.90%;         /* 423 / 831 */
  width: 37.76%;       /* 725 / 1920 */
  height: 49.10%;      /* 408 / 831 */
}
.bibi-frame-2__photo--big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
 *  CTA — "Get free professional advice" + form + Quick call card
 * ========================================================================== */

.bibi-cta {
  background: #1D1D1B;
  background: var(--bibi-bg-dark);
  /* Figma: title at y≈2606, form at y≈2891, quick-call at y≈3534
     Section bg = #1D1D1B, top padding ≈170, bottom padding ≈210 */
  padding: clamp(72px, 9vw, 170px) clamp(20px, 6vw, 120px)
           clamp(96px, 13vw, 210px);
}
.bibi-cta__inner {
  max-width: 1330px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 11vw, 220px);
}
.bibi-cta__title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 18px);
  /* Figma: 60px font */
  font-size: clamp(28px, 3.12vw, 60px);
  line-height: 1;
}
.bibi-cta__title-yellow {
  color: #FEAE00;
  color: var(--bibi-yellow);
  text-transform: uppercase;
}
.bibi-cta__title-white  { color: #FFF; color: var(--bibi-white); }

.bibi-form {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 7vw, 85px);
  width: 372px;
  max-width: 100%;
  margin: 0 auto;
}
.bibi-form__fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.bibi-form__field {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.bibi-form__label {
  font-size: 14px;
  color: #FFF;
  color: var(--bibi-white);
  font-weight: 500;
}
.bibi-form__field input {
  width: 100%;
  height: 45px;
  border: 1px solid #555452;
  border: 1px solid var(--bibi-border);
  border-radius: 4px;
  background: transparent;
  outline: none;
  color: #FFF;
  color: var(--bibi-white);
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 14px;
  padding: 0 15px;
  transition: border-color 0.2s ease;
}
.bibi-form__field input::placeholder { color: #949494; color: var(--bibi-text-mute-2); }
.bibi-form__field input:focus { border-color: #FEAE00; border-color: var(--bibi-yellow); }
.bibi-form__field--phone input { padding-left: 88px; }
.bibi-form__phone-prefix {
  /* Centred vertically inside the 45 px input — (45 - 18) / 2 = 13.5 px
   * from the bottom of the field (which coincides with the bottom of
   * the input since input is the last child). Previously `bottom: 10px`
   * pushed the prefix 3.5 px below the placeholder line. */
  position: absolute;
  bottom: 13.5px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font);
  font-size: 14px;
  line-height: 1;
  color: #FFF;
  color: var(--bibi-white);
}
.bibi-form__phone-prefix img {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}
.bibi-form__error { color: #ff6464; font-size: 13px; text-align: center; }
.bibi-form__ok {
  color: #FEAE00;
  color: var(--bibi-yellow);
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}
.bibi-form__submit { width: 100%; height: 45px; }

/* quick-call card — Figma: 564×268, x=678 (centered) */
.bibi-quickcall {
  width: 564px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid #FEAE00;
  border: 1px solid var(--bibi-yellow);
  border-radius: 8px;
  padding: 51px 112px 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.bibi-quickcall h3 {
  margin: 0;
  font-size: clamp(22px, 1.66vw, 32px);
  line-height: 1;
  font-weight: 700;
  color: #FFF;
  color: var(--bibi-white);
}
.bibi-quickcall__phones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bibi-quickcall a {
  font-family: "Mazzard","Mazzard H","Mazzard M",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family: var(--bibi-font-helv);
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  color: #FEAE00;
  color: var(--bibi-yellow);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.bibi-quickcall a:hover { text-decoration: underline; }

/* =============================================================================
 *  FOOTER
 * ========================================================================== */

.bibi-footer {
  background: #000;
  background: var(--bibi-black);
  padding: clamp(48px, 7vw, 110px) 0 33px;
}
.bibi-footer__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
  padding: 0 var(--bibi-container-pad);
}
.bibi-footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: clamp(24px, 4vw, 80px);
  gap: clamp(24px, 4vw, 80px);
  padding-bottom: clamp(48px, 6vw, 100px);
  border-bottom: 1px solid #1a1a1a;
}
.bibi-footer__logo img {
  display: block;
  height: clamp(80px, 7.6vw, 146px);
  width: auto;
}
.bibi-footer__phones {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 4px;
  gap: 4px;
  font-size: 14px;
  color: #FFF;
  color: var(--bibi-white);
}
.bibi-footer__phones-label { margin-bottom: 8px; }
.bibi-footer__phones a {
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 600;
  color: #FEAE00;
  color: var(--bibi-yellow);
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}
.bibi-footer__cta { width: 171px; }

.bibi-footer__mid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.7fr 0.7fr;
  grid-gap: clamp(24px, 4vw, 80px);
  gap: clamp(24px, 4vw, 80px);
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 100px);
}
.bibi-footer__menu {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 32px);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 600;
  text-transform: uppercase;
}
.bibi-footer__menu a {
  color: #EFEFEF;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bibi-footer__menu a:hover { color: #FEAE00; color: var(--bibi-yellow); }
.bibi-footer__small-label {
  display: block;
  font-size: 14px;
  color: #FFF;
  color: var(--bibi-white);
  margin-bottom: 14px;
}
.bibi-footer__address-line {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 600;
  color: #FEAE00;
  color: var(--bibi-yellow);
  line-height: 1.25;
}
.bibi-footer__hours {
  display: block;
  font-size: 14px;
  color: #949494;
  color: var(--bibi-text-mute-2);
}
.bibi-footer__hours-mobile { display: none; }
.bibi-footer__viber a img { width: 45px; height: 45px; display: block; }
.bibi-footer__social-icons {
  display: flex;
  gap: 22px;
  align-items: center;
}
.bibi-footer__social-icons img { width: 32px; height: 32px; display: block; }
.bibi-footer__social-link { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s ease, filter 0.18s ease; }
.bibi-footer__social-link:hover { transform: translateY(-2px); filter: brightness(1.15); }
.bibi-footer__social-svg { width: 28px; height: 28px; color: #FEAE00; color: var(--bibi-yellow, #FEAE00); display: block; }

.bibi-footer__bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 32px;
  gap: 32px;
  padding-top: 28px;
  font-size: 12px;
  color: #FFF;
  color: var(--bibi-white);
  text-transform: uppercase;
}
.bibi-footer__copy { display: flex; align-items: center; gap: 8px; }
.bibi-footer__copy img { width: 18px; height: 18px; }
.bibi-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 12px;
}
.bibi-footer__legal a { color: #FFF; color: var(--bibi-white); text-decoration: none; }
.bibi-footer__legal a:hover { color: #FEAE00; color: var(--bibi-yellow); }
.bibi-footer__credit {
  text-decoration: underline;
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

/* =============================================================================
 *  RESPONSIVE BREAKPOINTS
 * ========================================================================== */

@media (max-width: 1440px) {
  :root { --bibi-container-pad: 60px; }
}
@media (max-width: 1280px) {
  :root { --bibi-container-pad: 40px; }
  .bibi-header__phones,
  .bibi-header__lang-wrap { display: none; }
  .bibi-header__nav { gap: 22px; margin-left: 0; }
  .bibi-header__search { flex: 0 1 220px; min-width: 140px; }
}

/* ≤ 1024px — TABLET: switch to flex layout (no more absolute positioning) */
@media (max-width: 1024px) {
  :root { --bibi-container-pad: 32px; }
  .bibi-header__search { display: none; }

  .bibi-frame-1__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 100px;
    padding: 0 var(--bibi-container-pad);
  }
  .bibi-frame-1__photo--big,
  .bibi-frame-1__photo--small,
  .bibi-frame-1__text {
    position: static;
    width: 100%;
    height: auto;
  }
  .bibi-frame-1__photo--big { aspect-ratio: 634/475; }
  .bibi-frame-1__photo--small {
    aspect-ratio: 214/303;
    width: 50%;
    max-width: 280px;
    align-self: flex-end;
  }
  .bibi-frame-1__text { font-size: 22px; }

  .bibi-frame-2__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 100px;
    padding: 0 var(--bibi-container-pad);
  }
  .bibi-frame-2__headline,
  .bibi-frame-2__photo--small,
  .bibi-frame-2__text,
  .bibi-frame-2__photo--big {
    position: static;
    width: 100%;
    height: auto;
  }
  .bibi-frame-2__headline { font-size: clamp(22px, 3vw, 32px); }
  .bibi-frame-2__photo--small {
    aspect-ratio: 236/314;
    width: 45%; max-width: 280px;
  }
  .bibi-frame-2__text { font-size: 22px; }
  .bibi-frame-2__photo--big {
    aspect-ratio: 725/408;
    width: 100%;
  }

  .bibi-footer__top { grid-template-columns: 1fr auto; }
  .bibi-footer__top .bibi-footer__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .bibi-footer__mid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* =============================================================================
 * ≤ 768px — MOBILE (точно по дизайн-макету)
 * Header: logo (left), phones (center), burger (right) — БЕЗ nav/search/lang/profile/CTA
 * Hero: breadcrumb + h1 центрированы
 * Footer: всё центрировано, Get-in-touch — outline-кнопка
 * ========================================================================== */
@media (max-width: 768px) {
  :root { --bibi-container-pad: 20px; }

  /* ── Header: logo | phones | burger ─────────────────────────────────── */
  .bibi-header { height: 64px; }
  .bibi-header__inner {
    padding: 0 16px;
    gap: 12px;
    justify-content: space-between;
  }
  .bibi-header__logo img { height: 28px; }
  /* На мобиле скрываем всё кроме логотипа, телефонов и бургера */
  .bibi-header__search,
  .bibi-header__lang-wrap,
  .bibi-header__profile,
  .bibi-header__cta { display: none; }
  /* Телефоны показываем в центре */
  .bibi-header__phones {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    margin-left: auto;
    text-align: right;
    font-size: 11px;
    line-height: 1.2;
  }
  .bibi-header__phones a { font-size: 11px; }
  /* Бургер */
  .bibi-header__burger { display: flex; margin-left: 0; }
  /* Слайд-меню по бургеру */
  .bibi-header__nav {
    position: absolute;
    top: 64px; left: 0; right: 0;
    margin: 0;
    flex-direction: column;
    background: #1D1D1B;
    background: var(--bibi-bg-dark);
    padding: 24px;
    gap: 20px;
    border-top: 1px solid #2a2a2a;
    transform: translateY(-150%);
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 49;
  }
  .bibi-header__nav.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* ── Hero: всё центрировано ─────────────────────────────────────────── */
  .bibi-hero {
    padding: 32px 0 24px;
    text-align: center;
  }
  .bibi-breadcrumb { font-size: 13px; }
  .bibi-hero__title {
    margin-top: 18px;
    font-size: clamp(32px, 9vw, 44px);
    text-align: center;
  }
  .bibi-hero__tagline { margin-top: 32px; padding-left: 0; text-align: center; }

  /* ── About-Us specific (frame-1, frame-2) на мобиле ────────────────── */
  .bibi-frame-1 { padding-bottom: 32px; }
  .bibi-frame-1__photo--small { width: 60%; align-self: center; }
  .bibi-frame-2 { padding: 32px 0 56px; }
  .bibi-frame-2__photo--small { width: 60%; align-self: center; }

  .bibi-cta { padding: 60px 16px 80px; }
  .bibi-cta__inner { gap: 60px; }
  .bibi-quickcall { padding: 32px 20px; gap: 22px; }

  /* ── Footer: всё центрировано, мобильный layout ─────────────────────── */
  .bibi-footer { padding: 40px 0 24px; }
  .bibi-footer__inner { padding: 0 20px; }

  /* TOP: logo (огромный слева) → phones по центру → CTA outline */
  .bibi-footer__top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: none;
  }
  .bibi-footer__logo {
    justify-self: start;
  }
  .bibi-footer__logo img { height: 96px; }
  .bibi-footer__phones {
    justify-self: center;
    text-align: center;
  }
  .bibi-footer__phones-label { margin-bottom: 4px; }
  /* Get in touch — outline-кнопка на мобиле */
  .bibi-footer .bibi-footer__cta {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    background: transparent !important;
    color: #FEAE00 !important;
    color: var(--bibi-yellow) !important;
    border: 1px solid #FEAE00 !important;
    border: 1px solid var(--bibi-yellow) !important;
    height: 52px !important;
    text-transform: none !important;
    font-weight: 500;
    border-radius: 6px;
    padding: 0 !important;
  }

  /* MID: address + viber + social + menu — реорганизованы по grid-row под дизайн */
  .bibi-footer__mid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px 24px;
    padding: 28px 0;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
  }
  /* row 1: address на всю ширину */
  .bibi-footer__address {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
  }
  /* row 2: viber слева, social справа */
  .bibi-footer__viber {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  .bibi-footer__social {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .bibi-footer__social-icons { justify-content: flex-end; }
  /* row 3: меню по центру */
  .bibi-footer__menu {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid #1a1a1a;
  }

  /* BOTTOM: legal — горизонтально по 3 в ряд, остальное по центру */
  .bibi-footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .bibi-footer__copy {
    order: 4;
    justify-content: center;
    font-size: 11px;
  }
  .bibi-footer__legal {
    order: 1;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .bibi-footer__credit {
    order: 3;
    text-align: center;
    font-size: 11px;
  }
  .bibi-footer__hours-mobile { display: inline; }
}

@media (max-width: 480px) {
  .bibi-header__nav-link { font-size: 18px; }
  .bibi-quickcall { padding: 28px 16px; gap: 18px; }
  .bibi-footer__logo img { height: 80px; }
  .bibi-footer__legal { gap: 12px 16px; justify-content: center; }
}

/* GetInTouchModal — premium dark-glass modal matching BIBI Cars palette
   Yellow #FEAE00 / black background / white text. Mazzard / Inter stack. */

.git-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  animation: gitFadeIn 0.18s ease-out both;
}

@keyframes gitFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gitSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.git-modal-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: auto;
  /* Slightly lighter than the page background so the card silhouette is
     clearly visible against the dark site backdrop. We keep the tone in
     the same dark family — just a couple of stops lighter — so the
     premium-dark feel is preserved. */
  background: #141417;
  border: 1px solid #232328;
  border-radius: 20px;
  /* Generous internal padding so every label / input / button gets real
     breathing room from the card edges. Top a bit higher to balance the
     close-button area. */
  padding: 44px 40px 32px 40px;
  color: #FFFFFF;
  font-family: 'Mazzard', 'Inter', system-ui, sans-serif;
  font-family: var(--bibi-font, 'Mazzard', 'Inter', system-ui, sans-serif);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.70);
  animation: gitSlideIn 0.24s ease-out both;
}

.git-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  /* No border / no background — just the X glyph itself, WHITE by
     default. Yellow read as "decorative accent", white reads as a
     functional close affordance against the dark card. */
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.git-modal-close:hover {
  color: #FEAE00;
  transform: scale(1.05);
}

.git-modal-header {
  /* More air between the header block (title + subtitle) and the first
     form field — matches the breathing room of the catalog filter where
     "Brand" label sits well below the section header. */
  margin-bottom: 32px;
  text-align: left;
}
.git-modal-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #FEAE00;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.git-modal-subtitle {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #B8B8BA;
  max-width: 440px;
}

.git-modal-form {
  display: flex;
  flex-direction: column;
  /* 24 px between every form field (Name → Phone → Email → …) — same
     vertical rhythm used by the catalog filter (.block { gap: 24px })
     so the public site has ONE consistent form spacing system. */
  gap: 24px;
}

.git-field {
  display: flex;
  flex-direction: column;
  /* 16 px between the field label and its input/control — matches
     `.block { gap: 16px }` from CatalogFilter.module.css (the "Brand →
     All brands" reference users explicitly asked us to align to).
     24 px tested too airy; 16 px is the sweet spot. */
  gap: 16px;
}
.git-label {
  /* H Medium 14 px, white — matches the rest of the platform's form labels. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
}
/* Required indicator stays white to match the label colour — yellow asterisks
   were reading as "decorative" rather than as a meaningful "required" marker.
   Sits flush with the label text (no leading space) to mirror the About-us
   form: "Your Phone Number*" → no whitespace between word and asterisk. */
.git-req { color: #FFFFFF; margin-left: 2px; }

.git-input {
  width: 100%;
  background: #0F0F11;
  border: 1px solid #232326;
  border-radius: 10px;
  padding: 0 14px;
  height: 46px;
  font-family: inherit;
  /* H Regular 14 px — placeholder + entered value share the same scale as
     every other input on the public site (see ConsultationCTA, Catalog
     consultation, About page CTA, etc.). */
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.git-input::placeholder { color: #6B6B6F; }
.git-input:focus {
  border-color: #FEAE00;
  background: #121214;
  box-shadow: 0 0 0 3px rgba(254, 174, 0, 0.18);
}
.git-textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
/* Hide native number spinners */
.git-input[type="number"]::-webkit-outer-spin-button,
.git-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.git-input[type="number"] { -moz-appearance: textfield; }

.git-budget-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.git-input--budget { flex: 1 1 auto; }

.git-currency {
  display: inline-flex;
  border: 1px solid #232326;
  border-radius: 10px;
  padding: 4px;
  background: #0F0F11;
}
.git-currency-btn {
  -webkit-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  color: #B8B8BA;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 12px;
  height: 36px;
  min-width: 56px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.git-currency-btn:hover { color: #FEAE00; }
.git-currency-btn.is-active {
  background: #FEAE00;
  color: #000000;
}

.git-error {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.40);
  color: #FCA5A5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

.git-submit {
  /* The form has a 24 px gap between fields. Submit button should sit a
     bit further down to read as a "decision moment", not just another
     field. */
  margin-top: 8px;
  -webkit-appearance: none;
          appearance: none;
  border: none;
  height: 50px;
  width: 100%;
  border-radius: 10px;
  background: #FEAE00;
  color: #000000;
  font-family: inherit;
  /* H Medium 14 px — consistent with all other primary buttons on the site. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.08s ease;
}
.git-submit:hover:not(:disabled) { filter: brightness(1.08); }
.git-submit:active:not(:disabled) { transform: translateY(1px); }
.git-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.git-disclaimer {
  /* Sits below the submit button — give it real air so it reads as
     fine-print, not crammed against the CTA. */
  margin: 16px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #6B6B6F;
}
.git-disclaimer a,
.git-disclaimer .git-policy-link {
  color: #B8B8BA;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.git-disclaimer .git-policy-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.git-disclaimer a:hover,
.git-disclaimer .git-policy-link:hover { color: #FEAE00; }

/* Phone field with locked +359 prefix + Bulgarian flag — mirrors the
   pattern used by CatalogConsultationBlock so every form on the site
   has identical phone-input UX. */
.git-input-with-icon {
  position: relative;
}
.git-input-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  display: block;
}
.git-input--with-icon {
  padding-left: 50px;
}

/* Success state */
.git-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Generous breathing room — clean stacked composition, ample air
     between every node per design spec. */
  padding: 24px 8px 12px;
  gap: 28px;
}
.git-success-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(254, 174, 0, 0.12);
  color: #FEAE00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(254, 174, 0, 0.40);
  margin: 0;
}
.git-success-title {
  margin: 0;
  /* H Semibold per spec — slightly heavier than the form labels so the
     success heading reads as a "moment". */
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #FEAE00;
  letter-spacing: -0.005em;
}
.git-success-text {
  margin: 0;
  max-width: 420px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #B8B8BA;
}
.git-success-btn {
  -webkit-appearance: none;
          appearance: none;
  /* Primary CTA — yellow filled button, black text. Same visual weight as
     "Send request" so the user has a clear, branded way to dismiss the
     confirmation. NO transparent / outlined variant — that read as
     secondary and was too easy to miss against the dark card. */
  background: #FEAE00;
  border: 1px solid #FEAE00;
  color: #0A0A0A;
  font-family: inherit;
  /* H Medium 14 px — identical to the Send request button typography. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: 46px;
  min-width: 200px;
  padding: 0 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
  margin-top: 4px;
}
.git-success-btn:hover {
  background: #FFC23D;
  border-color: #FFC23D;
}
.git-success-btn:active {
  transform: translateY(1px);
}
.git-success-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(254, 174, 0, 0.32);
}

/* Mobile */
@media (max-width: 560px) {
  .git-modal-card { padding: 28px 20px 22px; border-radius: 16px; }
  .git-modal-title { font-size: 24px; }
  .git-budget-row { flex-direction: column; }
  .git-currency { align-self: stretch; justify-content: stretch; }
  .git-currency-btn { flex: 1 1 50%; }
}

/* =============================================================================
 * PolicyModal — premium dark-glass modal for legal text (Privacy / Terms /
 * Cookies / Conditions). Style mirrors the GetInTouch modal for a consistent
 * public-site identity.
 * ========================================================================== */

.bibi-policy-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bibiPolicyModalFadeIn 180ms ease-out;
}

@keyframes bibiPolicyModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bibi-policy-modal__card {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1d1d1b 0%, #141413 100%);
  border: 1px solid rgba(254, 174, 0, 0.28);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(254, 174, 0, 0.06) inset;
  color: #efefef;
  font-family:
    'Mazzard H', 'Mazzard', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  overflow: hidden;
  animation: bibiPolicyModalSlideIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes bibiPolicyModalSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.bibi-policy-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #efefef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease;
}
.bibi-policy-modal__close:hover {
  background: rgba(254, 174, 0, 0.14);
  border-color: rgba(254, 174, 0, 0.5);
  color: #FEAE00;
}
.bibi-policy-modal__close:active { transform: scale(0.94); }

.bibi-policy-modal__header {
  padding: 38px 56px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(254, 174, 0, 0.10), transparent 60%),
    transparent;
}
.bibi-policy-modal__eyebrow {
  font-family: 'Mazzard H', 'Mazzard', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FEAE00;
}
.bibi-policy-modal__title {
  margin: 0;
  font-family: 'Mazzard H', 'Mazzard', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: #ffffff;
}

.bibi-policy-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 56px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(254, 174, 0, 0.5) transparent;
}
.bibi-policy-modal__body::-webkit-scrollbar { width: 8px; }
.bibi-policy-modal__body::-webkit-scrollbar-track { background: transparent; }
.bibi-policy-modal__body::-webkit-scrollbar-thumb {
  background-color: rgba(254, 174, 0, 0.35);
  border-radius: 4px;
}
.bibi-policy-modal__body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(254, 174, 0, 0.55);
}

/* Curated HTML rendering — matches the BIBI public site palette */
.bibi-policy-modal__prose {
  font-family: 'Mazzard H', 'Mazzard', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: #d6d6d6;
  word-break: break-word;
}
.bibi-policy-modal__prose h1,
.bibi-policy-modal__prose h2,
.bibi-policy-modal__prose h3,
.bibi-policy-modal__prose h4 {
  font-family: 'Mazzard H', 'Mazzard', sans-serif;
  font-weight: 700;
  color: #ffffff;
  margin: 22px 0 10px;
  line-height: 1.25;
}
.bibi-policy-modal__prose h1 { font-size: 22px; }
.bibi-policy-modal__prose h2 { font-size: 19px; color: #FEAE00; }
.bibi-policy-modal__prose h3 { font-size: 17px; }
.bibi-policy-modal__prose h4 { font-size: 15px; }
.bibi-policy-modal__prose p,
.bibi-policy-modal__prose ul,
.bibi-policy-modal__prose ol {
  margin: 0 0 14px;
}
.bibi-policy-modal__prose ul,
.bibi-policy-modal__prose ol {
  padding-left: 20px;
}
.bibi-policy-modal__prose li { margin-bottom: 6px; }
.bibi-policy-modal__prose a {
  color: #FEAE00;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bibi-policy-modal__prose a:hover { color: #ffbf2d; }
.bibi-policy-modal__prose strong { color: #ffffff; font-weight: 600; }
.bibi-policy-modal__prose em { color: #b0b0b0; }
.bibi-policy-modal__prose hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 22px 0;
}
.bibi-policy-modal__prose code {
  background: rgba(254, 174, 0, 0.12);
  color: #FEAE00;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  font-size: 13px;
}
.bibi-policy-modal__prose blockquote {
  border-left: 3px solid #FEAE00;
  padding-left: 14px;
  color: #b0b0b0;
  margin: 14px 0;
  font-style: italic;
}

.bibi-policy-modal__footer {
  padding: 18px 56px 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.24);
}

.bibi-policy-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 30px;
  border-radius: 10px;
  border: none;
  font-family: 'Mazzard H', 'Mazzard', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  background: #FEAE00;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 8px 22px rgba(254, 174, 0, 0.22);
}
.bibi-policy-modal__cta:hover { background: #ffbf2d; }
.bibi-policy-modal__cta:active { transform: translateY(1px); }

/* ─── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bibi-policy-modal__backdrop { padding: 12px; }
  .bibi-policy-modal__header { padding: 28px 24px 14px; }
  .bibi-policy-modal__title { font-size: 22px; }
  .bibi-policy-modal__body { padding: 18px 24px 4px; }
  .bibi-policy-modal__footer { padding: 14px 24px 22px; }
  .bibi-policy-modal__close { top: 12px; right: 12px; }
}

/* SearchForCarsHeading — per-character mask + slider animation
   matching the hero "FROM AUCTION TO KEYS" reveal exactly. Each
   character inside a .charMask overflow:hidden box and slides up
   from translateY(100%) → 0, opacity 0 → 1. Stagger per character
   gives the diagonal left-to-right wave. */

.SearchForCarsHeading_heading__dBC\+7 {
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: 0 20px 120.5px;
  box-sizing: border-box;
  text-align: center;
  font-family: Mazzard, "Mazzard H", system-ui, sans-serif;
  background-color: #000;
}

.SearchForCarsHeading_headingInner__WEV0F {
  width: 694px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.SearchForCarsHeading_lineOrange__BKTOK,
.SearchForCarsHeading_lineWhite__AW31r {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}

.SearchForCarsHeading_lineOrange__BKTOK {
  font-size: 60px;
  color: #FEAE00;
}

.SearchForCarsHeading_lineWhite__AW31r {
  font-size: 50px;
  color: #FFFFFF;
}

/* ── Per-character mask + slider (same physics as hero headline) ── */
.SearchForCarsHeading_charMask__LOaHz {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}

.SearchForCarsHeading_charInner__Qaswp {
  display: block;
  line-height: 1;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

/* Animation only starts once the section enters the viewport
   (parent gets `.is-visible`). Honour reduced motion below.
   `.is-visible` is a GLOBAL class flipped by useInView, so we use
   :global() inside the CSS module selector. */
.SearchForCarsHeading_heading__dBC\+7.is-visible .SearchForCarsHeading_charInner__Qaswp {
  animation-name: SearchForCarsHeading_searchCharSlideUp__KExAN;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

@keyframes SearchForCarsHeading_searchCharSlideUp__KExAN {
  0%   { transform: translate3d(0, 100%, 0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .SearchForCarsHeading_charInner__Qaswp {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive — copied from original component */
@media (max-width: 925px) {
  .SearchForCarsHeading_headingInner__WEV0F { padding: 0 33px; box-sizing: border-box; }
  .SearchForCarsHeading_lineOrange__BKTOK { font-size: 48px !important; }
  .SearchForCarsHeading_lineWhite__AW31r  { font-size: 40px !important; }
}
@media (max-width: 450px) {
  .SearchForCarsHeading_lineOrange__BKTOK { font-size: 36px !important; }
  .SearchForCarsHeading_lineWhite__AW31r  { font-size: 30px !important; }
}

/* =========================================================================
 * BIBI Cars — ShareModal styles
 *
 * Dark single-car theme, no gradients, native components only. The colour
 * palette mirrors the rest of SingleCarPage:
 *   • background       : #1D1D1B  (modal card)
 *   • backdrop         : rgba(0, 0, 0, 0.78)
 *   • borders          : 1 px #2A2A28 / rgba(254,174,0,.25) for orange accents
 *   • accent           : #FEAE00  (BIBI yellow)
 *   • body text        : #FFFFFF / #949494 (secondary)
 *   • typography       : Mazzard H (Bold/SemiBold/Medium/Regular)
 * ====================================================================== */

.ShareModal_backdrop__Xudx\+ {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ShareModal_shm-fade__9ZwUv 0.18s ease-out;
}
@keyframes ShareModal_shm-fade__9ZwUv { from { opacity: 0; } to { opacity: 1; } }

.ShareModal_modal__04cb9 {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: #1D1D1B;
  border: 1px solid #2A2A28;
  border-radius: 14px;
  color: #FFFFFF;
  font-family: 'Mazzard H', 'Mazzard', system-ui, -apple-system, sans-serif;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(254, 174, 0, 0.08);
  animation: ShareModal_shm-slide__gZIa9 0.22s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
@keyframes ShareModal_shm-slide__gZIa9 { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ShareModal_closeBtn__\+8CJL {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background-color 0.15s ease;
}
.ShareModal_closeBtn__\+8CJL:hover { background-color: rgba(255, 255, 255, 0.08); }

/* ── Header ─────────────────────────────────────────────────────────── */
.ShareModal_header__bMVuw {
  padding: 32px 36px 0 36px;
}
.ShareModal_title__ooq2D {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.ShareModal_subtitle__5e6na {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 400;
  color: #949494;
  line-height: 1.5;
}

/* ── Vehicle card ───────────────────────────────────────────────────── */
.ShareModal_vehicleCard__\+0ctZ {
  margin: 26px 36px 0;
  background: #16161A;
  border: 1px solid #232325;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.ShareModal_vehicleImageWrap__BA4Kf {
  flex-shrink: 0;
  width: 140px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: #2A2A28;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ShareModal_vehicleImage__d2QRh {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ShareModal_vehicleImagePlaceholder__xC\+cg {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ShareModal_vehicleInfo__VmaZD {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ShareModal_vehicleTitle__CtKpY {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ShareModal_vehicleMeta__OJleS {
  font-size: 12px;
  color: #949494;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.4;
}
.ShareModal_vehiclePrice__Yso4B {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #FEAE00;
  letter-spacing: 0;
}

/* ── Link row ────────────────────────────────────────────────────────── */
.ShareModal_linkRow__ka\+4S {
  margin: 26px 36px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #16161A;
  border: 1px solid #232325;
  border-radius: 10px;
  padding: 0 0 0 16px;
  height: 52px;
}
.ShareModal_linkInput__4Z9DM {
  flex: 1 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #FFFFFF;
  font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 0;
}
.ShareModal_copyBtn__Yz2Oa {
  height: 100%;
  padding: 0 22px;
  border: 0;
  background: #FEAE00;
  color: #1A1A1A;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0 9px 9px 0;
  transition: background-color 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ShareModal_copyBtn__Yz2Oa:hover { background: #FFC233; }
.ShareModal_copyBtn__Yz2Oa:disabled { opacity: 0.6; cursor: default; }
.ShareModal_copyBtnCopied__99BkB { background: #2A2A28; color: #FEAE00; }

/* ── Channel buttons ────────────────────────────────────────────────── */
.ShareModal_channels__tQCm2 {
  margin: 28px 36px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}
.ShareModal_channelBtn__s5me4 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 10px;
  background: #16161A;
  border: 1px solid #232325;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.ShareModal_channelBtn__s5me4:hover {
  border-color: rgba(254, 174, 0, 0.5);
  background: #1A1A1A;
}
.ShareModal_channelBtn__s5me4:active { transform: scale(0.98); }
.ShareModal_channelIcon__2uRw4 {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ShareModal_channelIcon__2uRw4 svg { width: 28px; height: 28px; }
.ShareModal_channelLabel__DlAPu { line-height: 1; }

.ShareModal_channelBtn__s5me4[data-channel="facebook"] .ShareModal_channelIcon__2uRw4 { color: #1877F2; }
.ShareModal_channelBtn__s5me4[data-channel="viber"] .ShareModal_channelIcon__2uRw4 { color: #7360F2; }
.ShareModal_channelBtn__s5me4[data-channel="telegram"] .ShareModal_channelIcon__2uRw4 { color: #2AABEE; }

/* ── Toast / status note ────────────────────────────────────────────── */
.ShareModal_statusNote__z76S6 {
  margin: 22px 36px 28px;
  font-size: 12.5px;
  color: #949494;
  text-align: center;
  min-height: 18px;
  line-height: 1.5;
}
.ShareModal_statusNoteSuccess__VsfMc { color: #FEAE00; }
.ShareModal_statusNoteError__cFhUH { color: #FF6B6B; }

/* ── Mobile fallback ────────────────────────────────────────────────── */
@media screen and (max-width: 520px) {
  .ShareModal_modal__04cb9 { border-radius: 12px; }
  .ShareModal_header__bMVuw { padding: 24px 22px 0; }
  .ShareModal_title__ooq2D { font-size: 20px; }
  .ShareModal_subtitle__5e6na { margin-top: 8px; font-size: 13px; }
  .ShareModal_vehicleCard__\+0ctZ { margin: 18px 22px 0; padding: 14px; gap: 12px; border-radius: 10px; }
  .ShareModal_vehicleImageWrap__BA4Kf { width: 104px; height: 72px; border-radius: 8px; }
  .ShareModal_vehicleTitle__CtKpY { font-size: 14px; }
  .ShareModal_linkRow__ka\+4S { margin: 18px 22px 0; height: 48px; padding-left: 14px; }
  .ShareModal_channels__tQCm2 { margin: 20px 22px 0; gap: 10px; }
  .ShareModal_channelBtn__s5me4 { padding: 16px 6px; font-size: 12px; gap: 9px; border-radius: 10px; }
  .ShareModal_channelIcon__2uRw4 { width: 30px; height: 30px; }
  .ShareModal_channelIcon__2uRw4 svg { width: 24px; height: 24px; }
  .ShareModal_statusNote__z76S6 { margin: 16px 22px 20px; }
}

/* ──────────────────────────────────────────────────────────────
   Card1 — "Top vehicles deals of the week" card.
   All status / action chips are overlaid on the photo, exactly
   like the Figma reference (Homepage v5).
   ────────────────────────────────────────────────────────────── */

.card1_card__O2Rwa {
  width: 100%;
  max-width: 560px;
  background: #1d1d1b;
  /* Unified card radius across the site = 8 px (user spec, May 2026):
   * matches catalog, similar cars, blog, have-a-question, cost calculator. */
  border-radius: 8px;
  /* Figma spec: 20px on top/left/right, 40px on bottom so the
     "More details" CTA + final-cost row don't hug the card edge. */
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--font-mazzard);
  color: #fff;
  box-sizing: border-box;
}

/* ── Photo block (with overlays) — square corners (no inner rounding) ─ */
.card1_imageBox__dDIoJ {
  position: relative;
  width: 100%;
  aspect-ratio: 517 / 388;
  border-radius: 0;
  overflow: hidden;
  background: #0e0e0e;
}
.card1_image__0f-wi {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TOP-LEFT — trading-date pill (Figma spec: white 70 %, square corners) */
.card1_tradingDate__aDWy0 {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);     /* #FFFFFF @ 70 % per Figma */
  color: #1c1c1c;
  font-size: 13px;
  font-weight: 500;                          /* Mazzard H Medium */
  line-height: 1;
  border-radius: 0;                          /* SQUARE corners per Figma */
  white-space: nowrap;
  letter-spacing: 0.005em;
}

/* BOTTOM-LEFT — amber timer chip (Figma: 138 × 32, #FEAE00 @ 80 %, square) */
.card1_timerChip__msLRM {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  width: 138px;                              /* Figma spec — FIXED 138 × 32 */
  height: 32px;
  box-sizing: border-box;
  background: #FEAE00CC;                     /* #FEAE00 @ 80 % per Figma */
  color: #000;
  border-radius: 0;                          /* SQUARE corners per Figma */
  font-size: 14px;
  font-weight: 500;                          /* Mazzard H Medium */
  line-height: 1;
  letter-spacing: 0.01em;
}
.card1_clockIcon__Xwlv0 {
  width: 18px;
  height: 18px;
  display: block;
}
.card1_timerText__yoaAL {
  white-space: nowrap;
}

/* BOTTOM-RIGHT — original Figma compare / heart SVG icons */
.card1_actions__aoJu6 {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.card1_iconBtn__\+87oh {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease;
  /* soft shadow so the amber pops on busy photos */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.card1_iconBtn__\+87oh img {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.card1_iconBtn__\+87oh:hover {
  transform: scale(1.08);
}
.card1_iconBtn__\+87oh:active {
  transform: scale(0.94);
}

/* ── Active (selected) state ──────────────────────────────────
   Solid amber glow + soft shadow so the user gets clear "added"
   feedback. The pop animation is INTENTIONALLY NOT applied to the
   persistent `.iconBtnActive` state — it only runs once, scoped to
   the transient `.iconJustPopped` class added in the click handler.
   This prevents the icons from "twitching" on initial render when
   the favorites/compare sets arrive async from the API and switch
   the icon to its active state. */
.card1_iconBtnActive__eUP6X {
  filter: drop-shadow(0 0 8px rgba(254, 174, 0, 0.55))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.card1_iconJustPopped__ULrNk {
  animation: card1_iconPop__C4C2j 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card1_iconPop__C4C2j {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Title ────────────────────────────────────────────────── */
.card1_title__Pxq\+B {
  margin: 0;
  font-size: 24px;
  font-weight: 700;                           /* Mazzard H Bold */
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: #fff;
}

/* ── Specs : Purchase-price box + tech rows ──────────────── */
.card1_specs__RE8jE {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}
.card1_priceBox__7CwM3 {
  background: #000;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 88px;
  justify-content: center;
}
.card1_priceLabel__jCCgN {
  font-size: 14px;
  font-weight: 500;                           /* Mazzard H Medium */
  color: #fff;
  line-height: 1.1;
}
.card1_priceValue__9cdha {
  font-size: 20px;
  font-weight: 700;                           /* Mazzard H Bold */
  color: var(--color-orange-100);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.card1_techList__VhETt {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
}
.card1_techRow__XYkPK {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-gap: 18px;
  gap: 18px;
  align-items: baseline;
}
.card1_techLabel__FzLub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;                           /* Mazzard H Medium */
  color: #fff;
  text-transform: capitalize;
  line-height: 1.1;
}
.card1_techValue__lQh2k {
  margin: 0;
  font-size: 14px;
  font-weight: 700;                           /* Mazzard H Bold */
  color: var(--color-orange-100);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* ── Footer : final cost + CTA ──────────────────────────── */
.card1_footer__tOsys {
  margin-top: auto;
  display: flex;
  align-items: flex-start;                    /* button top aligns with label top (Figma) */
  justify-content: space-between;
  gap: 18px;
  padding-top: 4px;
}
.card1_finalCostBlock__x9PIU {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.card1_finalCostLabel__fnr19 {
  font-size: 14px;                            /* Mazzard H Medium 14 (Figma) */
  font-weight: 500;
  color: #FFFFFF;                             /* white per Figma */
  line-height: 1.15;
}
.card1_finalCostValue__WmFlo {
  font-size: 16px;                            /* Mazzard H Bold 16 (Figma) */
  font-weight: 700;
  color: var(--color-orange-100);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.card1_ctaBtn__5WaI\+ {
  flex-shrink: 0;
  margin-left: auto;                          /* always pin to right of footer */
  height: 44px;
  padding: 0 22px;
  background: var(--color-orange-100);
  color: #000;
  border: 0;
  border-radius: 6px;                         /* Figma: More details = 6 (was 8) */
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}
.card1_ctaBtn__5WaI\+:hover {
  background: #ffbf2d;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 1100px) {
  .card1_specs__RE8jE {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .card1_techList__VhETt {
    align-self: stretch;
  }
}
@media screen and (max-width: 600px) {
  .card1_card__O2Rwa {
    padding: 16px 16px 32px;
    gap: 18px;
  }
  .card1_footer__tOsys {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .card1_ctaBtn__5WaI\+ {
    width: 100%;
  }
  .card1_tradingDate__aDWy0 { font-size: 12px; padding: 6px 12px; top: 10px; left: 10px; }
  .card1_timerChip__msLRM   { font-size: 13px; padding: 0 12px; bottom: 10px; left: 10px; width: 138px; }
  .card1_actions__aoJu6     { bottom: 10px; right: 10px; gap: 8px; }
  .card1_iconBtn__\+87oh     { width: 28px; height: 28px; }
  .card1_iconBtn__\+87oh img { width: 28px; height: 28px; }
}

/* ============================================================================
 * Tilt Parallax — reusable card hover/press animation.
 * --------------------------------------------------------------------------
 * Same animation language as the "OUR SERVICES" cards block, packaged as
 * global classes so any card grid on the site can opt in.
 *
 *   .tilt-card           Base state — invisible + a small Y offset, ready for
 *                        the IntersectionObserver to flip it to entered.
 *   .tilt-card.tilt-entered
 *                        Card is in its natural grid position. Tilt/lift
 *                        composes from CSS variables (defaults all 0, so
 *                        the card looks identical to its static design).
 *   .tilt-card.tilt-hover (desktop) / .tilt-card.tilt-pressed (mobile)
 *                        Activates the 3D tilt + Z-lift + scale + shadow.
 *
 * CSS variables driven by the React hook (`useTiltParallax`):
 *   --tilt-ctx   −0.5..0.5 normalised cursor X inside the card.
 *   --tilt-cty   −0.5..0.5 normalised cursor Y inside the card.
 *   --tilt-stagger  integer card index used to delay the entry animation.
 *
 * Magnitudes mirror the tuned values in the OUR SERVICES section:
 *   tilt   ±8°
 *   lift   30 px (desktop) / 14 px (mobile)
 *   scale  1.02 (desktop) / 1.015 (mobile)
 * ========================================================================== */

/* The parent that hosts a row of `.tilt-card`s needs a shared perspective
   so the tilt converges to one consistent vanishing point. Components
   that already define their own perspective on a wrapper can skip this. */
.tilt-scope {
  perspective: 1300px;
  perspective-origin: 50% 30%;
}
.tilt-scope-mobile {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.tilt-card {
  --tilt-ctx: 0;
  --tilt-cty: 0;
  --tilt-stagger: 0;
  --tilt-tilt: 0;
  --tilt-lift: 0;
  --tilt-scale: 1;

  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, box-shadow;

  /* Pre-entry */
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--tilt-stagger) * 70ms);
}

.tilt-card.tilt-entered {
  opacity: 1;
  transform:
    translate3d(0, 0, calc(var(--tilt-lift) * 1px))
    rotateX(calc(var(--tilt-cty) * var(--tilt-tilt) * -1deg))
    rotateY(calc(var(--tilt-ctx) * var(--tilt-tilt) * 1deg))
    scale(var(--tilt-scale));
}

/* Desktop hover state. */
.tilt-card.tilt-hover {
  --tilt-tilt: 8;
  --tilt-lift: 30;
  --tilt-scale: 1.02;
  z-index: 5;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 32px 56px -28px rgba(0, 0, 0, 0.55),
    0 16px 28px -16px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(254, 174, 0, 0.1) inset,
    0 0 40px -12px rgba(254, 174, 0, 0.12);
}

/* Mobile press state. */
.tilt-card.tilt-pressed {
  --tilt-tilt: 6;
  --tilt-lift: 14;
  --tilt-scale: 1.015;
  z-index: 2;
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 20px 34px -16px rgba(0, 0, 0, 0.45),
    0 8px 16px -10px rgba(0, 0, 0, 0.32);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tilt-card,
  .tilt-card * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   FrameComponent21 — "Top deals" cards grid.
   Always 3 columns at 1920px (the FigmaScaler handles smaller
   viewports by uniformly down-scaling), gracefully degrades to 2
   then 1 column when rendered natively below 1100 / 700.
   ─────────────────────────────────────────────────────────── */

.frame-component21_cardsBlockWrapper__1KsPo {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  padding: 0 0 24px;
  box-sizing: border-box;
}
.frame-component21_cardsBlock__geqtI {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.frame-component21_cardsParent__3fHWS {
  align-self: stretch;
  display: grid;
  align-items: stretch;
  grid-gap: 26px;
  gap: 26px;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.frame-component21_cards__9hkti,
.frame-component21_carBlock__MczDO {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-mazzard);
}
.frame-component21_cards__9hkti > *,
.frame-component21_carBlock__MczDO > * {
  width: 100%;
}
@media screen and (max-width: 1100px) {
  .frame-component21_cardsParent__3fHWS {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 700px) {
  .frame-component21_cardsParent__3fHWS {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * BIBI Cars — "Calculate a car yourself" block
 *
 * Design source: Figma frame 1922 × 1286 px
 *   Outer frame  : #FEAE00 (yellow)        — full-bleed border ring
 *   Inner card   : #000000 (black)
 *   Title        : Mazzard H Bold, ~120px, two lines
 *                    line-1 -> #FEAE00  ("Calculate a car yourself")
 *                    line-2 -> #FFFFFF  ("with a price guarantee")
 *   Subtitle     : Mazzard H Medium, ~28px, white  ("From the USA and Korea")
 *   Input        : 1px #FEAE00 border, transparent fill, 64px height,
 *                  Helvetica Now Display Regular -> aliased to Mazzard 400
 *   CTA          : #FEAE00 fill, 80px height, Mazzard H Medium uppercase
 *   "ALL CATALOG+" : Mazzard H Medium uppercase, #FEAE00, underlined
 *   Truck photo  : square (≈630 × 630), object-cover
 *
 * Layout:
 *   - Title centered across the full inner-card width
 *   - Below: 2-column grid (image left, form right) on ≥1024px
 *   - On <1024px: stacks vertically, image first then form
 * ========================================================================== */

.cyb-frame {
  width: 100%;
  background: #FEAE00;
  /* yellow ring around the inner card — Figma shows ~96px on desktop  */
  padding: clamp(24px, 5vw, 96px) clamp(20px, 5vw, 96px);
  font-family: 'Mazzard', 'Mazzard H', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cyb-card {
  max-width: 1730px;
  margin: 0 auto;
  background: #000;
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px);
}

/* ── Title ───────────────────────────────────────────────────────────── */

.cyb-title {
  margin: 0;
  text-align: center;
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6.4vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 14px);
}

.cyb-title-yellow {
  color: #FEAE00;
  display: block;
}

.cyb-title-white {
  color: #FFFFFF;
  display: block;
}

/* ── Body grid ───────────────────────────────────────────────────────── */

.cyb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: clamp(32px, 5vw, 80px);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.cyb-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a0a0a;
}

.cyb-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Right column ────────────────────────────────────────────────────── */

.cyb-right {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
}

.cyb-subtitle {
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  font-size: clamp(16px, 1.6vw, 28px);
  line-height: 1.2;
}

.cyb-form {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 28px);
  width: 100%;
}

.cyb-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(54px, 4.4vw, 72px);
  border: 1px solid #FEAE00;
  border-radius: 6px;
  background: transparent;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.cyb-input-wrap:focus-within {
  border-color: #FEAE00;
  box-shadow: 0 0 0 2px rgba(254, 174, 0, 0.25);
}

.cyb-input-icon {
  flex-shrink: 0;
  margin: 0 14px 0 22px;
  color: #FEAE00;
}

.cyb-input {
  flex: 1 1;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #FFFFFF;
  /* "Helvetica Now Display Regular" — aliased to Mazzard 400 in this build */
  font-family: 'Mazzard', 'Mazzard H', 'Helvetica Now Display', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 0.01em;
  padding: 0 16px 0 0;
  min-width: 0;
}

.cyb-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.cyb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(60px, 5vw, 80px);
  border: 0;
  border-radius: 6px;
  background: #FEAE00;
  color: #000000;
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 20px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.05s ease;
}

.cyb-cta:hover { filter: brightness(1.06); }
.cyb-cta:active { transform: translateY(1px); }
.cyb-cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.cyb-all-catalog {
  align-self: center;
  display: inline-block;
  margin-top: clamp(8px, 1vw, 16px);
  color: #FEAE00;
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.04vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.cyb-all-catalog:hover { filter: brightness(1.15); }

/* ── Tablet / Mobile ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .cyb-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .cyb-photo {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .cyb-frame {
    padding: 18px;
  }
  .cyb-card {
    padding: 28px 18px;
    gap: 28px;
  }
  .cyb-title {
    font-size: clamp(30px, 9vw, 48px);
  }
  .cyb-subtitle {
    font-size: 16px;
    text-align: left;
  }
}

/* Mazzard family loaded locally from /app/frontend/src/index.css (Light/Regular/Medium/Bold) */

body {
  margin: 0;
  line-height: normal;
}
:root {
  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-darkslategray-100: #333;
  --color-darkslategray-200: rgba(51, 51, 51, 0.09);
  --color-dimgray-100: #5e5e5e;
  --color-dimgray-200: #555452;
  --color-gainsboro-100: #e8e8e8;
  --color-gainsboro-200: #d9d9d9;
  --color-gray-100: #949494;
  --color-gray-200: #1d1d1b;
  --color-gray-300: #1c1c1c;
  --color-gray-400: #060606;
  --color-gray-500: #040103;
  --color-gray-600: rgba(255, 255, 255, 0.1);
  --color-gray-700: rgba(28, 28, 28, 0.45);
  --color-gray-800: rgba(255, 255, 255, 0.7);
  --color-orange-100: #feae00;
  --color-orange-200: rgba(254, 174, 0, 0.8);
  --color-white: #fff;
  --color-whitesmoke: #efefef;

  /* Gap */
  --gap-3: 3px;
  --gap-5: 5px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-9: 9px;
  --gap-10: 10px;
  --gap-11: 11px;
  --gap-12: 12px;
  --gap-14: 14px;
  --gap-15: 15px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-19: 19px;
  --gap-20: 20px;
  --gap-21: 21px;
  --gap-22: 22px;
  --gap-23: 23px;
  --gap-24: 24px;
  --gap-26: 26px;
  --gap-27: 27px;
  --gap-28: 28px;
  --gap-30: 30px;
  --gap-32: 32px;
  --gap-33: 33px;
  --gap-36: 36px;
  --gap-37: 37px;
  --gap-40: 40px;
  --gap-43: 43px;
  --gap-44: 44px;
  --gap-45: 45px;
  --gap-47: 47px;
  --gap-48: 48px;
  --gap-49: 49px;
  --gap-60: 60px;
  --gap-68: 68px;
  --gap-255: 255px;
  --gap-274: 274px;
  --gap--402: -402px;
  --gap-10_8: 10.8px;
  --gap-120_3: 120.3px;
  --gap-16_5: 16.5px;
  --gap-27_1: 27.1px;
  --gap-4_5: 4.5px;
  --gap-8_5: 8.5px;
  --gap-81_8: 81.8px;

  /* Padding */
  --padding-0: 0px;
  --padding-1: 1px;
  --padding-2: 2px;
  --padding-3: 3px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-7: 7px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-11: 11px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-15: 15px;
  --padding-16: 16px;
  --padding-17: 17px;
  --padding-18: 18px;
  --padding-19: 19px;
  --padding-20: 20px;
  --padding-21: 21px;
  --padding-22: 22px;
  --padding-23: 23px;
  --padding-24: 24px;
  --padding-25: 25px;
  --padding-26: 26px;
  --padding-27: 27px;
  --padding-28: 28px;
  --padding-29: 29px;
  --padding-30: 30px;
  --padding-32: 32px;
  --padding-33: 33px;
  --padding-36: 36px;
  --padding-37: 37px;
  --padding-40: 40px;
  --padding-42: 42px;
  --padding-44: 44px;
  --padding-45: 45px;
  --padding-47: 47px;
  --padding-48: 48px;
  --padding-49: 49px;
  --padding-50: 50px;
  --padding-59: 59px;
  --padding-64: 64px;
  --padding-66: 66px;
  --padding-68: 68px;
  --padding-72: 72px;
  --padding-75: 75px;
  --padding-80: 80px;
  --padding-100: 100px;
  --padding-106: 106px;
  --padding-136: 136px;
  --padding-161: 161px;
  --padding-165: 165px;
  --padding-11_5: 11.5px;
  --padding-11_9: 11.9px;
  --padding-17_5: 17.5px;
  --padding-22_5: 22.5px;
  --padding-24_5: 24.5px;
  --padding-3_2: 3.2px;
  --padding-4_1: 4.1px;
  --padding-40_5: 40.5px;

  /* BorderRadius */
  --br-4: 4px;
  --br-6: 6px;
  --br-7: 7px;
  --br-8: 8px;
  --br-50: 50%;

  /* Font — single brand family; Helvetica Now Display retired. */
  --font-helvetica-now-display: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mazzard: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* FontSize */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-50: 50px;
  --fs-51: 51px;
  --fs-60: 60px;
  --fs-64: 64px;
  --fs-80: 80px;
  --fs-100: 100px;

  /* Borders */
  --border-1: 1px solid var(--color-orange-100);

  /* WidthHeights */
  --height-1: 1px;
  --height-2: 2px;
  --height-5: 5px;
  --height-8: 8px;
  --height-10: 10px;
  --height-11: 11px;
  --height-13: 13px;
  --height-15: 15px;
  --height-16: 16px;
  --height-17: 17px;
  --height-18: 18px;
  --height-19: 19px;
  --height-21: 21px;
  --height-22: 22px;
  --height-24: 24px;
  --height-28: 28px;
  --height-30: 30px;
  --height-32: 32px;
  --height-36: 36px;
  --height-40: 40px;
  --height-41: 41px;
  --height-45: 45px;
  --height-50: 50px;
  --height-51: 51px;
  --height-52: 52px;
  --height-56: 56px;
  --height-60: 60px;
  --height-68: 68px;
  --height-70: 70px;
  --height-76: 76px;
  --height-83: 83px;
  --height-100: 100px;
  --height-727: 727px;
  --height-764: 764px;
  --height-0_6: 0.6px;
  --height-1089_5: 1089.5px;
  --height-118_3: 118.3px;
  --height-16_4: 16.4px;
  --height-160_5: 160.5px;
  --height-32_7: 32.7px;
  --height-323_2: 323.2px;
  --height-370_4: 370.4px;
  --height-373_5: 373.5px;
  --height-486_1: 486.1px;
  --height-49_5: 49.5px;
  --height-6_3: 6.3px;
  --height-61_5: 61.5px;
  --height-76_4: 76.4px;
  --height-80_5: 80.5px;
  --height-88_6: 88.6px;
  --max-w-calc100-44: calc(100% - 44px);
  --min-h-76: 76px;
  --min-h-727: 727px;
  --min-w-14: 14px;
  --min-w-15: 15px;
  --min-w-48: 48px;
  --min-w-53: 53px;
  --min-w-99: 99px;
  --min-w-100: 100px;
  --min-w-114: 114px;
  --min-w-261: 261px;
  --min-w-280: 280px;
  --min-w-396: 396px;
  --width-1: 1px;
  --width-2: 2px;
  --width-5: 5px;
  --width-12: 12px;
  --width-14: 14px;
  --width-16: 16px;
  --width-18: 18px;
  --width-20: 20px;
  --width-24: 24px;
  --width-26: 26px;
  --width-28: 28px;
  --width-32: 32px;
  --width-36: 36px;
  --width-44: 44px;
  --width-47: 47px;
  --width-52: 52px;
  --width-54: 54px;
  --width-64: 64px;
  --width-70: 70px;
  --width-71: 71px;
  --width-75: 75px;
  --width-78: 78px;
  --width-80: 80px;
  --width-81: 81px;
  --width-86: 86px;
  --width-98: 98px;
  --width-100: 100px;
  --width-103: 103px;
  --width-138: 138px;
  --width-158: 158px;
  --width-160: 160px;
  --width-161: 161px;
  --width-171: 171px;
  --width-172: 172px;
  --width-175: 175px;
  --width-178: 178px;
  --width-189: 189px;
  --width-193: 193px;
  --width-200: 200px;
  --width-204: 204px;
  --width-209: 209px;
  --width-217: 217px;
  --width-223: 223px;
  --width-242: 242px;
  --width-305: 305px;
  --width-348: 348px;
  --width-402: 402px;
  --width-455: 455px;
  --width-459: 459px;
  --width-460: 460px;
  --width-473: 473px;
  --width-475: 475px;
  --width-488: 488px;
  --width-517: 517px;
  --width-560: 560px;
  --width-564: 564px;
  --width-573: 573px;
  --width-812: 812px;
  --width-856: 856px;
  --width-1920: 1920px;
  --width-0_6: 0.6px;
  --width-200_2: 200.2px;
  --width-255_2: 255.2px;
  --width-364_5: 364.5px;
  --width-418_4: 418.4px;
  --width-429_8: 429.8px;
  --width-44_2: 44.2px;
  --width-508_3: 508.3px;
  --width-511_5: 511.5px;
  --width-6_3: 6.3px;
  --width-795_4: 795.4px;
  --width-867_8: 867.8px;

  /* LineHeights */
  --lh-16: 16px;
  --lh-18: 18px;
  --lh-19: 19px;
  --lh-22: 22px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-29: 29px;
  --lh-30: 30px;
  --lh-32: 32px;
  --lh-35: 35px;
  --lh-36: 36px;
  --lh-38: 38px;
  --lh-40: 40px;
  --lh-46: 46px;
  --lh-48: 48px;
  --lh-51: 51px;
  --lh-60: 60px;
  --lh-27_5: 27.5px;

  --left-0: 0px;
  --left-6: 6px;
  --left-8: 8px;
  --left-12: 12px;
  --left-14: 14px;
  --left-22: 22px;
  --left-24: 24px;
  --left-26: 26px;
  --left-30: 30px;
  --left-48: 48px;
  --left-582_8: 582.8px;
  --left-calc50-39: calc(50% - 39px);
  --left-calc50-406: calc(50% - 406px);
  --left-calc50-127_6: calc(50% - 127.6px);
  --top-0: 0px;
  --top-5: 5px;
  --top-6: 6px;
  --top-8: 8px;
  --top-12: 12px;
  --top-16: 16px;
  --top-20: 20px;
  --top-24: 24px;
  --top-26: 26px;
  --top-77: 77px;
  --top-505: 505px;
  --top--48: -48px;
  --top-12_4: 12.4px;
  --top-31_1: 31.1px;
  --top-500_9: 500.9px;
  --top-582_2: 582.2px;
  --top-calc50-37_9: calc(50% - 37.9px);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Mobile carousel "swipe hint" — a subtle, design-system-aware nudge on
 * the next-arrow buttons of Top Vehicles Deals, Before & After, and
 * Reviews carousels. A soft amber ring pulses outwards every 1.8s while
 * the chevron inside gently nudges 3px to the right and back — hinting
 * that a horizontal swipe is possible without dominating the visual
 * hierarchy or breaking layout stability.
 *
 * IMPORTANT: the transform animation is applied ONLY to the inner svg
 * chevron, NEVER to the button itself. This keeps the button's bounding
 * box stable for pointer events / Playwright click stability.
 *
 * Animation pauses on hover, focus, and when the user prefers reduced
 * motion (accessibility).
 * ───────────────────────────────────────────────────────────────────── */
@keyframes bibi-swipe-hint-ring {
  0%, 100% { box-shadow: 0 0 0 0    rgba(254, 174, 0, 0);    }
  50%      { box-shadow: 0 0 0 5px  rgba(254, 174, 0, 0.20); }
}

@keyframes bibi-swipe-hint-chevron {
  0%, 100% { transform: translateX(0);   }
  50%      { transform: translateX(3px); }
}

.bibi-swipe-hint {
  animation: bibi-swipe-hint-ring 1.8s ease-in-out infinite;
  animation-delay: 0.8s;
  will-change: box-shadow;
}

/* Move the chevron inside the button (not the button itself) — keeps the
 * click target perfectly stable while still cueing horizontal motion. */
.bibi-swipe-hint > svg {
  animation: bibi-swipe-hint-chevron 1.8s ease-in-out infinite;
  animation-delay: 0.8s;
  will-change: transform;
}

.bibi-swipe-hint:hover,
.bibi-swipe-hint:focus-visible,
.bibi-swipe-hint:disabled,
.bibi-swipe-hint:hover > svg,
.bibi-swipe-hint:focus-visible > svg,
.bibi-swipe-hint:disabled > svg {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .bibi-swipe-hint,
  .bibi-swipe-hint > svg {
    animation: none !important;
  }
}

/* Pixel-perfect 1920px Figma render.
 *
 * Anima/Figma export uses fixed-pixel positioning calibrated to a 1920×N
 * viewport.  We force the homepage root to render at exactly 1920px and
 * transform-scale it down so every breakpoint < 1920 still shows the exact
 * Figma layout (no overlap, no broken positioning).
 */

.figma-scaler_figmaScaler__Q8kVx {
  /* Outer wrapper — its width matches viewport, height matches scaled inner.
   * BG is pure black so it blends with the footer (the previous #1d1d1b
   * created a visible gray strip below the footer when the scaled inner
   * height was 1 px less than expected on certain viewports).
   *
   * IMPORTANT: We MUST clip on the y-axis as well. The inner element uses
   * `transform: scale(...)` which visually shrinks the content but does NOT
   * affect layout — the inner box still occupies its full natural height
   * (e.g. 19 700 px) inside the parent. If the parent doesn't clip, that
   * un-scaled box bleeds below the scaled content and creates an infinite
   * black void after the footer. `overflow: hidden` on both axes seals the
   * footer to the bottom of the page on every viewport size. */
  width: 100%;
  overflow: hidden;
  background: #000000;
  position: relative;
}

.figma-scaler_figmaInner__r-x5j {
  width: 1920px;
  transform-origin: top left;
  /* Scale ratio is set inline from JS so height adjusts dynamically. */
}

.frame-component18_heroContentWrapper__8w2vT {
  align-self: stretch;
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 0;
  font-family: var(--font-mazzard);
  color: var(--color-white);
  flex-shrink: 0;
}
.frame-component18_heroContent__Kk49E {
  position: relative;
  width: 100%;
  height: 1011px;
  background-color: var(--color-black);
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* LEFT half: solid black base (no image) — the mirrored car image sits
   on top of it at 10% opacity (see .image60Mirror below). */
.frame-component18_heroContent__Kk49E::before {
  content: "";
  grid-column: 1 / 2;
  background-color: var(--color-black);
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* LEFT-HALF DARKENING — plain black rectangle 962×1012 over the left
   half of the hero on top of the full-width main car image. The
   rectangle is mostly opaque (the underlying image is lightened by
   only 10%, i.e. ~90% black wash). */
.frame-component18_leftMirrorClip__3o7pP {
  position: absolute;
  top: 0;
  left: 0;
  width: 962px;
  height: 1012px;
  background-color: #000;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* Legacy class kept hidden in case any historic selector references it. */
.frame-component18_image60Mirror__obi6\+ { display: none; }

/* FULL-WIDTH car image — absolutely positioned background spanning the
   entire hero so the photograph reads as ONE coherent car. The left
   half is dimmed by .leftMirrorClip on top of it, the right half is
   shown at full brightness. */
.frame-component18_image60Parent__YCzTA {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.frame-component18_image60Icon__YxFhf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.frame-component18_image61Icon__UlfIh { display: none; }

.frame-component18_heroInner__F-j9U {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 165px 64px 156px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  z-index: 2;
}
.frame-component18_heroTextStack__faNjm {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 50%;
}
/* Regular 400 — small caps subtitle */
.frame-component18_americaKorea__YbKbp {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-white);
  font-family: inherit;
}
.frame-component18_heroHeadline__d-RBM {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Bold 700 — main display headline (FROM AUCTION / TO KEYS / IN YOUR HANDS) */
.frame-component18_fromAuction__yeI0w,
.frame-component18_toKeys__om3l9,
.frame-component18_inYourHands__lAzm\+ {
  margin: 0;
  font-size: 100px;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  font-family: inherit;
  letter-spacing: -0.02em;
}
.frame-component18_fromAuction__yeI0w {
  color: var(--color-orange-100);
}
.frame-component18_toKeys__om3l9 {
  color: var(--color-white);
}
.frame-component18_inYourHands__lAzm\+ {
  color: var(--color-orange-100);
}

/* Regular 400 — stats row */
.frame-component18_clientStats__ZFsRn {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 80px;
  font-size: 20px;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.frame-component18_statItem__1MLR3 {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  font-family: inherit;
  white-space: nowrap;
  font-size: 20px;
}

/* Filter controls bar */
.frame-component18_filterControlsWrapper__Epw3I {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 3;
}
.frame-component18_filterControls__E5-MX {
  width: 100%;
  max-width: 870px;
  display: flex;
  align-items: center;
  background-color: #000;
  border: 1px solid var(--color-orange-100);
  border-radius: 8px;
  padding: 0;
  height: 68px;
  overflow: visible;
  position: relative;
}
.frame-component18_filterCellWrap__15k5G {
  flex: 1 1;
  position: relative;
  height: 100%;
  display: flex;
}
.frame-component18_filterCell__b7p5v {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 100%;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s;
}
.frame-component18_filterCell__b7p5v:hover {
  background-color: rgba(254, 174, 0, 0.08);
}
.frame-component18_filterCellOpen__fouE6 {
  background-color: rgba(254, 174, 0, 0.12);
}
/* Regular 400 — labels */
.frame-component18_filterLabel__H5LDk {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  font-family: inherit;
}
.frame-component18_filterCaret__q6ARn {
  width: 20px;
  height: 20px;
  filter: brightness(2);
  transition: transform 0.2s ease;
}
.frame-component18_filterCaretOpen__xTsbf {
  transform: rotate(180deg);
}

/* === Dropdown panel === */
.frame-component18_dropdownPanel__8GcPo {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: #0a0a0a;
  border: 1px solid var(--color-orange-100);
  border-radius: 8px;
  padding: 0;
  z-index: 9999;
  max-height: 380px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0,0,0,0.6);
  animation: frame-component18_dropdownIn__oNtcJ 0.16s ease-out;
  isolation: isolate;
}
.frame-component18_dropdownSearchBox__AoLqm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(254, 174, 0, 0.4);
  background-color: #0a0a0a;
  flex-shrink: 0;
}
.frame-component18_dropdownSearchIcon__rsZAl {
  width: 18px;
  height: 18px;
  filter: brightness(2);
  opacity: 0.85;
  flex-shrink: 0;
}
.frame-component18_dropdownSearchInput__pE-Xu {
  flex: 1 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
}
.frame-component18_dropdownSearchInput__pE-Xu::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.frame-component18_dropdownList__xuisV {
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange-100) transparent;
  flex: 1 1;
}
.frame-component18_dropdownList__xuisV::-webkit-scrollbar {
  width: 6px;
}
.frame-component18_dropdownList__xuisV::-webkit-scrollbar-track {
  background: transparent;
}
.frame-component18_dropdownList__xuisV::-webkit-scrollbar-thumb {
  background: var(--color-orange-100);
  border-radius: 3px;
}
.frame-component18_dropdownEmpty__eb3s8 {
  padding: 14px 18px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  text-align: center;
  font-family: inherit;
}
@keyframes frame-component18_dropdownIn__oNtcJ {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.frame-component18_dropdownItem__VE2nj {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.12s, color 0.12s;
}
.frame-component18_dropdownItem__VE2nj:hover {
  background-color: var(--color-orange-100);
  color: #000;
  font-weight: 500;
}
.frame-component18_dropdownItemActive__sroWa {
  background-color: rgba(254, 174, 0, 0.18);
  color: var(--color-orange-100);
  font-weight: 500;
}
/* Items for brands/models/years that have ZERO cars in the catalog right
   now. We still let the user click them (they'll land on an empty catalog
   page with their filter applied — UX consistent with the catalog itself)
   but render them dimmed so they know in advance. */
.frame-component18_dropdownItemUnavailable__7XeuQ {
  color: rgba(255, 255, 255, 0.36);
}
.frame-component18_dropdownItemUnavailable__7XeuQ:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.frame-component18_dropdownItemCount__2716A {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.frame-component18_filterDivider__53-Af {
  width: 1px;
  height: 36px;
  background-color: var(--color-orange-100);
  flex-shrink: 0;
  opacity: 1;
}
/* Bold 700 — CTA button */
.frame-component18_findBtn__F7L0q {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 28px;
  background-color: var(--color-orange-100);
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  cursor: pointer;
  text-transform: uppercase;
  min-width: 171px;
  transition: filter 0.15s;
}
.frame-component18_findBtn__F7L0q:hover { filter: brightness(1.05); }

@media screen and (max-width: 1350px) {
  .frame-component18_heroContent__Kk49E { height: 820px; }
  .frame-component18_heroInner__F-j9U { padding: 120px 40px 90px; }
  .frame-component18_fromAuction__yeI0w, .frame-component18_toKeys__om3l9, .frame-component18_inYourHands__lAzm\+ { font-size: 76px; }
  .frame-component18_clientStats__ZFsRn { gap: 50px; font-size: 18px; }
  /* Scale the mirrored left-half image proportionally so it never
     overflows the shorter hero container at this breakpoint. */
  .frame-component18_image60Mirror__obi6\+ {
    top: 80px;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 925px) {
  .frame-component18_heroContent__Kk49E {
    height: auto;
    min-height: 720px;
    grid-template-columns: 1fr;
  }
  .frame-component18_heroContent__Kk49E::before { display: none; }
  .frame-component18_leftMirrorClip__3o7pP { display: none; }
  .frame-component18_image60Parent__YCzTA { grid-column: 1; }
  .frame-component18_heroInner__F-j9U { padding: 100px 24px 60px; gap: 36px; }
  .frame-component18_heroTextStack__faNjm { max-width: 100%; }
  .frame-component18_fromAuction__yeI0w, .frame-component18_toKeys__om3l9, .frame-component18_inYourHands__lAzm\+ { font-size: 50px; line-height: 60px; }
  .frame-component18_americaKorea__YbKbp { font-size: 19px; }
  .frame-component18_clientStats__ZFsRn { flex-wrap: wrap; gap: 16px 36px; font-size: 16px; }
  .frame-component18_filterControls__E5-MX { flex-wrap: wrap; height: auto; padding: 8px; }
  .frame-component18_filterCellWrap__15k5G { flex: 1 1 40%; min-width: 140px; }
  .frame-component18_filterCell__b7p5v { padding: 12px 16px; height: 48px; }
  .frame-component18_filterDivider__53-Af { display: none; }
  .frame-component18_findBtn__F7L0q { width: 100%; padding: 14px; height: 50px; }
  .frame-component18_dropdownPanel__8GcPo { left: 0; right: 0; }
}
@media screen and (max-width: 450px) {
  .frame-component18_heroInner__F-j9U { padding: 90px 16px 48px; }
  .frame-component18_fromAuction__yeI0w, .frame-component18_toKeys__om3l9, .frame-component18_inYourHands__lAzm\+ { font-size: 30px; line-height: 40px; }
}


/* ============================================================
   HERO REVEAL ANIMATIONS — "per-character diagonal slide-up"
   ------------------------------------------------------------
   Inspired by studionamma.com (Playground / Selected Projects).
   Each letter has its own small mask. The inner span is a
   BLOCK-LEVEL element inside the inline-block mask, so its
   `translateY(100%)` is exactly the mask's height — guaranteed
   to start fully hidden BELOW the mask's bottom edge, then
   rise UP into view.
   Per-character animation-delay grows left-to-right, producing
   the signature diagonal "wave" reveal.
   GPU-only properties (transform + opacity) for 60fps.
   Respects prefers-reduced-motion.
   IMPORTANT: line-heights are kept identical to the original
   typographic design (no extra vertical padding) so the
   animation NEVER affects final spacing/composition.
   ============================================================ */

/* --- Per-character mask + slider for the headline ---
   The headline is ALL UPPERCASE (no descenders) so we keep
   line-height: 1 — identical to the original CSS for these
   classes. No padding hacks. */
.frame-component18_charMask__DL7kA {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}

.frame-component18_charInner__ZnIDj {
  display: block;
  line-height: 1;
  transform: translate3d(0, 100%, 0); /* start fully BELOW the mask */
  opacity: 0;
  will-change: transform, opacity;
  animation-name: frame-component18_heroCharSlideUp__DRZrY;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  animation-fill-mode: both;
}

@keyframes frame-component18_heroCharSlideUp__DRZrY {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* --- Headline line boxes: keep ORIGINAL design line-height,
   no extra spacing introduced by the animation. --- */
.frame-component18_heroHeadline__d-RBM .frame-component18_fromAuction__yeI0w,
.frame-component18_heroHeadline__d-RBM .frame-component18_toKeys__om3l9,
.frame-component18_heroHeadline__d-RBM .frame-component18_inYourHands__lAzm\+ {
  display: block;
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
  /* line-height comes from the existing rule above (100%) */
}

/* --- Eyebrow ("AMERICA | KOREA") — also UPPERCASE, no descenders.
   Keep its original line-height (100%) so it doesn't grow. --- */
.frame-component18_heroTextStack__faNjm .frame-component18_americaKorea__YbKbp {
  display: block;
  overflow: hidden;
}
.frame-component18_heroTextStack__faNjm .frame-component18_americaKorea__YbKbp .frame-component18_lineInner__rAjoq {
  display: block;
  line-height: inherit;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  will-change: transform, opacity;
  animation: frame-component18_heroLineSlideUp__EVa4O 760ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

/* --- KPI rows: mixed case ("Over", "Real-time", "happy") so
   descenders ('p', 'y') exist. Use a tiny padding hack to
   give them room while keeping outward spacing intact. --- */
.frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* descender breathing room */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  line-height: 1;
}
.frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3 .frame-component18_lineInner__rAjoq {
  display: block;
  line-height: 1;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: frame-component18_heroLineSlideUp__EVa4O;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3:nth-child(1) .frame-component18_lineInner__rAjoq { animation-delay: 1300ms; }
.frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3:nth-child(2) .frame-component18_lineInner__rAjoq { animation-delay: 1400ms; }
.frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3:nth-child(3) .frame-component18_lineInner__rAjoq { animation-delay: 1500ms; }

@keyframes frame-component18_heroLineSlideUp__EVa4O {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* --- Filter bar fade-up --- */
.frame-component18_filterControlsWrapper__Epw3I {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: frame-component18_heroBarFadeUp__YLGei 820ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both;
  will-change: opacity, transform;
}
@keyframes frame-component18_heroBarFadeUp__YLGei {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Accessibility — disable motion entirely */
@media (prefers-reduced-motion: reduce) {
  .frame-component18_charMask__DL7kA,
  .frame-component18_heroTextStack__faNjm .frame-component18_americaKorea__YbKbp,
  .frame-component18_clientStats__ZFsRn .frame-component18_statItem__1MLR3 {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: inherit;
  }
  .frame-component18_charInner__ZnIDj,
  .frame-component18_lineInner__rAjoq,
  .frame-component18_filterControlsWrapper__Epw3I {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   Bulgarian translations are longer than the English originals
   (e.g. "FIND A CAR" → "НАМЕРИ АВТОМОБИЛ", "Any year" → "Всяка година").
   To preserve the SAME visual proportions of the English layout,
   we shrink font-size + letter-spacing on the BG variant only.
   The boxes / padding / gaps remain identical to the EN version.
*/
html[lang="bg"] .frame-component18_findBtn__F7L0q {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 0 22px;
  white-space: nowrap;
}
html[lang="bg"] .frame-component18_filterLabel__H5LDk {
  font-size: 14px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[lang="bg"] .frame-component18_filterCell__b7p5v {
  padding: 0 18px;
}
/* Tablet / smaller hero: scale BG label down a bit more so it always fits */
@media screen and (max-width: 1350px) {
  html[lang="bg"] .frame-component18_findBtn__F7L0q { font-size: 12px; padding: 0 18px; }
  html[lang="bg"] .frame-component18_filterLabel__H5LDk { font-size: 13px; }
  html[lang="bg"] .frame-component18_filterCell__b7p5v { padding: 0 14px; }
}

/* ────────── Bulgarian (BG) hero title overrides ──────────
   "До ключове / във Вашите ръце" is longer per-line than "to keys /
   in your hands" — shrink font-size + tighter letter-spacing on the
   BG variant so the hero title sits inside the same visual block
   as the English original (no wrap to extra lines, no overflow).
*/
html[lang="bg"] .frame-component18_fromAuction__yeI0w,
html[lang="bg"] .frame-component18_toKeys__om3l9,
html[lang="bg"] .frame-component18_inYourHands__lAzm\+ {
  font-size: 84px;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 1350px) {
  html[lang="bg"] .frame-component18_fromAuction__yeI0w,
  html[lang="bg"] .frame-component18_toKeys__om3l9,
  html[lang="bg"] .frame-component18_inYourHands__lAzm\+ { font-size: 64px; }
}
@media screen and (max-width: 925px) {
  html[lang="bg"] .frame-component18_fromAuction__yeI0w,
  html[lang="bg"] .frame-component18_toKeys__om3l9,
  html[lang="bg"] .frame-component18_inYourHands__lAzm\+ { font-size: 42px; line-height: 52px; }
}
@media screen and (max-width: 600px) {
  html[lang="bg"] .frame-component18_fromAuction__yeI0w,
  html[lang="bg"] .frame-component18_toKeys__om3l9,
  html[lang="bg"] .frame-component18_inYourHands__lAzm\+ { font-size: 26px; line-height: 34px; }
}

/* RollingNumber — slot-machine digit animation.
   Used to animate the last few digits of hero KPIs like "Over 5,000 cars".
   The component is fully self-contained: drop it anywhere inside a text
   container and it will inherit the surrounding font size / colour. */

.RollingNumber_rolling__mXIir {
  display: inline-flex;
  align-items: baseline;
  /* Tabular numerals make every digit the same width so the line doesn't
     visibly jitter when, say, a 9 rolls to a 0. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "tnum";
  letter-spacing: 0;
}

/* Each digit is a fixed-height window onto a vertical column of 0–9. */
.RollingNumber_digit__3zZ5d {
  display: inline-block;
  position: relative;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: baseline;
  /* `ch` keeps the slot width tied to the digit width of the current font.
     Combined with tabular-nums this guarantees no horizontal jitter. */
  width: 1ch;
  text-align: center;
}

/* The reel: 10 cells stacked vertically. Animating `translateY` slides the
   reel up/down to expose the right digit. The transition is intentionally
   long-tail so the motion reads as elegant rather than mechanical. */
.RollingNumber_column__Se3Rc {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.RollingNumber_cell__VSGVr {
  display: block;
  height: 1em;
  line-height: 1;
  flex: 0 0 1em;
}

/* Static glyphs (e.g. the thousands comma) keep their natural width. */
.RollingNumber_sep__la\+Sy {
  display: inline-block;
  vertical-align: baseline;
}

/* Invisible placeholder used to keep the line width steady when a shorter
   value is rendered (e.g. "997" inside a "5,000"-wide slot). */
.RollingNumber_spacer__ej8hO {
  display: inline-block;
  vertical-align: baseline;
  visibility: hidden;
  width: 1ch;
  text-align: center;
}

/* Honour user motion preferences — fall back to a static target. */
@media (prefers-reduced-motion: reduce) {
  .RollingNumber_column__Se3Rc { transition: none; }
  .RollingNumber_suffix__FvXv4 { transition: none !important; }
}

/* --- Suffix (e.g. "+" after "500") ---
   Hidden by default; pops in with a smooth scale + fade once the counter
   lands on its target value, then quietly disappears when the counter
   loops back to the start. Animates ONLY when toggling — never replays
   spuriously — because the transition is driven by class swap, not
   keyframes. */
.RollingNumber_suffix__FvXv4 {
  display: inline-block;
  margin-left: 0.04em;        /* hair-line gap from the last digit */
  opacity: 0;
  transform: translate3d(0, 12%, 0);
  transform-origin: 50% 60%;
  /* Calm settle — no overshoot, no scale wobble. The "+" simply fades
     up into place and stays there. Anything bouncier produced a faint
     "micro-jiggle" right after the number stopped ticking. */
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.RollingNumber_suffixVisible__8layl {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ──────────────────────────────────────────────────────────────────
   BrandLogos1 — "Most popular brands" expandable grid.
   • 6 brands per row, evenly spaced with thin amber vertical dividers
     between cells in the same row (Figma look).
   • Each cell is 90px tall (the same height the original single-row
     layout used) so vertical rhythm stays uniform when expanding.
   • Subtle hover lift + amber glow → reinforces clickability while
     respecting the dark theme.
   ────────────────────────────────────────────────────────────────── */

.brand-logos1_brandLogos__SUHZf {
  align-self: stretch;
  display: flex;
  justify-content: center;
  /* Per Figma: gray BOTTOM zone (below brands card) is 316px tall total. */
  padding: 0 20px 226px;
  box-sizing: border-box;
  flex-shrink: 0;
  text-align: left;
  font-size: 32px;
  color: var(--color-white);
  font-family: var(--font-mazzard);
  background-color: var(--color-gray-200);
}

.brand-logos1_popularBrands__\+fiSL {
  width: 1706px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 82px;
}

.brand-logos1_rectangleParent__awqjG {
  background-color: var(--color-black);
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  border-radius: 0;
}

.brand-logos1_brandsHeader__uEkV5 {
  display: flex;
  justify-content: center;
}

.brand-logos1_mostPopularBrands__fPjnF {
  margin: 0;
  font-size: inherit;
  line-height: 100%;
  text-transform: uppercase;
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 400;
  color: var(--color-white);
}

/* ────────── Grid ────────── */
.brand-logos1_brandsGrid__c7Xx3 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  grid-row-gap: 32px;
  row-gap: 32px;
  grid-column-gap: 0;
  column-gap: 0;
}

.brand-logos1_brandItem__NBTJU {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 24px;
  text-decoration: none;
  color: inherit;
  isolation: isolate; /* keep ::before glow contained */
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Per-logo cascade reveal (left → right) ──
   Same ease-out-quint physics as the hero "FROM AUCTION TO KEYS"
   headline, so the two reveals feel like one continuous motion.
   The animation is paused until the section gets the global
   `.is-visible` class (flipped by IntersectionObserver via
   useInView), then each logo plays in turn thanks to the
   per-index inline `animation-delay` set in the JSX. */
.brand-logos1_brandReveal__bVnQN {
  opacity: 0;
  transform: translate3d(-44px, 18px, 0);
  will-change: opacity, transform;
  animation-name: brand-logos1_brandLogoReveal__y1IrT;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.is-visible .brand-logos1_brandReveal__bVnQN {
  animation-play-state: running;
}

@keyframes brand-logos1_brandLogoReveal__y1IrT {
  0% {
    opacity: 0;
    transform: translate3d(-44px, 18px, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logos1_brandReveal__bVnQN {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Soft amber radial glow that lights up under the logo on hover.
   June 2026 — toned down from a hot 0.22 alpha to a subtle 0.10 so the
   yellow tint doesn't dominate the hovered card. */
.brand-logos1_brandItem__NBTJU::before {
  content: "";
  position: absolute;
  inset: 6px 12px;
  border-radius: 14px;
  background: radial-gradient(
    closest-side,
    rgba(254, 174, 0, 0.10),
    rgba(254, 174, 0, 0.03) 60%,
    transparent 75%
  );
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

/* Vertical divider between cells of the SAME row (every 6 = new row) */
.brand-logos1_brandItem__NBTJU:not(:nth-child(6n))::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background-color: var(--color-orange-100);
  opacity: 0.7;
  transition: opacity 240ms ease;
}

.brand-logos1_brandItem__NBTJU:hover {
  transform: translateY(-3px);
}
.brand-logos1_brandItem__NBTJU:hover::before {
  opacity: 1;
  transform: scale(1);
}
.brand-logos1_brandItem__NBTJU:hover .brand-logos1_brandLogo__z3Mkl {
  transform: scale(1.06);
  filter: brightness(1.04) saturate(1.08)
          drop-shadow(0 4px 10px rgba(254, 174, 0, 0.18));
}
/* Dividers stay visible at all times — including on hover.
   (Previously hovering hid the current item's right divider AND the
   next item's right divider, which made 2 separators disappear at once
   and broke the visual rhythm of the 6-cell row.) */
.brand-logos1_brandItem__NBTJU:hover::after,
.brand-logos1_brandItem__NBTJU:hover + .brand-logos1_brandItem__NBTJU::after {
  opacity: 0.7;
}

.brand-logos1_brandItem__NBTJU:focus-visible {
  outline: 2px solid var(--color-orange-100);
  outline-offset: 4px;
  border-radius: 6px;
}

.brand-logos1_brandLogo__z3Mkl {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 260ms ease;
  will-change: transform, filter;
}

.brand-logos1_brandFallback__37C8O {
  display: none;
  font-family: var(--font-mazzard);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ────────── Meta counter ────────── */
.brand-logos1_brandsMeta__FK9G8 {
  margin-top: -8px;
  text-align: center;
  font-family: var(--font-mazzard);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange-100);
  font-weight: 600;
}
.brand-logos1_brandsMetaDim__-NaON {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

/* ────────── "OTHER BRANDS +" toggle ────────── */
.brand-logos1_otherBrands__zlaOu {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: var(--color-orange-100);
}
.brand-logos1_otherBrands2__cHs8x {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  text-decoration: underline;
  line-height: 100%;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: inherit;
  transition: color 180ms ease, transform 180ms ease;
}
.brand-logos1_otherBrands2__cHs8x:hover {
  color: #ffd166;
  transform: translateY(-1px);
}

/* ────────── Responsive ────────── */
@media screen and (max-width: 1350px) {
  .brand-logos1_rectangleParent__awqjG { padding: 50px 40px; }
  .brand-logos1_brandItem__NBTJU { padding: 0 12px; }
}

@media screen and (max-width: 1100px) {
  .brand-logos1_brandsGrid__c7Xx3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand-logos1_brandItem__NBTJU:not(:nth-child(6n))::after { display: none; }
  .brand-logos1_brandItem__NBTJU:not(:nth-child(4n))::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background-color: var(--color-orange-100);
    opacity: 0.5;
  }
}

@media screen and (max-width: 760px) {
  .brand-logos1_brandLogos__SUHZf { padding-bottom: 100px; }
  .brand-logos1_rectangleParent__awqjG { padding: 40px 24px; gap: 36px; }
  .brand-logos1_brandsGrid__c7Xx3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .brand-logos1_brandItem__NBTJU { height: 64px; padding: 0 8px; }
  .brand-logos1_brandItem__NBTJU::after,
  .brand-logos1_brandItem__NBTJU:not(:nth-child(4n))::after,
  .brand-logos1_brandItem__NBTJU:not(:nth-child(6n))::after { display: none !important; }
  .brand-logos1_mostPopularBrands__fPjnF { font-size: 22px; }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   "MOST POPULAR BRANDS" → "НАЙ-ПОПУЛЯРНИ МАРКИ" — wider in Cyrillic.
   Slight font-size shrink + tighter letter-spacing so the section
   header occupies the SAME visual width as in English.
*/
html[lang="bg"] .brand-logos1_mostPopularBrands__fPjnF {
  letter-spacing: -0.005em;
}
html[lang="bg"] .brand-logos1_otherBrands2__cHs8x {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 1350px) {
  html[lang="bg"] .brand-logos1_mostPopularBrands__fPjnF { font-size: 20px; }
}

/* ============================================================
   AnimatedHeading — site-wide per-character diagonal slide-up
   ------------------------------------------------------------
   The component renders a heading tag (`as` prop) with this
   wrapping structure:

   <Tag class="heading [.isVisible]">
     <span class="word">                ← keeps a word atomic
       <span class="charMask">           ← inline-block, overflow:hidden
         <span class="charInner" style="animation-delay">
           X
         </span>
       </span>
     </span>
   </Tag>

   Animation rules:
     – inner stays hidden BELOW the mask until `.isVisible` is added
     – when `.isVisible` toggles ON, each `.charInner` starts the
       `heroCharSlideUp` keyframe with its inline `animation-delay`
     – left chars start sooner, right chars later → diagonal wave

   This file only declares the structural animation. The heading's
   typographic style (font-size / weight / colour / line-height) is
   inherited from the `className` you pass in.

   The CSS preserves the host's line-height/spacing — the per-char
   mask is line-height: 1 with no extra padding, so it never changes
   layout when descenders are absent (uppercase headings). Mixed
   case headings should opt-in to a slightly looser line-height on
   the host if descenders would otherwise be clipped.
   ============================================================ */

.AnimatedHeading_heading__7gY1j {
  /* Make sure transform-origin doesn't shift inline-block baseline */
  display: block;
}

/* Keep words atomic so wrap happens between words, never inside */
.AnimatedHeading_word__8DGU4 {
  display: inline-block;
  white-space: nowrap;
}

.AnimatedHeading_charMask__a20-u {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
  /* No padding hacks here — host's line-height carries any descender
     room. For headings that contain descenders ("y", "g", "p"), the
     ancestor heading should keep its native line-height (>= 1.05). */
}

.AnimatedHeading_charInner__1FOVr {
  display: block;
  line-height: 1;
  /* Initial state — kept here so the element is hidden BEFORE the
     `.isVisible` class is applied (otherwise React's first paint
     would flash the final state for an instant). */
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

/* When the heading enters the viewport, swap to the animated state.
   The animation-name + duration are baked in here; the
   `animation-delay` is set inline per-character (from JS) so the
   diagonal wave is configurable from the call-site (`stepMs` prop). */
.AnimatedHeading_isVisible__DQlAz .AnimatedHeading_charInner__1FOVr {
  animation-name: AnimatedHeading_heroCharSlideUp__xINm1;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  animation-fill-mode: both;
  /* animation-delay & animation-duration are set inline (see JSX) */
}

@keyframes AnimatedHeading_heroCharSlideUp__xINm1 {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Reduced motion: drop everything to a static final state */
@media (prefers-reduced-motion: reduce) {
  .AnimatedHeading_charInner__1FOVr,
  .AnimatedHeading_isVisible__DQlAz .AnimatedHeading_charInner__1FOVr {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   VehicleDeals1 — header of the "Top vehicles deals of the week".

   Spec (from the Figma Dev-Mode inspector the user shared):
     • Bracket "Vector" : 13 × 76 px,  stroke 3 px,  color #555452
     • Title gap         : 28 px between the two H2 lines
     • Title-→-tagline gap : ≈ 100 px (matches the Figma render)
     • Tagline alignment : right edge of the inner content area
       (flush with the right edge of the cards grid)
   Typography: Mazzard H Bold (700) + Mazzard H Medium (500).
   ────────────────────────────────────────────────────────────── */

.vehicle-deals1_vehicleDeals__g12v3 {
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 100px;                /* generous breathing room between title and tagline */
  font-family: var(--font-mazzard);
}

/* ── Title block (centered, full-width) ──────────────────────── */
.vehicle-deals1_titleBlock__x3bOh {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;                 /* original Figma gap-28 between the two lines */
  text-align: center;
}
.vehicle-deals1_titleOrange__10DKG,
.vehicle-deals1_titleWhite__L6idS {
  margin: 0;
  font-weight: 700;          /* Mazzard H Bold */
  font-size: clamp(40px, 4.4vw, 70px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.vehicle-deals1_titleOrange__10DKG { color: var(--color-orange-100); }
.vehicle-deals1_titleWhite__L6idS  { color: #fff; }

/* ── Tagline wrap : right-align the bracket frame ────────────── */
.vehicle-deals1_taglineWrap__DFIGI {
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
}
.vehicle-deals1_tagline__Us2nf {
  display: inline-flex;
  align-items: stretch;
  gap: 70px;                                   /* Figma: 70 px inside brackets (matches Before/After) */
  padding: 4px 0;
}

/* ── Brackets (gray #555452, 3 px stroke, full tagline height) ── */
.vehicle-deals1_bracket__WHF1i,
.vehicle-deals1_bracketRight__cXSnR {
  flex: 0 0 auto;
  width: 13px;
  height: auto;
  align-self: stretch;
  display: block;
}
.vehicle-deals1_bracketRight__cXSnR {
  transform: scaleX(-1);     /* mirror "[" into "]" */
}

/* ── Tagline text ───────────────────────────────────────────── */
.vehicle-deals1_taglineText__6la0G {
  margin: 0;
  font-size: 24px;            /* original Figma --fs-24 */
  /* All three lines render with the SAME weight (Bold) so the rotating
     amber accent below never causes a width-jump as the active line
     changes. */
  font-weight: 700;
  line-height: 1.0;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center each line so brackets look symmetric */
  gap: 22px;                  /* visible spacing between the 3 lines */
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* Static colors — no animation. Line 1 yellow, lines 2 & 3 white. */
.vehicle-deals1_taglineLine__zyOo3 {
  color: #ffffff;
}
.vehicle-deals1_taglineLine1__pcMYI { color: var(--color-orange-100); }
.vehicle-deals1_taglineLine2__Vihn0,
.vehicle-deals1_taglineLine3__xecDq { color: #ffffff; }

/* Legacy alias kept so any external consumer of `.taglineAmber` still
   gets the brand color (the homepage no longer uses it). */
.vehicle-deals1_taglineAmber__WmFwm {
  color: var(--color-orange-100);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media screen and (max-width: 1100px) {
  .vehicle-deals1_vehicleDeals__g12v3 { gap: 60px; }
  .vehicle-deals1_taglineWrap__DFIGI { justify-content: center; }
}
@media screen and (max-width: 925px) {
  .vehicle-deals1_titleBlock__x3bOh { gap: 18px; }
  .vehicle-deals1_titleOrange__10DKG,
  .vehicle-deals1_titleWhite__L6idS { font-size: 44px; }
  .vehicle-deals1_taglineText__6la0G { font-size: 18px; gap: 14px; }
}
@media screen and (max-width: 600px) {
  .vehicle-deals1_vehicleDeals__g12v3 { gap: 40px; }
  .vehicle-deals1_titleBlock__x3bOh { gap: 14px; }
  .vehicle-deals1_titleOrange__10DKG,
  .vehicle-deals1_titleWhite__L6idS { font-size: 32px; }
  .vehicle-deals1_taglineText__6la0G {
    font-size: 14px;
    gap: 10px;
    white-space: normal;
  }
  .vehicle-deals1_tagline__Us2nf { gap: 14px; }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   BG title "Топ автомобилни оферти" is wider than "Top vehicles deals".
   Shrink font + tighten letter-spacing so it occupies the SAME visual width.
*/
html[lang="bg"] .vehicle-deals1_titleOrange__10DKG,
html[lang="bg"] .vehicle-deals1_titleWhite__L6idS {
  font-size: clamp(34px, 3.9vw, 60px);
  letter-spacing: -0.01em;
}
html[lang="bg"] .vehicle-deals1_taglineText__6la0G {
  letter-spacing: 0;
}
@media screen and (max-width: 925px) {
  html[lang="bg"] .vehicle-deals1_titleOrange__10DKG,
  html[lang="bg"] .vehicle-deals1_titleWhite__L6idS { font-size: 38px; }
}
@media screen and (max-width: 600px) {
  html[lang="bg"] .vehicle-deals1_titleOrange__10DKG,
  html[lang="bg"] .vehicle-deals1_titleWhite__L6idS { font-size: 28px; }
}

/* ───────────────────────────────────────────────────────────────
   FrameComponent20 — Top deals filter row.
   Two segmented controls + proposals counter, all on one line at
   1920px and gracefully wrapping below 1350 / 925.
   ─────────────────────────────────────────────────────────── */

.frame-component20_frameWrapper__-Q7xn {
  align-self: stretch;
  font-family: var(--font-mazzard);
  color: #fff;
}
.frame-component20_frameParent__6xybm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.frame-component20_frameGroup__NQqQX {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

/* ── Segmented control container ─────────────────────────── */
.frame-component20_segment__g307e {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-orange-100);
  border-radius: 8px;
  padding: 6px;
  gap: 4px;
  background: transparent;
}
.frame-component20_segmentBtn__GVWpG,
.frame-component20_tierBtn__8L\+A8 {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 6px;
}
.frame-component20_segmentBtn__GVWpG {
  width: 64px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.frame-component20_segmentBtnActive__J7fTZ {
  background: var(--color-orange-100);
  color: #000;
}
/* Vehicle silhouette rendered via CSS mask so the same PNG can be
 * recoloured: white when inactive, black when on the amber bg. */
.frame-component20_segmentIcon__VWaMZ {
  width: 28px;
  height: 28px;
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.frame-component20_tierBtn__8L\+A8 {
  min-width: 96px;
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 700;          /* H Bold */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.frame-component20_tierBtnActive__rH-6u {
  background: var(--color-orange-100);
  color: #000;
}
.frame-component20_segmentBtn__GVWpG:hover:not(.frame-component20_segmentBtnActive__J7fTZ),
.frame-component20_tierBtn__8L\+A8:hover:not(.frame-component20_tierBtnActive__rH-6u) {
  background: rgba(254, 174, 0, 0.12);
}

/* ── Proposals counter (right side) ──────────────────────── */
.frame-component20_proposalsBlock__NUjDT {
  flex: 0 0 auto;
  font-family: inherit;
}
.frame-component20_proposals__m7w-o {
  /* Per Figma spec — Mazzard H Medium 12px, uppercase, 0.06em tracking.
     Label stays white, the count value is brand amber so the user can
     scan how many cars are available at a glance. */
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;                          /* H Medium per Figma */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.frame-component20_proposalsLabel__j5K1P {
  color: #fff;
}
.frame-component20_proposalsSep__GAYqX {
  color: #fff;
  opacity: 0.6;
}
.frame-component20_proposalsCount__tDQ7G {
  color: #feae00;
  font-weight: 500;
  /* Subtle slide-in when the number changes (e.g., when the live
     parse finishes after the initial 0 placeholder). Keeps motion
     consistent with the rest of the site. */
  transition: color 200ms ease;
}

@media screen and (max-width: 925px) {
  .frame-component20_frameParent__6xybm {
    flex-direction: column;
    align-items: flex-start;
  }
  .frame-component20_segment__g307e { flex: 0 0 auto; }
  .frame-component20_tierBtn__8L\+A8 { min-width: 80px; padding: 0 14px; font-size: 14px; }
}

/* =============================================================================
 * BIBI Cars — "Calculate a car yourself with a price guarantee" block
 *
 * Pixel-perfect Figma frame: 1922 × 1286 px (homepage scaled to 1920 design)
 *
 *   Outer yellow ring : #FEAE00       — 96 px on every side
 *   Inner card        : #000000       — 1640 px wide (max), 1094 px tall
 *   Title             : Mazzard H Bold, 96 px / 100 % line-height
 *                         line 1 → #FEAE00  ("Calculate a car yourself")
 *                         line 2 → #FFFFFF  ("with a price guarantee")
 *                       text-align: center, gap between lines: 8 px
 *   Body grid         : two columns, square truck photo on the left,
 *                         form on the right, vertically centered
 *   Subtitle          : "From the USA and Korea"
 *                         Mazzard H Medium, 28 px, white
 *   Search input      : 1 px solid #FEAE00, transparent fill, 64 px tall,
 *                         "Search by VIN or lot number" -
 *                         Helvetica Now Display Regular (Mazzard 400 alias)
 *   CALCULATE button  : #FEAE00 fill, 80 px tall, Mazzard H Medium uppercase
 *   "all catalog +"   : Mazzard H Medium uppercase, #FEAE00, underlined
 * ========================================================================== */

.frame-component22_rectangleParent__nKMj- {
  align-self: stretch;
  background-color: var(--color-orange-100);
  display: flex;
  justify-content: center;
  /* Figma:  outer yellow rim ≈ 96 px on every side, EQUAL on all 4 sides.
   * The inner card is allowed to fill the full available width so that the
   * visible yellow border stays exactly 96 px on top, right, bottom, left.
   * Without this, max-width on inner caused horizontal margins (auto) to
   * stack on top of the 96 px padding → asymmetric rim (96 vs 140 px).  */
  padding: 96px;
  box-sizing: border-box;
  font-family: var(--font-mazzard);
}

.frame-component22_calculate__NkgZq {
  width: 100%;
  /* Inner card fills 100 % of remaining width so the yellow rim stays
   * symmetric (96 px on all sides). No max-width clamp here. */
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  /* Figma: inner padding ≈ 80px top / 80px sides / 80px bottom  */
  padding: 80px;
  gap: 64px;
  box-sizing: border-box;
}

/* ── Title ───────────────────────────────────────────────────────────── */

.frame-component22_calculateACar__Ili3h {
  margin: 0;
  font-family: var(--font-mazzard);
  /* Mazzard H Bold = 700 */
  font-weight: 700;
  font-size: 96px;
  line-height: 100%;
  letter-spacing: -0.005em;
  color: var(--color-orange-100);
  text-align: center;
  text-transform: none;
}

.frame-component22_withAPrice__vpjrO {
  display: inline-block;
  color: var(--color-white);
  font-weight: 700;
}

/* ── Body grid ───────────────────────────────────────────────────────── */

.frame-component22_calcGrid__jM0i7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 60px;
  gap: 60px;
  align-items: center;
}

.frame-component22_imageBox__jEkP9 {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #0a0a0a;
  display: block;
}

.frame-component22_image93Icon__iInO2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Right column ────────────────────────────────────────────────────── */

.frame-component22_calcRight__Yo1Ld {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Per Figma spacing spec:
   *   • "From the USA and Korea" → search input   = 90 px
   *   • search input             → CALCULATE btn  = 60 px
   *   • CALCULATE btn            → "all catalog +" = 60 px
   * The flex `gap` is zeroed-out and each child carries an explicit
   * `margin-top` so the spec stays self-documenting and resilient to
   * future reorders. */
  gap: 0;
  color: var(--color-white);
}

.frame-component22_fromTheUsaContainer__Xvy0H {
  margin: 0;
  /* Mazzard H Medium = 500 */
  font-family: var(--font-mazzard);
  font-weight: 500;
  font-size: 28px;
  line-height: 100%;
  color: var(--color-white);
}

.frame-component22_searchForm__x3jKk {
  display: flex;
  flex-direction: column;
  /* Figma: search input → CALCULATE button = 60 px */
  gap: 60px;
  width: 100%;
  /* Figma: "From the USA and Korea" → search input = 90 px */
  margin-top: 90px;
}

.frame-component22_inputWrapper__LFoq0 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 64px;
  background: transparent;
  border: 1px solid var(--color-orange-100);
  border-radius: 8px;
  padding: 0 22px;
  box-sizing: border-box;
  transition: box-shadow 0.18s ease;
}

.frame-component22_inputWrapper__LFoq0:focus-within {
  box-shadow: 0 0 0 2px rgba(254, 174, 0, 0.25);
}

.frame-component22_boxiconssearch__EQVvV {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(74%) sepia(58%) saturate(2856%)
    hue-rotate(2deg) brightness(105%) contrast(101%);
}

.frame-component22_searchByVin__HUTyR {
  flex: 1 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  height: 100%;
  /* Helvetica Now Display Regular  →  aliased to Mazzard 400 in this build  */
  font-family: 'Mazzard', 'Mazzard H', 'Helvetica Now Display', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

.frame-component22_searchByVin__HUTyR::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.frame-component22_calcCta__57m8v {
  width: 100%;
  height: 80px;
  border: 0;
  border-radius: 8px;
  background-color: var(--color-orange-100);
  color: var(--color-black);
  /* Mazzard H Medium = 500 */
  font-family: var(--font-mazzard);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.05s ease;
}

.frame-component22_calcCta__57m8v:hover  { filter: brightness(1.06); }
.frame-component22_calcCta__57m8v:active { transform: translateY(1px); }
.frame-component22_calcCta__57m8v:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.frame-component22_allCatalog__pL6\+x {
  align-self: center;
  display: inline-block;
  /* Figma: CALCULATE button → "all catalog +" link = 60 px */
  margin-top: 60px;
  /* Mazzard H Medium = 500 */
  font-family: var(--font-mazzard);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-orange-100);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.frame-component22_allCatalog__pL6\+x:hover { filter: brightness(1.15); }

/* ── Tablet / mobile ─────────────────────────────────────────────────── */

@media screen and (max-width: 1280px) {
  .frame-component22_rectangleParent__nKMj- { padding: 64px; }
  .frame-component22_calculate__NkgZq { padding: 56px; gap: 48px; }
  .frame-component22_calculateACar__Ili3h { font-size: 72px; }
  .frame-component22_calcGrid__jM0i7 { gap: 40px; }
  .frame-component22_calcCta__57m8v { height: 70px; font-size: 18px; }
  /* Scale spec proportionally on tablet: 90/60/60 → 60/40/40 */
  .frame-component22_searchForm__x3jKk { margin-top: 60px; gap: 40px; }
  .frame-component22_allCatalog__pL6\+x { margin-top: 40px; }
}

@media screen and (max-width: 925px) {
  .frame-component22_rectangleParent__nKMj- { padding: 32px 18px; }
  .frame-component22_calculate__NkgZq { padding: 32px 22px; gap: 28px; }
  .frame-component22_calculateACar__Ili3h { font-size: 40px; line-height: 1.05; }
  .frame-component22_calcGrid__jM0i7 { grid-template-columns: 1fr; gap: 24px; }
  .frame-component22_imageBox__jEkP9 { max-width: 560px; margin: 0 auto; }
  .frame-component22_fromTheUsaContainer__Xvy0H { font-size: 20px; }
  .frame-component22_inputWrapper__LFoq0 { height: 56px; padding: 0 16px; }
  .frame-component22_searchByVin__HUTyR { font-size: 16px; }
  .frame-component22_calcCta__57m8v { height: 60px; font-size: 16px; letter-spacing: 0.12em; }
  .frame-component22_allCatalog__pL6\+x { font-size: 14px; letter-spacing: 0.12em; }
  /* Mobile: keep the rhythm but more compact (40 / 28 / 28). */
  .frame-component22_searchForm__x3jKk { margin-top: 40px; gap: 28px; }
  .frame-component22_allCatalog__pL6\+x { margin-top: 28px; }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   BG title "Изчислете автомобила сами" (24 chars) is longer than
   the EN "Calculate a car yourself" (24 chars — actually same length
   but wider average char-width in Cyrillic). Shrink font-size to fit
   the SAME visual box (same height, same alignment).
*/
html[lang="bg"] .frame-component22_calculateACar__Ili3h {
  font-size: 80px;
  letter-spacing: -0.015em;
}
html[lang="bg"] .frame-component22_fromTheUsaContainer__Xvy0H {
  font-size: 26px;
  letter-spacing: -0.005em;
}
html[lang="bg"] .frame-component22_calcCta__57m8v {
  font-size: 18px;
  letter-spacing: 0.08em;
}
html[lang="bg"] .frame-component22_allCatalog__pL6\+x {
  font-size: 16px;
  letter-spacing: 0.10em;
}
@media screen and (max-width: 1280px) {
  html[lang="bg"] .frame-component22_calculateACar__Ili3h { font-size: 60px; }
}
@media screen and (max-width: 925px) {
  html[lang="bg"] .frame-component22_calculateACar__Ili3h { font-size: 34px; line-height: 1.06; }
  html[lang="bg"] .frame-component22_fromTheUsaContainer__Xvy0H { font-size: 18px; }
  html[lang="bg"] .frame-component22_calcCta__57m8v { font-size: 14px; letter-spacing: 0.06em; }
  html[lang="bg"] .frame-component22_allCatalog__pL6\+x { font-size: 13px; letter-spacing: 0.08em; }
}

/* =============================================================================
 * BIBI Cars — "How we work" block
 *
 * Pixel-perfect Figma rebuild.
 *   Background      : #000000 (var(--color-black))
 *   Title           : "How we work" - Mazzard H Bold, 96px, color #FEAE00,
 *                       uppercase, top-left of inner container.
 *   Tag (right)     : bracketed label
 *                       [ WE WORK FOR EACH CLIENT
 *                         DEPENDING ON THE BUDGET ]
 *                       Brackets: 3px stroke #555452, height 76px
 *                       Line 1: orange (#FEAE00), Mazzard H Medium, ~16-18px
 *                       Line 2: white,           Mazzard H Medium, ~16-18px
 *
 *   Cards (3 across):
 *     [1] Standard          — bg #1D1D1B (dark)
 *     [2] Turnkey           — bg #FEAE00 (yellow)  + "popular" pill
 *     [3] Sourcing+Delivery — bg #1D1D1B (dark)
 *
 *   Each card has:
 *     - top-left bracket counter [1] / [2] / [3] (3px stroke #555452 or #040103)
 *     - title          : Mazzard H Bold, 40px (orange on dark, #040103 on yellow)
 *     - description    : Helvetica Now Display Regular, 22-24px
 *                          (white on dark, #040103 on yellow)
 *     - cta line       : Helvetica Now Display Bold, 30-32px
 *                          (orange on dark, #040103 on yellow)
 *
 *   Bottom card:
 *     "Have a question? / Contact us" - Mazzard H Bold, 32px
 *     phones - Helvetica Now Display Bold, 24px, orange
 *     1px #FEAE00 border, rounded 8px
 * ========================================================================== */

.frame-component23_howWeWorkSection__cTLdo {
  align-self: stretch;
  background-color: var(--color-black);
  font-family: var(--font-mazzard);
  width: 100%;
  display: flex;
  justify-content: center;
}

.frame-component23_inner__4ks4n {
  width: 100%;
  max-width: 1920px;
  /* Per Figma spec: section total 1920×1813.
     – top padding to "HOW WE WORK" title: 154
     – horizontal: 0 (cards row spans full 1920 width)
     – bottom padding: 154 */
  padding: 154px 0 154px;
  display: flex;
  flex-direction: column;
  gap: 131px;   /* brackets-bottom → cards-top: 130.83 ≈ 131 */
  box-sizing: border-box;
}

/* ─── Top row ────────────────────────────────────────────────────────── */
/* Per design: stacked column.
   – Row 1: "HOW WE WORK" centered horizontally
   – 65px gap (visual gap between title bottom and bracket top, derived
     from spec: bracket top y = 315 from section top, title at y = 154
     with line-height 96 → bottom ≈ 250, so gap = 315 − 250 = 65)
   – Row 2: bracketed "[ WE WORK FOR EACH CLIENT / DEPENDING ON THE
     BUDGET ]" right-aligned. */
.frame-component23_topRow__s1LQ3 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 65px;
  width: 100%;
}

.frame-component23_howWeWork__CE5-M {
  margin: 0;
  font-family: var(--font-mazzard);
  /* Mazzard H Bold = 700 */
  font-weight: 700;
  font-size: 96px;
  line-height: 100%;
  color: var(--color-orange-100);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  /* CENTERED — was top-left in the old build. Per Figma the HW WORK
     title is centered horizontally on the section. */
  text-align: center;
  width: 100%;
}

.frame-component23_eachClientTag__slBhJ {
  display: flex;
  /* RIGHT-ALIGNED — was inline next to the title. Per Figma the
     bracketed tag sits below the title, on the right side of the
     section. We keep ~100px right inset so it doesn't crash into
     the page edge. */
  justify-content: flex-end;
  padding: 0 100px 0 0;
}

.frame-component23_eachClientStack__FxRv2 {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
  text-align: left;
  font-family: var(--font-mazzard);
  font-weight: 500; /* Mazzard H Medium */
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frame-component23_eachClientYellow__4XdWZ { color: var(--color-orange-100); }
.frame-component23_eachClientWhite__30-Yg  { color: var(--color-white); }

/* ─── Bracketed label `[ … ]` with 3px #555452 brackets ──────────────── */
/* The bracket is built with two pseudo-elements: ::before is "[" and
   ::after is "]". Each is rendered as a vertical 3px line plus two
   small horizontal caps, all in the variable colour `--bracket-color`.
*/

.frame-component23_bracketLabel__jSWUC {
  display: inline-flex;
  align-items: center;
  position: relative;
  /* Outer padding pushes the bracket lines 70 px AWAY from the text
     on both sides — matching the canonical Figma spec used by
     Vehicle Deals ("Thousands of listings.") and Before/After
     ("Our clients receive the best service"). Previously the
     bracketLabel had only 14 px of horizontal padding which made the
     "WE WORK FOR EACH CLIENT" block look visibly tighter than its
     two reference siblings. */
  padding: 0 70px;
  --bracket-color: var(--color-dimgray-200);
}

.frame-component23_bracketChild__6FxZD {
  display: inline-flex;
  align-items: center;
  /* Vertical padding only — horizontal spacing is owned by the
     bracketLabel above so the 70 px gap to the bracket lines stays
     consistent across all four bracketed taglines on /welcome. */
  padding: 2px 0;
}

.frame-component23_bracketLabel__jSWUC::before,
.frame-component23_bracketLabel__jSWUC::after {
  content: "";
  position: absolute;
  /* Hug the text rather than sticking out 8px above/below — keeps the
     visual proportion identical between EN ("WE WORK FOR EACH CLIENT")
     and BG ("РАБОТИМ ЗА ВСЕКИ КЛИЕНТ"). */
  top: 0;
  bottom: 0;
  width: 16px;
  border: 3px solid var(--bracket-color);
}

.frame-component23_bracketLabel__jSWUC::before {
  left: 0;
  border-right: 0;
}

.frame-component23_bracketLabel__jSWUC::after {
  right: 0;
  border-left: 0;
}

/* ─── Cards row ──────────────────────────────────────────────────────── */
/* Per Figma spec:
   – section width 1920
   – left & right padding 100 each → content area 1720
   – 3 equal cards with 10px gap between them
   – each card width ≈ (1720 − 20) / 3 ≈ 566.67 px (Figma: 562.77 +
     small horizontal asymmetry; we use auto-fit grid so the layout
     fluidly matches at any width while preserving the 10px gap). */
.frame-component23_cardsRow__OPkT- {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  width: 100%;
  padding: 0 100px;
  box-sizing: border-box;
}

.frame-component23_card__adNaZ {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 38px;
  padding: 40px 40px 56px;
  min-height: 620px;
  box-sizing: border-box;
}

/* ── Hover parallax (zoom only, NO 3D tilt, NO glow) ────────────────────────
 * The user wanted the gentle parallax "zoom" feel back on the 3 plan cards
 * but with a CLEAN, FLUID hover: just a noticeable scale-up / scale-down on
 * enter and leave — no geometric tilt/rotation, no Z-lift, and no amber
 * glow "подсветка".
 *
 * MOTION CURVE NOTES:
 *  • Duration is 560 ms — fast enough to feel responsive but long enough
 *    for the eye to track a "flowing" melt-in / melt-out rather than a
 *    binary snap.
 *  • Easing is a symmetric in-out cubic-bezier `(0.65, 0, 0.35, 1)`. The
 *    in-out curve spreads the motion evenly across the whole window so
 *    the scale feels like it "flows" instead of jumping.
 *  • `box-shadow` rides on a slightly slower 640 ms curve so the
 *    elevation settles a hair AFTER the scale completes — adds a
 *    layered "weight" feel.
 *
 * ─── CRITICAL: TRANSFORM-FUNCTION COMPATIBILITY ───
 *
 * The cards are direct children of `.cardsRow[data-stagger]` and pick up
 * the site-wide reveal cascade animation `bibiRevealFadeUp` with
 * `animation-fill-mode: both`. After that animation completes, the held
 * end-state value of `transform: translate3d(0, 0, 0)` lives in the
 * Animations cascade origin, which sits ABOVE the Author origin even
 * when the static declaration is `!important`. More importantly: when a
 * CSS transition tries to interpolate between two `transform` values
 * that DO NOT share the same function list, the browser can NOT
 * compute intermediate frames — it just snaps to the end value.
 *
 * That is why the previous "transform: scale(1.06) !important" tried to
 * transition from `translate3d(0,0,0)` → `scale(1.06)` and ended up
 * SNAPPING (no smooth interpolation possible across mismatched function
 * lists).
 *
 * Fix: keep the function list identical on both rest and hover. Rest is
 * `translate3d(0,0,0) scale(1)` and hover is `translate3d(0,0,0)
 * scale(1.06)`. With both transforms sharing `translate3d() scale()`,
 * the browser interpolates the scale parameter component-by-component
 * across the 560 ms transition — giving a properly flowing zoom.
 *
 * `:global()` is required because the tilt-card classes come from the
 * shared global TiltParallax.css while `.card` is the local CSS-module
 * class. */
.frame-component23_card__adNaZ.tilt-card {
  /* Fast & fluid — quick to follow the cursor, smooth to settle. */
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: center center;
  will-change: transform, box-shadow;
  transition:
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.frame-component23_card__adNaZ.tilt-card.tilt-hover,
.frame-component23_card__adNaZ.tilt-card.tilt-pressed {
  /* Hover state — same function list, only the scale parameter changes
     so the transition interpolates smoothly over 560 ms. */
  transform: translate3d(0, 0, 0) scale(1.06) !important;
  box-shadow:
    0 28px 52px -22px rgba(0, 0, 0, 0.55),
    0 12px 22px -14px rgba(0, 0, 0, 0.35) !important;
}

.frame-component23_cardDark__xv0Ye {
  background-color: var(--color-gray-200); /* #1D1D1B */
  /* Subtle leather/noise vignette to match Figma material */
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}

.frame-component23_cardYellow__4YRKi {
  background-color: var(--color-orange-100);
  /* Card 2 is slightly larger / popped forward in the Figma — keep flat
     visual but allow the popular pill to align right. */
}

.frame-component23_cardTop__9b2VW {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
}

.frame-component23_tileNum__680qD {
  font-family: var(--font-mazzard);
  /* Per Figma: Mazzard H SemiBold = 600 (was Medium 500). */
  font-weight: 600;
  /* Per Figma: number glyph at 24px size, centered inside the fixed
     39.239 × 32.699 bracket frame (see overrides below). The previous
     22px / 500 was a Wave-2 carry-over that visually squished the digit. */
  font-size: 24px;
  line-height: 100%;
  color: inherit;
  display: inline-block;
  min-width: 14px;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Card-tile bracket override.

   The generic `.bracketLabel` (used by "WE WORK FOR EACH CLIENT") auto-
   stretches its 3-px brackets to hug the wrapped text content. That
   behaviour is correct for the tag block but it COMPRESSED the small
   number badges [1] [2] [3] on plan cards because the inner glyph is
   a single ~24px tall character.

   Per Figma spec the number bracket frame is FIXED:
     • width  : 39.239 px
     • height : 32.699 px
     • stroke : 3 px solid #555452
   We re-apply that exact geometry when a `.bracketLabel` contains a
   `.tileNum` child — without breaking the tag-block sibling.
   ────────────────────────────────────────────────────────────────────── */
.frame-component23_bracketLabel__jSWUC:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD) {
  padding: 0;
  width: 39.239px;
  height: 32.699px;
  flex-shrink: 0;
}
.frame-component23_bracketLabel__jSWUC:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD) > .frame-component23_bracketChild__6FxZD {
  width: 100%;
  height: 100%;
  padding: 0;
  justify-content: center;
}
.frame-component23_bracketLabel__jSWUC:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD)::before,
.frame-component23_bracketLabel__jSWUC:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD)::after {
  top: 0;
  bottom: 0;
  width: 8px; /* visual width of the bracket cap — keeps 3 px stroke + cap */
}

.frame-component23_cardDark__xv0Ye .frame-component23_tileNum__680qD   { color: var(--color-dimgray-200); }
.frame-component23_cardYellow__4YRKi .frame-component23_tileNum__680qD { color: var(--color-gray-500); }   /* #040103 */

/* ─── Popular pill ──────────────────────────────────────────────────── */

.frame-component23_popularPill__M9NnV {
  cursor: default;
  border: 1px solid var(--color-black);
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-mazzard);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 6px;
  line-height: 1;
  text-transform: lowercase;
}

/* ─── Card titles ───────────────────────────────────────────────────── */

.frame-component23_cardTitle__2DGvu {
  margin: 0;
  font-family: var(--font-mazzard);
  /* Mazzard H Bold = 700 */
  font-weight: 700;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -0.005em;
}

.frame-component23_titleOrange__i8cA7 { color: var(--color-orange-100); }
.frame-component23_titleBlack__Z22Aj  { color: var(--color-gray-500); }

/* ─── Card description ─────────────────────────────────────────────── */

.frame-component23_cardDesc__X-7Q7 {
  margin: 0;
  font-family: var(--font-helvetica-now-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 130%;
  max-width: 520px;
}

.frame-component23_descWhite__5LZhR { color: var(--color-white); }
.frame-component23_descBlack__zYubR { color: var(--color-gray-500); }

/* ─── Card CTA / catchphrase ───────────────────────────────────────── */

.frame-component23_cardCta__MfT8e {
  margin: 0;
  margin-top: auto; /* pin to bottom */
  font-family: var(--font-helvetica-now-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 115%;
  letter-spacing: -0.005em;
}

.frame-component23_ctaOrange__F6F3C { color: var(--color-orange-100); }
.frame-component23_ctaBlack__cRewP  { color: var(--color-gray-500); }

/* ─── Bottom: Have a question card ─────────────────────────────────── */

.frame-component23_questionWrap__YeCPl {
  display: flex;
  justify-content: center;
  width: 100%;
}

.frame-component23_questionCard__D6dWo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 96px;
  border: 1px solid var(--color-orange-100);
  border-radius: 8px;
  text-align: center;
  width: 100%;
  max-width: 564px;
  box-sizing: border-box;
}

.frame-component23_questionTitle__vIsYI {
  margin: 0;
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: 32px;
  line-height: 120%;
  color: var(--color-white);
  text-align: center;
}

.frame-component23_questionPhones__T01Xe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.frame-component23_questionPhone__UnWcl {
  font-family: var(--font-helvetica-now-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  color: var(--color-orange-100);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: filter 0.15s ease;
}

.frame-component23_questionPhone__UnWcl:hover { filter: brightness(1.15); }

/* ─── Responsive ───────────────────────────────────────────────────── */

@media screen and (max-width: 1350px) {
  .frame-component23_inner__4ks4n { padding: 110px 64px; gap: 72px; }
  .frame-component23_howWeWork__CE5-M { font-size: 72px; }
  .frame-component23_cardTitle__2DGvu { font-size: 34px; }
  .frame-component23_cardCta__MfT8e { font-size: 28px; }
  .frame-component23_card__adNaZ { min-height: 560px; padding: 36px 32px 48px; gap: 32px; }
  /* Scale the bracket↔text gap down on smaller desktops so the
     bracketed tagline doesn't overflow the 100px right inset. */
  .frame-component23_bracketLabel__jSWUC:not(:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD)) { padding: 0 40px; }
}

@media screen and (max-width: 925px) {
  .frame-component23_inner__4ks4n { padding: 64px 24px; gap: 40px; }
  .frame-component23_topRow__s1LQ3 { flex-direction: column; gap: 24px; }
  .frame-component23_howWeWork__CE5-M { font-size: 44px; }
  .frame-component23_eachClientTag__slBhJ { padding-top: 0; }
  .frame-component23_eachClientStack__FxRv2 { font-size: 14px; white-space: normal; }
  .frame-component23_cardsRow__OPkT- { grid-template-columns: 1fr; gap: 16px; }
  .frame-component23_card__adNaZ { min-height: 0; padding: 28px 22px 36px; gap: 24px; }
  .frame-component23_cardTitle__2DGvu { font-size: 28px; }
  .frame-component23_cardDesc__X-7Q7 { font-size: 18px; }
  .frame-component23_cardCta__MfT8e  { font-size: 22px; }
  .frame-component23_questionCard__D6dWo { padding: 36px 24px; gap: 22px; }
  .frame-component23_questionTitle__vIsYI { font-size: 24px; }
  .frame-component23_questionPhone__UnWcl { font-size: 18px; }
  .frame-component23_bracketLabel__jSWUC:not(:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD)) { padding: 0 20px; }
}

@media screen and (max-width: 480px) {
  .frame-component23_howWeWork__CE5-M { font-size: 36px; }
  .frame-component23_bracketLabel__jSWUC:not(:has(> .frame-component23_bracketChild__6FxZD > .frame-component23_tileNum__680qD)) { padding: 0 14px; }
}

/* =============================================================================
 * BIBI Cars — "How to buy a turnkey car" block
 *
 * Pixel-perfect Figma rebuild over the aerial-road photo (1918 × 2379 px).
 *
 * Layout strategy
 * ----------------
 *   The whole section uses an absolute-positioning canvas anchored to a
 *   1918 × 2379 aspect-ratio frame, so every element lands exactly over
 *   the road feature it belongs to (car, parking-lot lines, etc.). All
 *   coordinates below are expressed as percentages of that frame.
 *
 *   Approximate Figma anchors (relative to a 1918 × 2379 canvas):
 *
 *     Title          y =  140 - 360     (centred)
 *     USA  label     y =  580 - 760     left  side of the car
 *     Korea label    y =  580 - 760     right side of the car
 *     Logos row 1    y = 1180 - 1240    (Copart · CARFAX · Manheim)
 *     Logos row 2    y = 1290 - 1340    (IAA · Encar)
 *     Step  1        y = 1620 (left)
 *     Step  2        y = 1620 (right)
 *     Step  3        y = 1830 (left)
 *     Step  4        y = 1830 (right)
 *     Step  5        y = 2030 (centred)
 *     PICK UP A CAR  y = 2200 (centred)
 *     Join card      y = 2300 (centred)
 *
 *   Below 1024 px we abandon the absolute canvas and stack everything
 *   in a normal flex column.
 * ========================================================================== */

/* ── Section / background ────────────────────────────────────────────── */

.turnkey-banner1_section__ld2hl {
  position: relative;
  width: 100%;
  align-self: stretch;
  background-color: var(--color-black);
  font-family: var(--font-mazzard);
  overflow: hidden;
  isolation: isolate;
  /* aspect-ratio must match the road photo so every absolute % lands
     in the right place. */
  aspect-ratio: 1918 / 2379;
}

.turnkey-banner1_bgRoad__rTZ64 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}

/* Light, even darken across the upper third so light areas of the
   photo don't compete with the title / source labels. */
.turnkey-banner1_bgTop__lbvrT {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.10) 25%,
    transparent 45%
  );
  z-index: 1;
  pointer-events: none;
}

/* Figma "Rectangle 240657846" — bottom linear gradient
 * #000000 10% → #000000 100% pinned to the lower portion of the section. */
.turnkey-banner1_bgScrim__plIkl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 1.00) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Inner canvas ────────────────────────────────────────────────────── */

.turnkey-banner1_inner__BHA6d {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── Title ───────────────────────────────────────────────────────────── */

.turnkey-banner1_title__SWXFB {
  position: absolute;
  top: 5%;            /* well above the car: y ≈ 119 / 2379 */
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: clamp(48px, 6.66vw, 128px);
  line-height: 100%;
  letter-spacing: -0.01em;
  color: var(--color-orange-100);
}

/* ── USA / Korea source labels ───────────────────────────────────────── */

/* Photo analysis (image-57@2x, 1918 × 2379):
 *   Car body  : y =  342 - 777            (centre y ≈ 560 → 23.5%)
 *   Car body  : x ≈  750 - 1170           (centre ≈ 959)
 *   The labels flank the car, vertically centred on the car body.
 *   USA  bullet at x ≈ 384 / 1918 = 20.0%
 *   Korea bullet at x ≈ 1240 / 1918 = 64.6%
 */
.turnkey-banner1_source__OMc45 {
  position: absolute;
  top: 19.5%;          /* ≈ 464 / 2379 — sits just above the car midline */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.turnkey-banner1_sourceUSA__-J8Uv   { left: 20%;   }   /*  ≈  384 / 1918 */
.turnkey-banner1_sourceKorea__zE0Kn { left: 64.6%; }   /*  ≈ 1240 / 1918 */

.turnkey-banner1_sourceFrom__4Pr21 {
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 100%;
  color: var(--color-orange-100);
}

.turnkey-banner1_sourceRow__DIzex {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.83vw, 16px);
}

.turnkey-banner1_dot__yF15a {
  /* Figma "Ellipse 12" — Width 27.29px / Height 27.29px / #FEAE00 */
  width: clamp(14px, 1.42vw, 27px);
  height: clamp(14px, 1.42vw, 27px);
  border-radius: 999px;
  background-color: var(--color-orange-100);
  flex-shrink: 0;
}

.turnkey-banner1_sourceName__jUfyI {
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: clamp(28px, 3.12vw, 60px);
  line-height: 100%;
  color: var(--color-white);
}

/* ── Partner logos ───────────────────────────────────────────────────── */

/* Figma places the logos in the OPEN ROAD GAP between where the car
 * ends (y ≈ 777, 32.7%) and where the brown parking-lot strips begin
 * (y ≈ 1238, 52%). They sit centred horizontally between those two
 * strips, well below the car body. */
.turnkey-banner1_logos__TzoBi {
  position: absolute;
  top: 41.5%;          /* ≈  988 / 2379 — middle of the empty road */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.45vw, 28px);
}

.turnkey-banner1_logosRow__97jvh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 76px);
  flex-wrap: nowrap;
}

/* Per Figma spec — exact size for each auction logo (NOT scaling). */
.turnkey-banner1_logoCopart__BrADh  { width: 121.33px; height: 52.15px;  object-fit: contain; }
.turnkey-banner1_logoCarfax__FNN6v  { width: 154.7px;  height: 28.78px;  object-fit: contain; }
.turnkey-banner1_logoManheim__FJdRk { width: 178.78px; height: 45.12px;  object-fit: contain; }
.turnkey-banner1_logoIaa__sPM8E     { width: 101.86px; height: 29.24px;  object-fit: contain; }
.turnkey-banner1_logoEncar__pjuyr   { width: 64.56px;  height: 36.89px;  object-fit: contain; }

/* ── Steps (zig-zag, all absolute) ───────────────────────────────────── */

/* Figma: the step blocks are compact (≤ 28 % of section width) and the
 * 1-2 row sits CLOSE to the 3-4 row, with a larger vertical jump down
 * to the centred step 5.
 *
 *   step1 / step2  : y =  56.0%        — closer to row 3-4
 *   step3 / step4  : y =  64.5%        — only ~8 % below row 1-2
 *   step5          : y =  79.0%        — bigger gap, centred between
 *                                         the two parking strips
 *
 * X anchors:
 *   left   row : x =  19.0%             (just inside left white stripe)
 *   right  row : x =  58.0%             (just inside right white stripe)
 *   centre row : x = 50%, translateX(-50%)
 */
.turnkey-banner1_step__mi0ze {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.2vw, 22px);
  width: 28%;             /* compact, not stretched */
}

.turnkey-banner1_step1__e1xya { top: 56.0%; left: 19.0%; }
.turnkey-banner1_step2__uQUZv { top: 56.0%; left: 58.0%; }
.turnkey-banner1_step3__cq6NH { top: 64.5%; left: 19.0%; }
.turnkey-banner1_step4__XGbPN { top: 64.5%; left: 58.0%; }

/* Step 5 sits centred between the two parking-lot strips with the
 * "5/" + text rendered as one inline-flex pair so the whole pair is
 * visually centred (not just the bounding box). */
.turnkey-banner1_step5__2Oo0E {
  top: 79.0%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 36%;
  justify-content: flex-start;
}

.turnkey-banner1_stepNum__03\+MC {
  flex-shrink: 0;
  font-family: var(--font-mazzard);
  font-weight: 800;
  font-size: clamp(20px, 2.08vw, 40px);
  line-height: 100%;
  letter-spacing: 0;
  color: var(--color-orange-100);
  min-width: clamp(28px, 2.3vw, 44px);
}

.turnkey-banner1_stepText__vchae {
  margin: 0;
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: clamp(16px, 1.66vw, 32px);
  line-height: 110%;
  color: var(--color-white);
}

/* ── PICK UP A CAR button ────────────────────────────────────────────── */

.turnkey-banner1_pickup__rQGqF {
  position: absolute;
  top: 87%;             /* ≈ 2070 / 2379, sits in the bottom black-fade */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma spec: 380 × 45. Tablet falls back to mobile layout below. */
  height: 45px;
  width: 380px;
  border: 0;
  border-radius: 6px;
  background-color: var(--color-orange-100);
  color: var(--color-black);
  font-family: var(--font-mazzard);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.05s ease;
  white-space: nowrap;
}

.turnkey-banner1_pickup__rQGqF:hover  { filter: brightness(1.07); }
.turnkey-banner1_pickup__rQGqF:active { transform: translate(-50%, 1px); }

/* ── Join our group / Viber pill ─────────────────────────────────────── */

.turnkey-banner1_joinCard__Ut23S {
  position: absolute;
  top: 93%;             /* ≈ 2213 / 2379 */
  left: 50%;
  transform: translateX(-50%);
  /* Figma spec: 394 × 118. */
  width: 394px;
  height: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background-color: rgba(28, 28, 28, 0.55);
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
  box-sizing: border-box;
  white-space: normal;
}

.turnkey-banner1_joinCard__Ut23S:hover {
  background-color: rgba(28, 28, 28, 0.78);
}

.turnkey-banner1_joinText__Jl9Hf {
  font-family: var(--font-mazzard);
  font-weight: 700;
  font-size: 18px;
  line-height: 130%;
  color: var(--color-white);
  text-align: left;
}

.turnkey-banner1_joinIcon__7bqJc {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* ── Staggered directional reveal for the 5 zig-zag steps ─────────────
 *
 *   step 1 ← slides in from LEFT   (delay   0 ms)
 *   step 2 → slides in from RIGHT  (delay 180 ms)
 *   step 3 ← slides in from LEFT   (delay 360 ms)
 *   step 4 → slides in from RIGHT  (delay 540 ms)
 *   step 5 ↑ slides in from BELOW  (delay 720 ms, centred)
 *
 * Each step starts hidden (opacity 0) and offset along its travel axis.
 * The `.stepInView` modifier (added once the zig-zag scrolls into view)
 * animates opacity → 1 and transform → resting position. Step 5 keeps
 * its `translateX(-50%)` horizontal centring at every keyframe.
 *
 * `will-change` + GPU-friendly transforms keep the cascade buttery on
 * mid-range devices. Users with `prefers-reduced-motion: reduce` get
 * the final state instantly with no transitions.
 */
.turnkey-banner1_step__mi0ze {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.turnkey-banner1_step1__e1xya { transform: translateX(-72px); }
.turnkey-banner1_step2__uQUZv { transform: translateX(72px);  }
.turnkey-banner1_step3__cq6NH { transform: translateX(-72px); }
.turnkey-banner1_step4__XGbPN { transform: translateX(72px);  }
.turnkey-banner1_step5__2Oo0E { transform: translate(-50%, 56px); }

.turnkey-banner1_step1__e1xya.turnkey-banner1_stepInView__TLxuY { transform: translateX(0); transition-delay: 0ms;   opacity: 1; }
.turnkey-banner1_step2__uQUZv.turnkey-banner1_stepInView__TLxuY { transform: translateX(0); transition-delay: 180ms; opacity: 1; }
.turnkey-banner1_step3__cq6NH.turnkey-banner1_stepInView__TLxuY { transform: translateX(0); transition-delay: 360ms; opacity: 1; }
.turnkey-banner1_step4__XGbPN.turnkey-banner1_stepInView__TLxuY { transform: translateX(0); transition-delay: 540ms; opacity: 1; }
.turnkey-banner1_step5__2Oo0E.turnkey-banner1_stepInView__TLxuY { transform: translate(-50%, 0); transition-delay: 720ms; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .turnkey-banner1_step__mi0ze,
  .turnkey-banner1_step1__e1xya,
  .turnkey-banner1_step2__uQUZv,
  .turnkey-banner1_step3__cq6NH,
  .turnkey-banner1_step4__XGbPN {
    transform: none;
    transition: none;
    opacity: 1;
  }
  .turnkey-banner1_step5__2Oo0E {
    transform: translateX(-50%);
    transition: none;
    opacity: 1;
  }
}

/* ── Mobile / tablet fallback (≤ 1024 px) ────────────────────────────── */

@media screen and (max-width: 1024px) {
  .turnkey-banner1_section__ld2hl {
    aspect-ratio: auto;
    padding: 56px 20px;
  }

  .turnkey-banner1_bgRoad__rTZ64        { object-fit: cover; }
  .turnkey-banner1_bgScrim__plIkl       { height: 60%; }

  .turnkey-banner1_inner__BHA6d {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .turnkey-banner1_title__SWXFB,
  .turnkey-banner1_source__OMc45,
  .turnkey-banner1_logos__TzoBi,
  .turnkey-banner1_step__mi0ze,
  .turnkey-banner1_pickup__rQGqF,
  .turnkey-banner1_joinCard__Ut23S {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
  }

  /* On mobile the steps stack vertically — skip the directional reveal
   * (the absolute zig-zag layout that the animation was designed around
   * does not apply here). Force-show them instead. */
  .turnkey-banner1_step__mi0ze,
  .turnkey-banner1_step1__e1xya,
  .turnkey-banner1_step2__uQUZv,
  .turnkey-banner1_step3__cq6NH,
  .turnkey-banner1_step4__XGbPN,
  .turnkey-banner1_step5__2Oo0E {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .turnkey-banner1_title__SWXFB { font-size: 44px; }

  .turnkey-banner1_sourceUSA__-J8Uv, .turnkey-banner1_sourceKorea__zE0Kn {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .turnkey-banner1_sourceFrom__4Pr21 { font-size: 16px; }
  .turnkey-banner1_sourceName__jUfyI { font-size: 32px; }

  .turnkey-banner1_logos__TzoBi {
    width: 100%;
    gap: 16px;
  }
  .turnkey-banner1_logosRow__97jvh { gap: 24px; }
  .turnkey-banner1_logoCopart__BrADh  { width: 75px; height: 32px; }
  .turnkey-banner1_logoCarfax__FNN6v  { width: 96px; height: 18px; }
  .turnkey-banner1_logoManheim__FJdRk { width: 110px; height: 28px; }
  .turnkey-banner1_logoIaa__sPM8E     { width: 64px; height: 18px; }
  .turnkey-banner1_logoEncar__pjuyr   { width: 40px; height: 23px; }

  .turnkey-banner1_step__mi0ze {
    width: 100%;
    max-width: 460px;
    gap: 14px;
  }
  .turnkey-banner1_stepNum__03\+MC  { font-size: 22px; min-width: 32px; }
  .turnkey-banner1_stepText__vchae { font-size: 18px; }

  .turnkey-banner1_pickup__rQGqF {
    width: min(360px, 100%);
    height: 45px;
    font-size: 12px;
  }
  .turnkey-banner1_pickup__rQGqF:active { transform: translateY(1px); }

  .turnkey-banner1_joinCard__Ut23S {
    width: min(360px, 92%);
    height: auto;
    min-height: 88px;
    padding: 14px 18px;
  }
  .turnkey-banner1_joinText__Jl9Hf { font-size: 14px; }
  .turnkey-banner1_joinIcon__7bqJc { width: 40px; height: 40px; }
}

@media screen and (max-width: 480px) {
  .turnkey-banner1_title__SWXFB { font-size: 32px; }
  .turnkey-banner1_sourceName__jUfyI { font-size: 24px; }
}

/* ============================================================================
 * FrameComponent24 — direct port from BIBICARS 5.zip (Figma canonical CSS).
 *
 * Only deviations from the zip:
 *   • `font-weight` adjusted to match the design tokens called out by the
 *     product owner:
 *        – `.weHavePerfect`        → 700 (H Bold 60px)
 *        – `.justAFewContainer`    → 500 (H Medium 24px)
 *        – `.chooseYourPerfect`    → 700 (H Bold 30px)
 *        – `.findAVehicle` etc.   → 700 (H Bold 16px)
 *   The original zip had `font-weight: 400` everywhere because it was
 *   exported by Figma's "Default" preset.
 * ========================================================================== */

.frame-component24_weHavePerfectServiceWrapper__u3jsH {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-5);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component24_weHavePerfectService__Lq\+Pb {
  flex: 1 1;
  background-color: var(--color-black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 135.8px 191px 329.1px 117px;
  box-sizing: border-box;
  gap: 230.6px;
  max-width: 100%;
  z-index: 2;
}
.frame-component24_serviceContent__A1F8H,
.frame-component24_weHavePerfectServiceParent__7vSOL {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component24_serviceContent__A1F8H {
  width: 1530.4px;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-60);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.frame-component24_weHavePerfectServiceParent__7vSOL {
  width: 820px;
  flex-direction: column;
  gap: 97.6px;
}
.frame-component24_weHavePerfect__ag3Oa {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
}
.frame-component24_dreamCar__nPczs,
.frame-component24_frameParent__RXRqK {
  align-self: stretch;
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.frame-component24_dreamCar__nPczs {
  align-items: center;
  padding: var(--padding-0) var(--padding-27) var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-24);
}
/* Per Figma spec: outer block (incl. brackets) = 430 × 70 px,
 * inner "Just a few steps to your dream car" text = 274.7 px wide.
 *
 * Brackets MUST stretch vertically to match the actual rendered text
 * height. In EN the text wraps to 2 lines (~52 px tall), in BG it can
 * grow to 3-4 lines (~80-100 px). Using `align-items: stretch` on the
 * row makes the bracket wrappers grow with the text, and the SVG
 * children fill their wrappers via `height: 100%` + the wrapper itself
 * uses CSS borders (rendered via ::before) so the bracket "[" / "]"
 * is drawn at the correct dynamic height regardless of language.
 */
.frame-component24_frameParent__RXRqK {
  align-items: stretch;
  width: 430px;
  min-height: 70px;
  column-gap: 32px;
  row-gap: var(--gap-20);
  flex-shrink: 0;
}
.frame-component24_vectorWrapper__Gs-YZ,
.frame-component24_vectorContainer__HgGiw {
  position: relative;
  width: 13px;
  min-height: 70px;
  align-self: stretch;
  flex-shrink: 0;
}
/* CSS-drawn bracket — auto-stretches to parent height.
   Strokes match the original Figma Vector.svg (3px, #555452). */
.frame-component24_vectorWrapper__Gs-YZ::before,
.frame-component24_vectorContainer__HgGiw::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #555452;
}
.frame-component24_vectorWrapper__Gs-YZ::before  { border-right: 0; }
.frame-component24_vectorContainer__HgGiw::before { border-left:  0; }
/* Hide the legacy <img> brackets (kept in JSX for compatibility). */
.frame-component24_vectorIcon__I3G3l,
.frame-component24_vectorIcon2__ioSEU {
  display: none;
}
.frame-component24_justAFewContainer__H5Hon {
  margin: 0;
  width: 274.7px;
  position: relative;
  font-size: inherit;
  /* Per Figma: two lines with comfortable breathing space between them.
     Previously a fixed 43.4 px height + line-height:99.9% squashed both
     lines onto a single 24-px row. Match the Figma spacing instead. */
  line-height: 1.5;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-orange-100);
  padding: 8px 0;
  box-sizing: border-box;
}
.frame-component24_toYourDream__89JXn {
  color: var(--color-white);
}
.frame-component24_locationService__Mhgf1,
.frame-component24_locationSet__AoXdy {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component24_locationSet__AoXdy {
  flex-direction: column;
  gap: 55.3px;
  text-align: center;
  font-size: var(--fs-30);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component24_locationService__Mhgf1 {
  justify-content: center;
  padding: var(--padding-0) var(--padding-29) var(--padding-0) var(--padding-20);
  box-sizing: border-box;
}
.frame-component24_locationIcon__33csO {
  width: 1289.5px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: var(--gap-20);
  max-width: 100%;
}
.frame-component24_locationSolo__d6tY7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-1);
}
.frame-component24_weuilocationFilledParent__S2nwk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-9);
}
.frame-component24_weuilocationFilledIcon__QVA\+5 {
  width: var(--width-44_2);
  position: relative;
  max-height: 100%;
}
.frame-component24_frameChild__i\+apR {
  width: 16.37px;
  height: 16.37px;
  position: relative;
  border-radius: var(--br-50);
  background-color: var(--color-orange-100);
  flex-shrink: 0;
}
.frame-component24_iconPairs__cOiQt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-12);
  z-index: 3;
}
.frame-component24_locationOverlap__PCWY4 {
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
}
.frame-component24_locationOverlapChild__J-BxB {
  /* Per Figma spec: thickness 2 px, length ≈ 1237 px,
     color #FEAE00 (brand orange — same as the pins). */
  height: 2px;
  width: 1237.1px;
  position: absolute;
  margin: 0 !important;
  bottom: 7.2px;
  left: -800.8px;
  background-color: var(--color-orange-100);
  z-index: 1;
  flex-shrink: 0;
}
.frame-component24_weuilocationFilledGroup__7f9WW {
  flex-direction: column;
  gap: var(--gap-12);
  z-index: 1;
  flex-shrink: 0;
}
.frame-component24_iconPairs2__EP10W,
.frame-component24_serviceClaims__jnMro,
.frame-component24_weuilocationFilledGroup__7f9WW {
  display: flex;
  align-items: center;
}
.frame-component24_iconPairs2__EP10W {
  flex-direction: column;
  gap: var(--gap-10);
}
.frame-component24_serviceClaims__jnMro {
  align-self: stretch;
  height: var(--height-60);
  gap: 51px;
  max-width: 100%;
}
.frame-component24_chooseYourPerfect__aHkQP {
  margin: 0;
  width: var(--width-364_5);
  position: relative;
  font-size: inherit;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.frame-component24_findAVehicleThatMatchesYoParent__T8LcS,
.frame-component24_findVehicleProcess__9ncdL {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.frame-component24_findVehicleProcess__9ncdL {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-45) var(--padding-0) var(--padding-47);
  font-size: var(--fs-16);
}
.frame-component24_findAVehicleThatMatchesYoParent__T8LcS {
  flex: 1 1;
  justify-content: space-between;
  padding: var(--padding-0) var(--padding-2) var(--padding-0) var(--padding-0);
  gap: var(--gap-20);
}
.frame-component24_findAVehicle__MNrKN {
  width: 261.9px;
  position: relative;
  line-height: 99.9%;
  display: inline-block;
  flex-shrink: 0;
  font-weight: 700;
}
.frame-component24_processStatement__zX4S7 {
  width: 283.1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-21) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  flex-shrink: 0;
}
.frame-component24_aSimpleTransparent__faovB {
  position: relative;
  line-height: 99.9%;
  font-weight: 700;
}
.frame-component24_processStep__5AMQI {
  width: 261.9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-1) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  flex-shrink: 0;
}
.frame-component24_ourManagerWill__ec6BQ {
  width: 292.8px;
  position: relative;
  line-height: 99.9%;
  display: inline-block;
  flex-shrink: 0;
  font-weight: 700;
}
@media screen and (max-width: 1850px) {
  .frame-component24_findAVehicleThatMatchesYoParent__T8LcS,
  .frame-component24_serviceClaims__jnMro {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1350px) {
  .frame-component24_weHavePerfectService__Lq\+Pb {
    gap: 115px;
    padding: 88px 95px 214px 58px;
    box-sizing: border-box;
  }
  .frame-component24_findVehicleProcess__9ncdL {
    padding-left: var(--padding-23);
    padding-right: var(--padding-22);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 925px) {
  .frame-component24_weHavePerfectService__Lq\+Pb {
    gap: 58px;
    padding: 57px var(--padding-47) 139px var(--padding-29);
    box-sizing: border-box;
  }
  .frame-component24_weHavePerfectServiceParent__7vSOL {
    gap: var(--gap-49);
  }
  .frame-component24_weHavePerfect__ag3Oa {
    font-size: var(--fs-48);
    line-height: var(--lh-48);
  }
  .frame-component24_frameParent__RXRqK {
    flex-wrap: wrap;
  }
  .frame-component24_locationSet__AoXdy {
    gap: var(--gap-28);
  }
  .frame-component24_serviceClaims__jnMro {
    gap: 25px;
  }
  .frame-component24_chooseYourPerfect__aHkQP {
    font-size: var(--fs-24);
    line-height: var(--lh-24);
  }
}
@media screen and (max-width: 450px) {
  .frame-component24_weHavePerfectServiceParent__7vSOL {
    gap: var(--gap-24);
  }
  .frame-component24_weHavePerfect__ag3Oa {
    font-size: var(--fs-36);
    line-height: var(--lh-36);
  }
  .frame-component24_justAFewContainer__H5Hon {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component24_locationIcon__33csO {
    justify-content: center;
  }
  .frame-component24_chooseYourPerfect__aHkQP {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
  }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   BG titles can be slightly longer (e.g. "имаме перфектно обслужване"
   vs "we have perfect service"). Tighten letter-spacing and shrink
   slightly so they fit the same visual block as the English version.
*/
html[lang="bg"] .frame-component24_weHavePerfect__ag3Oa {
  letter-spacing: -0.005em;
}
html[lang="bg"] .frame-component24_justAFewContainer__H5Hon {
  letter-spacing: -0.005em;
  /* BG text is longer and wraps to 3-4 lines; give it more room so
     it does not feel cramped inside the stretched brackets. */
  width: 320px;
  line-height: 1.35;
  font-size: 22px;
}
/* Slightly tighter horizontal padding on the bracket-to-text gap so
   the longer BG label hugs the brackets like the EN version does. */
html[lang="bg"] .frame-component24_frameParent__RXRqK {
  width: 480px;
  column-gap: 24px;
}
html[lang="bg"] .frame-component24_chooseYourPerfect__aHkQP {
  letter-spacing: -0.005em;
}
@media screen and (max-width: 1350px) {
  html[lang="bg"] .frame-component24_weHavePerfect__ag3Oa { font-size: 56px; }
}

.frame-component25_servicesTitleWrapper__LiutD {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) var(--padding-5) var(--padding-1);
  flex-shrink: 0;
  text-align: center;
  font-size: var(--fs-60);
  color: var(--color-black);
  font-family: var(--font-mazzard);
}
.frame-component25_ourServicesWrapper__ppbTn,
.frame-component25_servicesTitle__ZX-cq,
.frame-component25_servicesTitleWrapper__LiutD {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.frame-component25_servicesTitle__ZX-cq {
  flex: 1 1;
  background-color: var(--color-orange-100);
  overflow: hidden;
  flex-direction: column;
  padding: 110.7px 82px 115.5px 97px;
  gap: 105.3px;
}
.frame-component25_ourServicesWrapper__ppbTn {
  padding: var(--padding-0);
  align-self: stretch;
  justify-content: center;
}
.frame-component25_ourServices__i3IWk {
  margin: 0;
  width: auto;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  white-space: nowrap;
}
.frame-component25_servicesCards__pAGvx {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 97.2px;
  max-width: 100%;
}
.frame-component25_frameParent__mLI85,
.frame-component25_serviceDetailsColumn__bzLHQ {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component25_serviceDetailsColumn__bzLHQ {
  flex-direction: column;
  gap: 12.9px;
}
.frame-component25_frameParent__mLI85 {
  justify-content: center;
  gap: var(--gap-12);
}
.frame-component25_frameChild__vEKdY,
.frame-component25_rectangleParent__\+fCxt {
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  max-width: 100%;
}
.frame-component25_rectangleParent__\+fCxt {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32.6px var(--padding-27) 65.5px;
  box-sizing: border-box;
  gap: 52.4px;
  min-width: var(--min-w-280);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_frameChild__vEKdY {
  width: 430.8px;
  height: var(--height-323_2);
  position: relative;
  display: none;
  flex-shrink: 0;
}
.frame-component25_frameContainer__sNv2n,
.frame-component25_frameGroup__4TuM2 {
  display: flex;
  align-items: flex-start;
}
.frame-component25_frameGroup__4TuM2 {
  align-self: stretch;
  flex-direction: column;
  gap: 41.7px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_frameContainer__sNv2n {
  width: 70px;
  height: 54px;
  flex-shrink: 0;
}
/* Single combined IMPORT icon (globe + arrow) — replaces the previous
   6-piece SVG composition. Rendered natively at 70×54 with stroke-width
   2 so the globe stays a perfect circle and the arrow → is clean. */
.frame-component25_importIcon__rijOG {
  display: block;
  width: 70px;
  height: 54px;
}

/* Single combined Registration & Certification icon — replaces the
   previous 6-piece composition. Rendered natively at 66×70 with
   stroke-width 2 everywhere so the document outline, both check-marks
   and the certification badge ring all stay sharp at any zoom level. */
.frame-component25_registrationIcon__gEJtg {
  display: block;
  width: 66px;
  height: 70px;
  flex-shrink: 0;
}

/* Single combined Financing icon — replaces the previous 8-piece
   composition. Rendered natively at 68×62 with stroke-width 2 so the
   coin circle, banknote outline and dashes remain crisp. */
.frame-component25_financingIcon__tLW\+I {
  display: block;
  width: 68px;
  height: 62px;
  flex-shrink: 0;
}

/* Single combined Parts Sourcing & Delivery icon — replaces the previous
   5-piece composition (sun rays + circle + box outline + horizontal
   divider + vertical seam). Rendered natively at 56×46 with stroke-width
   2 everywhere, so the internal box divider lines (which previously
   scaled to ~0 px stroke) are now crisp 2 px lines. */
.frame-component25_partsSourcingIcon__7moEJ {
  display: block;
  width: 56px;
  height: 46px;
  flex-shrink: 0;
}

/* Single combined Home Delivery icon — EXACT Figma geometry:
   house 51.81 × 46.63, car 41.4 × 20.7, wheels 7.8 × 7.8, total
   icon 74.2 × 65.7.  Rendered natively at stroke-width 2 (no scaling
   artefacts → wheels are now genuine circles with 2 px stroke). */
.frame-component25_homeDeliveryIcon__Iqrz9 {
  display: block;
  width: 74.2px;
  height: 65.7px;
  flex-shrink: 0;
}

/* Single combined Auto Service icon — outer shell 58 × 58 (the original
   shield/notched path) + GPS-fix crosshair 20 × 20 centred inside.
   ViewBox is 60×60 with a 1 px margin so the rounded notch corners
   (which extend ~0.5 px past the 58×58 path bbox after stroke=2) are
   NOT clipped. All strokes native 2 px, colour #F5B800. */
.frame-component25_autoServiceIcon__Kg4mn {
  display: block;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.frame-component25_vectorParent__FiPoa {
  height: var(--height-52);
  flex: 1 1;
  position: relative;
}
.frame-component25_vectorIcon__o1nei {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.frame-component25_vectorIcon2__4mcOR {
  position: absolute;
  top: 26px;
  left: 0;
  width: var(--width-52);
  height: var(--height-2);
  z-index: 2;
}
.frame-component25_vectorIcon3__U5zzx,
.frame-component25_vectorIcon4__LyOGP {
  position: absolute;
  top: 0;
  left: 26px;
  width: var(--width-12);
  height: var(--height-52);
  z-index: 3;
}
.frame-component25_vectorIcon4__LyOGP {
  left: 14px;
  z-index: 4;
}
.frame-component25_frameWrapper__B2cYF {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-8) var(--padding-0) var(--padding-0);
}
.frame-component25_vectorGroup__xS1ms {
  width: 13px;
  height: var(--height-10);
  position: relative;
}
.frame-component25_vectorIcon5__7xQyw {
  position: absolute;
  top: 5px;
  left: 0;
  width: 13px;
  height: var(--height-2);
  z-index: 2;
}
.frame-component25_vectorIcon6__cYLzJ {
  position: absolute;
  top: 0;
  left: 8px;
  width: var(--width-5);
  height: var(--height-10);
  z-index: 3;
}
.frame-component25_importWrapper__6Vv1w {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-2);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-component25_import__FFi\+F {
  margin: 0;
  flex: 1 1;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 1;
}
.frame-component25_weHelpYouFindTheRightCarWrapper__wi7UC {
  width: 357.4px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-4);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.frame-component25_weHelpYou__rQjPh {
  height: var(--height-51);
  flex: 1 1;
  position: relative;
  line-height: 99.9%;
  display: inline-block;
  max-width: 100%;
  z-index: 1;
}
.frame-component25_rectangleGroup__Z7qss {
  width: var(--width-418_4);
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32.6px var(--padding-14) 84.2px var(--padding-30);
  box-sizing: border-box;
  gap: 41.7px;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_eUAdaptation__v\+JjR,
.frame-component25_frameItem__dFIbr {
  position: relative;
  flex-shrink: 0;
}
.frame-component25_frameItem__dFIbr {
  width: var(--width-418_4);
  height: var(--height-323_2);
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: none;
  max-width: 100%;
}
.frame-component25_eUAdaptation__v\+JjR {
  width: var(--width-52);
  height: var(--height-52);
}
.frame-component25_vectorIcon10__QBzu2,
.frame-component25_vectorIcon11__nf3QE,
.frame-component25_vectorIcon8__MoypT,
.frame-component25_vectorIcon9__9uq4Q {
  position: absolute;
  top: 13.5px;
  left: 1.5px;
  width: var(--width-5);
  height: var(--height-5);
  z-index: 2;
}
.frame-component25_vectorIcon10__QBzu2,
.frame-component25_vectorIcon11__nf3QE,
.frame-component25_vectorIcon9__9uq4Q {
  left: 45.5px;
}
.frame-component25_vectorIcon10__QBzu2,
.frame-component25_vectorIcon11__nf3QE {
  top: 33.5px;
  left: 1.5px;
}
.frame-component25_vectorIcon11__nf3QE {
  left: 45.5px;
}
.frame-component25_vectorIcon12__Lr0jc {
  position: absolute;
  top: 12.6px;
  left: 9.9px;
  width: 29.6px;
  height: 29.4px;
  z-index: 2;
}
.frame-component25_adaptationToEuropeanStandarParent__yseHu {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22.7px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_adaptationToEuropean__tlP0m,
.frame-component25_weAdaptThe__EtobS {
  position: relative;
  line-height: 99.9%;
  z-index: 1;
}
.frame-component25_adaptationToEuropean__tlP0m {
  margin: 0;
  width: 340.2px;
  height: var(--height-56);
  font-size: inherit;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.frame-component25_weAdaptThe__EtobS {
  font-size: var(--fs-14);
}
.frame-component25_rectangleContainer__\+Kysd {
  width: var(--width-418_4);
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 31.1px var(--padding-25) 65.5px var(--padding-29);
  box-sizing: border-box;
  gap: 24.8px;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_frameDiv__r06Y2 {
  width: 66px;
  height: var(--height-70);
  position: relative;
  flex-shrink: 0;
}
.frame-component25_vectorContainer__jYR99 {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width-44);
  height: var(--height-56);
}
.frame-component25_vectorIcon14__qQeGP,
.frame-component25_vectorIcon15__yd1pZ,
.frame-component25_vectorIcon16__b1xDi {
  position: absolute;
  top: 16px;
  left: 8px;
  width: var(--width-28);
  height: var(--height-2);
  z-index: 2;
}
.frame-component25_vectorIcon15__yd1pZ,
.frame-component25_vectorIcon16__b1xDi {
  top: 26px;
}
.frame-component25_vectorIcon16__b1xDi {
  top: 29px;
  width: var(--width-20);
  height: var(--height-13);
}
.frame-component25_vectorParent2__5myD8 {
  position: absolute;
  top: 42px;
  left: 38px;
  width: var(--width-28);
  height: var(--height-28);
}
.frame-component25_vectorIcon17__adCR5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.frame-component25_vectorIcon18__5shx1 {
  position: absolute;
  top: 8px;
  left: 7px;
  width: var(--width-14);
  height: var(--height-11);
  z-index: 3;
}
.frame-component25_registrationAndCertification__LAXua {
  margin: 0;
  width: 340.2px;
  height: var(--height-56);
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 1;
  flex-shrink: 0;
}
.frame-component25_weHandleFullRegistrationInWrapper__bajgP {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-1);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.frame-component25_frameSection__TtIxd,
.frame-component25_rectangleDiv__VDkV9 {
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  max-width: 100%;
}
.frame-component25_frameSection__TtIxd {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 29.1px var(--padding-29) 67.2px;
  box-sizing: border-box;
  gap: 55.5px;
  min-width: var(--min-w-280);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_rectangleDiv__VDkV9 {
  width: var(--width-429_8);
  height: var(--height-323_2);
  position: relative;
  display: none;
  flex-shrink: 0;
}
.frame-component25_frameParent2__27OCz {
  width: 314.9px;
  gap: 31.4px;
  flex-shrink: 0;
}
.frame-component25_frameParent2__27OCz,
.frame-component25_frameParent3__-4lUv,
.frame-component25_frameParent4__rrwmP {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.frame-component25_frameParent3__-4lUv {
  gap: var(--gap-6);
}
.frame-component25_frameParent4__rrwmP {
  padding: var(--padding-19) var(--padding-26) var(--padding-11);
  position: relative;
  isolation: isolate;
}
.frame-component25_vectorIcon19__nWkVj,
.frame-component25_vectorParent3__Bbe-m {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.frame-component25_vectorParent3__Bbe-m {
  margin: 0 !important;
  flex-shrink: 0;
}
.frame-component25_vectorIcon19__nWkVj {
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.frame-component25_vectorIcon20__b5F2O {
  position: absolute;
  top: 12px;
  left: 0;
  width: 68px;
  height: var(--height-2);
  z-index: 2;
}
.frame-component25_vectorIcon21__Y\+vBT {
  width: var(--width-16);
  height: var(--height-16);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.frame-component25_vectorParent4__fBuwX {
  align-self: stretch;
  height: var(--height-10);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-2);
  box-sizing: border-box;
}
.frame-component25_frameWrapper2__e3tUR,
.frame-component25_vectorIcon22__i1Bh1 {
  align-self: stretch;
  flex-shrink: 0;
}
.frame-component25_vectorIcon22__i1Bh1 {
  height: var(--height-2);
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}
.frame-component25_frameWrapper2__e3tUR {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-8) var(--padding-0) var(--padding-10);
}
.frame-component25_vectorParent5__q5DFV {
  height: var(--height-8);
  flex: 1 1;
  position: relative;
}
.frame-component25_vectorIcon23__G6\+BF,
.frame-component25_vectorIcon24__gmz1z,
.frame-component25_vectorIcon25__aTpp4 {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width-2);
  height: var(--height-8);
  z-index: 2;
}
.frame-component25_vectorIcon24__gmz1z,
.frame-component25_vectorIcon25__aTpp4 {
  left: 24px;
}
.frame-component25_vectorIcon25__aTpp4 {
  left: 48px;
}
.frame-component25_vectorWrapper__V6TjQ {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-2);
  flex-shrink: 0;
}
.frame-component25_vectorIcon26__QcYxE {
  height: var(--height-2);
  width: 100%;
  position: relative;
  z-index: 3;
}
.frame-component25_financingWrapper__Utqap {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-3);
}
.frame-component25_financing__0uh-l {
  margin: 0;
  flex: 1 1;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  z-index: 1;
}
.frame-component25_weConnectYouWithTbiBankAWrapper__bjCsr {
  width: 336.2px;
  padding: var(--padding-0) var(--padding-3);
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.frame-component25_frameParent5__fhGYX,
.frame-component25_frameWrapper3__TADkQ,
.frame-component25_rectangleParent2__o3BLP,
.frame-component25_weConnectYouWithTbiBankAWrapper__bjCsr {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component25_frameParent5__fhGYX {
  align-self: stretch;
  justify-content: center;
  gap: 3.1px;
}
.frame-component25_frameWrapper3__TADkQ,
.frame-component25_rectangleParent2__o3BLP {
  flex-direction: column;
  box-sizing: border-box;
}
.frame-component25_frameWrapper3__TADkQ {
  flex: 1 1;
  padding: var(--padding-0) 9px var(--padding-0) var(--padding-0);
  min-width: 354px;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_rectangleParent2__o3BLP {
  align-self: stretch;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  padding: 34.7px var(--padding-27) 94.7px;
  gap: 46.7px;
}
.frame-component25_frameParent6__1dvyX {
  width: 53px;
  height: 43px;
  position: relative;
  flex-shrink: 0;
}
.frame-component25_vectorParent6__GHmpM {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width-36);
  height: var(--height-36);
}
.frame-component25_vectorIcon27__UM\+9c,
.frame-component25_vectorParent7__\+UeiD {
  position: absolute;
  width: var(--width-24);
}
.frame-component25_vectorIcon27__UM\+9c {
  top: 6px;
  left: 6px;
  height: var(--height-24);
  z-index: 1;
}
.frame-component25_vectorParent7__\+UeiD {
  top: 21px;
  left: 29px;
  height: var(--height-22);
}
.frame-component25_vectorIcon29__szmmF {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.frame-component25_vectorIcon30__XMXBO,
.frame-component25_vectorIcon31__HyUDn {
  position: absolute;
  top: 8px;
  left: 0;
  width: var(--width-24);
  height: var(--height-2);
  z-index: 4;
}
.frame-component25_vectorIcon31__HyUDn {
  top: 0;
  left: 12px;
  width: var(--width-2);
  height: var(--height-8);
  z-index: 5;
}
.frame-component25_partsDetail__WjkMU {
  width: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14.1px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_partsSourcingAndDeliveryWrapper__wzKam {
  width: 239.2px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-4);
  box-sizing: border-box;
}
.frame-component25_partsSourcingAnd__xK6MJ {
  margin: 0;
  height: var(--height-56);
  flex: 1 1;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component25_rectangleParent3__qkhUT {
  flex: 0.9644 1;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 7.9px var(--padding-12) 94.7px;
  box-sizing: border-box;
  gap: 42.1px;
  min-width: var(--min-w-396);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_frameParent7__aTty6 {
  width: 321px;
  display: flex;
  align-items: flex-end;
  gap: 0.5px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_geminiSvg11Parent__N7yzC {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16_5);
  min-width: 162px;
}
.frame-component25_geminiSvg11__\+50Ea {
  width: var(--width-100);
  height: var(--height-100);
  position: relative;
  z-index: 1;
}
.frame-component25_serviceImage__6xrcB,
.frame-component25_serviceTitle__5A6Yu {
  display: flex;
  align-items: flex-start;
}
.frame-component25_serviceTitle__5A6Yu {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-18);
}
.frame-component25_serviceImage__6xrcB {
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-24_5);
}
.frame-component25_autoRepairServiceSvgrepoCoIcon__JiPW2 {
  width: 100%;
  height: var(--height-70);
  position: relative;
  z-index: 1;
}
.frame-component25_serviceDetails__5pwA7 {
  width: 360.3px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-15);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.frame-component25_weHandleAll__AGT4B {
  flex: 1 1;
  position: relative;
  line-height: 99.9%;
  display: inline-block;
  max-width: 100%;
  z-index: 1;
}
.frame-component25_rectangleParent4__4hfaw {
  flex: 0.8693 1;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-11_9) var(--padding-32) 77.7px;
  box-sizing: border-box;
  gap: 25.5px;
  min-width: var(--min-w-396);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_geminiSvg1Icon__0yS-D {
  width: 85px;
  height: 85px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.frame-component25_frameParent8__0rZxd {
  width: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16.1px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_detailingAndCleaningWrapper__ZI6BS {
  width: 236.1px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-2);
  box-sizing: border-box;
}
.frame-component25_weProvideProfessional__t5Bpt {
  height: var(--height-51);
  position: relative;
  font-size: var(--fs-14);
  line-height: 99.9%;
  display: inline-block;
  z-index: 1;
}
.frame-component25_rectangleParent5__3fO6\+ {
  flex: 0.9073 1;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 25.9px var(--padding-24) 56px;
  box-sizing: border-box;
  gap: 57.8px;
  min-width: var(--min-w-396);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_frameParent9__LPnLY {
  width: 364.7px;
  display: flex;
  align-items: flex-end;
  gap: 53.5px;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component25_frameParent10__I6RIg {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 38.8px;
  min-width: 151px;
}
.frame-component25_frameParent11__lvAN8 {
  width: 74.2px;
  height: 65.7px;
  position: relative;
}
.frame-component25_vectorParent8__\+-Yhl {
  position: absolute;
  top: 0;
  left: 0;
  width: 51.8px;
  height: 46.6px;
}
.frame-component25_vectorIcon33__tIcv1,
.frame-component25_vectorIcon34__7e6TM {
  position: absolute;
  top: 31.1px;
  left: 16.9px;
  width: var(--width-2);
  height: 15.5px;
  z-index: 2;
}
.frame-component25_vectorIcon34__7e6TM {
  left: 35px;
}
.frame-component25_vectorIcon35__E7ARN {
  position: absolute;
  top: 31.1px;
  left: 16.9px;
  width: 18.1px;
  height: var(--height-2);
  z-index: 3;
}
.frame-component25_vectorIcon36__YV2Kg {
  position: absolute;
  top: 41px;
  left: 32.8px;
  width: 41.4px;
  height: 20.7px;
  z-index: 3;
}
.frame-component25_vectorIcon37__HPGYX,
.frame-component25_vectorIcon38__9XCor {
  position: absolute;
  top: 57.9px;
  left: 38px;
  width: 7.8px;
  height: 7.8px;
  z-index: 4;
}
.frame-component25_vectorIcon38__9XCor {
  left: 61.3px;
}
.frame-component25_homeDeliveryWrapper__DqXB2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-2);
}
.frame-component25_frameChild6__2166U {
  height: var(--height-70);
  width: var(--width-78);
  position: relative;
  transform: rotate(180deg);
  z-index: 1;
}
.frame-component25_contactButtonService__9xkan {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
@media screen and (max-width: 1850px) {
  .frame-component25_frameParent__mLI85 {
    flex-wrap: wrap;
  }
  .frame-component25_frameSection__TtIxd,
  .frame-component25_rectangleParent__\+fCxt {
    flex: 1 1;
  }
  .frame-component25_frameParent5__fhGYX {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1350px) {
  .frame-component25_servicesTitle__ZX-cq {
    gap: 53px;
    padding: var(--padding-72) 41px var(--padding-75) var(--padding-48);
    box-sizing: border-box;
  }
  .frame-component25_ourServicesWrapper__ppbTn {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .frame-component25_contactButtonService__9xkan {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 925px) {
  .frame-component25_servicesTitle__ZX-cq {
    gap: var(--gap-26);
    padding-left: var(--padding-24);
    padding-top: var(--padding-47);
    padding-bottom: var(--padding-49);
    box-sizing: border-box;
  }
  .frame-component25_ourServicesWrapper__ppbTn {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .frame-component25_ourServices__i3IWk {
    font-size: var(--fs-48);
    line-height: var(--lh-48);
  }
  .frame-component25_servicesCards__pAGvx {
    gap: var(--gap-49);
  }
  .frame-component25_frameWrapper3__TADkQ,
  .frame-component25_rectangleParent3__qkhUT,
  .frame-component25_rectangleParent4__4hfaw,
  .frame-component25_rectangleParent5__3fO6\+ {
    min-width: 100%;
  }
  .frame-component25_contactButtonService__9xkan {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 450px) {
  .frame-component25_ourServicesWrapper__ppbTn {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .frame-component25_ourServices__i3IWk {
    font-size: var(--fs-36);
    line-height: var(--lh-36);
  }
  .frame-component25_servicesCards__pAGvx {
    gap: var(--gap-24);
  }
  .frame-component25_rectangleParent__\+fCxt {
    gap: var(--gap-26);
  }
  .frame-component25_frameGroup__4TuM2 {
    gap: var(--gap-21);
  }
  .frame-component25_import__FFi\+F {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component25_rectangleGroup__Z7qss {
    gap: var(--gap-21);
  }
  .frame-component25_adaptationToEuropean__tlP0m,
  .frame-component25_registrationAndCertification__LAXua {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component25_frameSection__TtIxd {
    gap: var(--gap-28);
  }
  .frame-component25_frameParent2__27OCz {
    gap: var(--gap-16);
  }
  .frame-component25_financing__0uh-l {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component25_rectangleParent2__o3BLP {
    gap: var(--gap-23);
  }
  .frame-component25_partsSourcingAnd__xK6MJ {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component25_rectangleParent3__qkhUT {
    gap: var(--gap-21);
    flex: 1 1;
  }
  .frame-component25_frameParent7__aTty6 {
    flex-wrap: wrap;
  }
  .frame-component25_rectangleParent4__4hfaw {
    flex: 1 1;
  }
  .frame-component25_rectangleParent5__3fO6\+ {
    gap: 29px;
    flex: 1 1;
  }
  .frame-component25_frameParent9__LPnLY {
    gap: var(--gap-27);
    flex-wrap: wrap;
  }
  .frame-component25_contactButtonService__9xkan {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
}


/* ============================================================================
 * UNIFORM 4×2 GRID OVERRIDE
 * Original Figma export gave each card a different min-width / flex value,
 * which caused row 1 ≠ row 2 widths and uneven spacing. Force a clean
 * 4-column CSS Grid for both rows so all 8 cards render at identical width.
 * ========================================================================== */

.frame-component25_frameParent__mLI85,
.frame-component25_frameParent5__fhGYX {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.frame-component25_rectangleParent__\+fCxt,
.frame-component25_rectangleGroup__Z7qss,
.frame-component25_rectangleContainer__\+Kysd,
.frame-component25_frameSection__TtIxd,
.frame-component25_frameWrapper3__TADkQ,
.frame-component25_rectangleParent3__qkhUT,
.frame-component25_rectangleParent4__4hfaw,
.frame-component25_rectangleParent5__3fO6\+ {
  flex: initial;
  width: auto;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32.6px 28px 40px 28px;
  box-sizing: border-box;
  gap: 30px;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

/* Hide the legacy decorative absolute background squares (.frameChild,
   .frameItem, .rectangleDiv) — the new grid layout already paints the dark
   card background, so these would create double layers / horizontal scroll. */
.frame-component25_rectangleParent__\+fCxt > .frame-component25_frameChild__vEKdY,
.frame-component25_rectangleGroup__Z7qss > .frame-component25_frameItem__dFIbr,
.frame-component25_rectangleContainer__\+Kysd > .frame-component25_frameItem__dFIbr,
.frame-component25_frameSection__TtIxd > .frame-component25_rectangleDiv__VDkV9,
.frame-component25_frameWrapper3__TADkQ > .frame-component25_rectangleParent2__o3BLP > .frame-component25_rectangleDiv__VDkV9,
.frame-component25_rectangleParent3__qkhUT > .frame-component25_rectangleDiv__VDkV9,
.frame-component25_rectangleParent4__4hfaw > .frame-component25_rectangleDiv__VDkV9,
.frame-component25_rectangleParent5__3fO6\+ > .frame-component25_rectangleDiv__VDkV9 {
  display: none !important;
}

/* Inside `.frameWrapper3` there is an extra wrapper (.rectangleParent2) that
   needs to behave like its sibling cards. */
.frame-component25_frameWrapper3__TADkQ {
  padding: 0;
  background-color: transparent;
  min-height: 0;
}
.frame-component25_frameWrapper3__TADkQ .frame-component25_rectangleParent2__o3BLP {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: var(--br-4);
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32.6px 28px 40px 28px;
  box-sizing: border-box;
  gap: 30px;
  position: relative;
  overflow: hidden;
}

/* Responsive: 2 columns on tablets, 1 column on mobile */
@media screen and (max-width: 1100px) {
  .frame-component25_frameParent__mLI85,
  .frame-component25_frameParent5__fhGYX {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .frame-component25_frameParent__mLI85,
  .frame-component25_frameParent5__fhGYX {
    grid-template-columns: 1fr;
  }
}

/* Make sure the heading/section-padding inside cards is consistent */
.frame-component25_frameGroup__4TuM2,
.frame-component25_eUAdaptation__v\+JjR,
.frame-component25_frameDiv__r06Y2,
.frame-component25_frameParent2__27OCz,
.frame-component25_frameParent6__1dvyX,
.frame-component25_frameParent7__aTty6,
.frame-component25_frameParent9__LPnLY {
  align-self: stretch;
}

/* ── Auto Service card layout fix: icon → title → description ──────────── */
.frame-component25_rectangleParent3__qkhUT .frame-component25_frameParent7__aTty6 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 0;
}
.frame-component25_rectangleParent3__qkhUT .frame-component25_geminiSvg11__\+50Ea {
  width: 70px;
  height: 70px;
  display: block;
}
.frame-component25_rectangleParent3__qkhUT .frame-component25_serviceTitle__5A6Yu {
  padding: 0;
  display: block;
  width: 100%;
}
.frame-component25_rectangleParent3__qkhUT .frame-component25_serviceTitle__5A6Yu h3 {
  text-align: left;
  font-size: 24px;
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component25_rectangleParent3__qkhUT .frame-component25_serviceDetails__5pwA7 {
  width: 100%;
  padding: 0;
}
.frame-component25_rectangleParent3__qkhUT .frame-component25_weHandleAll__AGT4B {
  font-size: 16px;
  line-height: 140%;
  color: var(--color-white);
  font-weight: 400;
}

/* ── FIND A CAR button: visually match Figma (459 × 56, yellow text) ───── */
.frame-component25_contactButtonService__9xkan {
  margin-top: 60px;
}
.frame-component25_contactButtonService__9xkan button {
  height: 56px !important;
  width: min(459px, 90%) !important;
  border-radius: var(--br-6) !important;
  background-color: #000 !important;
}
.frame-component25_contactButtonService__9xkan button > div {
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: #FEAE00 !important;
}


/* ============================================================================
 * "OUR SERVICES" — parallax + 3D tilt layer
 * --------------------------------------------------------------------------
 * The 8 service cards stay perfectly aligned in their flex grid at all times.
 * The parallax effect lives INSIDE each card: the icon, headings and body
 * text drift on their own Z-planes while the card surface itself never
 * leaves the grid. The only outer-card transformation is the 3D tilt that
 * fires on hover (one card at a time, so the row stays balanced).
 *
 *   --p-scroll    0..1 progress as the section traverses the viewport.
 *   --p-mx        −0.5..0.5 normalised cursor X inside the section.
 *   --p-my        −0.5..0.5 normalised cursor Y inside the section.
 *   --ctx         −0.5..0.5 normalised cursor X inside the hovered card.
 *   --cty         −0.5..0.5 normalised cursor Y inside the hovered card.
 *   --depth       per-card depth weight (0.55..1.15) — drives the parallax
 *                 magnitude so each card's contents float at a different
 *                 speed, manufacturing genuine 3D depth.
 *   --stagger     integer card index used to delay the entrance animation.
 *
 * All cards share a single `perspective` on the parent so the hover-tilt
 * converges to one consistent vanishing point — the section reads as one
 * cohesive 3D scene, not 8 isolated tiles.
 * ========================================================================== */

.frame-component25_servicesTitle__ZX-cq {
  /* Establishes the 3D scene for all 8 cards. 1300 px is the new sweet
     spot — close enough that the tilt is clearly readable, far enough
     that the card never visibly intrudes on its neighbours. */
  perspective: 1300px;
  perspective-origin: 50% 30%;
}

/* The rows keep flex `align-items: stretch` so all cards in a row have
   exactly the same height, regardless of content length. This eliminates
   the "ragged" alignment the user pointed out. */
.frame-component25_frameParent__mLI85,
.frame-component25_frameParent5__fhGYX {
  align-items: stretch;
}
.frame-component25_rectangleParent__\+fCxt,
.frame-component25_rectangleGroup__Z7qss,
.frame-component25_rectangleContainer__\+Kysd,
.frame-component25_frameSection__TtIxd,
.frame-component25_rectangleParent2__o3BLP,
.frame-component25_rectangleParent3__qkhUT,
.frame-component25_rectangleParent4__4hfaw,
.frame-component25_rectangleParent5__3fO6\+ {
  /* Card surface fills the row — height matches its tallest sibling. */
  height: 100%;
}
.frame-component25_frameWrapper3__TADkQ {
  /* This is the wrapper around card-5 (PARTS SOURCING). It needs to
     stretch like its siblings so the row stays uniform. */
  align-self: stretch;
  display: flex;
  flex: 1 1;
}
.frame-component25_frameWrapper3__TADkQ > .frame-component25_rectangleParent2__o3BLP {
  flex: 1 1;
  align-self: stretch;
}

.frame-component25_parallaxCard__3tCBh {
  /* Defaults — overwritten via inline style by the React effect. */
  --depth: 1;
  --p-scroll: 0;
  --p-mx: 0;
  --p-my: 0;
  --ctx: 0;
  --cty: 0;
  --stagger: 0;
  --tilt: 0;
  --lift: 0;

  /* The card itself owns a 3D context so the icon/inner layers can sit on
     their own Z-plane and parallax independently. */
  transform-style: preserve-3d;
  transform-origin: center center;
  position: relative;
  will-change: transform, box-shadow;

  /* Entry state — invisible + a tiny lift. The .cardEntered class flips
     this on once the IntersectionObserver fires. The card NEVER leaves
     its grid slot during scroll — only inner elements parallax. */
  opacity: 0;
  transform: translate3d(0, 16px, 0);

  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Staggered entrance — 70ms between each card so the row "cascades" in. */
  transition-delay: calc(var(--stagger) * 70ms);
}

/* Once visible: card returns to its natural grid position. Only the hover
   tilt and the Z lift can transform the OUTER surface — both are explicit
   hover-only effects, so unhovered cards always sit flush in the grid. */
.frame-component25_cardEntered__3hAq3 {
  opacity: 1;
  transform:
    translate3d(0, 0, calc(var(--lift) * 1px))
    rotateX(calc(var(--cty) * var(--tilt) * -1deg))
    rotateY(calc(var(--ctx) * var(--tilt) * 1deg));
}

/* When the card is hovered: the surface tilts in 3D, lifts toward the
   viewer and grows a hair — three coordinated cues that make the
   depth read clearly without ever spilling onto the neighbouring cards.

   Magnitudes balanced for "noticeable but never showy":
     • tilt   ±8°    — clearly visible at a glance.
     • lift   30px   — punches the card forward by a meaningful amount
                       without overlapping its row siblings.
     • scale  1.02   — a hint of growth that grounds the lift.
*/
.frame-component25_cardHover__CtnHn {
  --tilt: 8;
  --lift: 30;
  z-index: 5;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 32px 56px -28px rgba(0, 0, 0, 0.55),
    0 16px 28px -16px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(254, 174, 0, 0.1) inset,
    0 0 40px -12px rgba(254, 174, 0, 0.12);
}
.frame-component25_cardHover__CtnHn.frame-component25_cardEntered__3hAq3 {
  /* Adds a slight scale on top of the tilt/lift the .cardEntered base
     rule applies. Composes cleanly so we don't fight specificity. */
  transform:
    translate3d(0, 0, calc(var(--lift) * 1px))
    rotateX(calc(var(--cty) * var(--tilt) * -1deg))
    rotateY(calc(var(--ctx) * var(--tilt) * 1deg))
    scale(1.02);
}

/* ── Stylistic policy ──────────────────────────────────────────────────
 *
 * The card itself is the only thing that animates on hover — its inner
 * contents (icons, headings, body copy) stay exactly where Figma put
 * them. No "parallax-inside-parallax". The 3D tilt on the surface is
 * enough to sell depth without dissolving the card's typographic grid.
 *
 * Keep this section short: NO `.cardHover .vector*`, NO `.cardHover h2`,
 * NO `.cardHover .weHelpYou` overrides — they would re-introduce the
 * inner parallax we deliberately removed.
 * ────────────────────────────────────────────────────────────────────── */

/* Reduced-motion users get a static section: no entrance, no parallax. */
@media (prefers-reduced-motion: reduce) {
  .frame-component25_parallaxCard__3tCBh,
  .frame-component25_parallaxCard__3tCBh * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .frame-component25_parallaxCard__3tCBh.frame-component25_cardHover__CtnHn {
    box-shadow: none;
  }
}

/* Touch / mobile: keep the entrance fade-in but skip the heavy 3D tilt
   (no hover available + would feel sluggish on low-end devices). */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .frame-component25_parallaxCard__3tCBh {
    transform: translate3d(0, 12px, 0);
  }
  .frame-component25_cardEntered__3hAq3 {
    transform: translate3d(0, 0, 0);
  }
  .frame-component25_parallaxCard__3tCBh.frame-component25_cardHover__CtnHn {
    transform: translate3d(0, 0, 0);
    box-shadow: none;
  }
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent__FiPoa,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent2__5myD8,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent3__Bbe-m,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent4__fBuwX,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent5__q5DFV,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent6__GHmpM,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent7__\+UeiD,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorParent8__\+-Yhl,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorContainer__jYR99,
  .frame-component25_cardEntered__3hAq3 .frame-component25_vectorGroup__xS1ms,
  .frame-component25_cardEntered__3hAq3 .frame-component25_eUAdaptation__v\+JjR,
  .frame-component25_cardEntered__3hAq3 .frame-component25_frameDiv__r06Y2,
  .frame-component25_cardEntered__3hAq3 .frame-component25_frameContainer__sNv2n,
  .frame-component25_cardEntered__3hAq3 .frame-component25_geminiSvg1Icon__0yS-D,
  .frame-component25_cardEntered__3hAq3 .frame-component25_geminiSvg11__\+50Ea {
    transform: none;
  }
}

/* ============================================================================
   UNIFIED SERVICE CARD LAYOUT  ·  2026-05-16 session
   ────────────────────────────────────────────────────────────────────────────
   Per design spec, every one of the 8 "Our Services" cards must share an
   IDENTICAL internal geometry:

       •  Card body            459.825 × 459.825 (square)
                                — currently we use the existing row layout
                                  which sizes them via `flex:1` → ~426 wide
                                  on a 1920 desktop. We pin the HEIGHT to
                                  ~ 360 px (matches the rest of the visual
                                  system) and let the width flex with the
                                  grid so the marketing layout above /
                                  below the section stays untouched.

       •  Background plate     full-bleed inside the card, gray #1d1d1b,
                                4 px radius                                  ↳ rendered via `.serviceCardBg` (absolute inset:0)

       •  Icon                 absolute   top: 30 px   left: 30 px
       •  Title (H Medium 24)  absolute   top: 126.51 px   left: 30 px
       •  Description (H 14)   absolute   top: 215 px      left: 30 px
                                (uniform left margin across all 8 cards)

   The legacy card-specific classes (.rectangleParent, .rectangleGroup,
   .rectangleContainer, .frameSection, .frameWrapper3, .rectangleParent3,
   .rectangleParent4, .rectangleParent5) are still attached so the
   `.parallaxCard` JS lookup keeps working — but every layout-affecting
   property is reset by the `.serviceCard` rule below.
============================================================================ */

.frame-component25_serviceCard__DCWFy {
  /* Wipe legacy flex/padding from the old per-card rules. */
  position: relative !important;
  flex: 1 1 !important;
  align-self: stretch;
  min-width: 280px;
  min-width: var(--min-w-280, 280px);
  height: 360px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  overflow: visible;
}

/* Gray rounded background plate (full-bleed inside each card). */
.frame-component25_serviceCardBg__2tWVd {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-color: var(--color-gray-300);
  z-index: 0;
  pointer-events: none;
}

/* Icon — pinned to (top:30, left:30) in every card. Acts as positioning
   context for legacy fragment wrappers (.eUAdaptation, .frameParent6,
   .frameParent11, etc.) that live inside, so original fragment top/left
   offsets are preserved exactly as the original Figma export produced. */
.frame-component25_serviceCardIcon__tCeUG {
  position: absolute;
  top: 30px;
  left: 30px;
  display: block;
  z-index: 2;
  pointer-events: none;
  /* Crisp SVG strokes on retina */
  shape-rendering: geometricPrecision;
}

/* Title — H Medium 24, pinned to (top:126.51, left:30, right:30). */
.frame-component25_serviceCardTitle__PNBci {
  position: absolute !important;
  top: 126.51px !important;
  left: 30px !important;
  right: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;

  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif !important;

  font-family: var(--font-mazzard, 'Mazzard H', 'Mazzard', system-ui, sans-serif) !important;
  font-size: 24px !important;
  line-height: 100% !important;
  font-weight: 500 !important;  /* H Medium */
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-white);
  z-index: 2;
}

/* Description — H Medium 14, pinned to (top:215, left:30, right:30). */
.frame-component25_serviceCardDesc__7ifor {
  position: absolute !important;
  top: 215px !important;
  left: 30px !important;
  right: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;

  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif !important;

  font-family: var(--font-mazzard, 'Mazzard H', 'Mazzard', system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 140% !important;
  font-weight: 500 !important;  /* H Medium */
  letter-spacing: 0;
  color: var(--color-white);
  z-index: 2;
}

/* Override leftover Auto-Service-specific h3 rule which was forcing 700. */
.frame-component25_rectangleParent3__qkhUT .frame-component25_serviceCardTitle__PNBci {
  font-weight: 500 !important;
}

/* ── Mobile / tablet: relax the absolute geometry, let cards stack ─────── */
@media (max-width: 925px) {
  .frame-component25_serviceCard__DCWFy {
    height: auto !important;
    min-height: 320px;
  }
  .frame-component25_serviceCardDesc__7ifor {
    /* Pin to icon-relative bottom so wrapped text never collides. */
    top: 200px !important;
  }
}

/* ============================================================================
 * BeforeAfterSection — Figma-accurate, fully functional carousel.
 *
 * Typography (verified against the canonical Figma export in BIBICARS 5.zip
 * — frame-component19.module.css, frame-component16.module.css and
 * homepage1.module.css). EVERY weight is 400 (regular) per canonical CSS:
 *
 *   • Title    "BEFORE AND AFTER"        → Mazzard 64px / weight 400 / uppercase / orange
 *   • Subhead  "Our clients receive…"    → Mazzard 24px / weight 400 / uppercase
 *                                           – yellow first line, white second line
 *   • Labels   "/ before"   /   "/ after" → Mazzard 20px / weight 400
 *                                           – white  /  orange
 *   • Card title "BMV 328"               → Mazzard 32px / weight 400 / uppercase / white
 *   • Field labels (mixed case)          → Mazzard 16px / weight 400 / white
 *     • "Order date"
 *     • "The date of the finished car"
 *     • "Turnkey price in Bulgaria"
 *   • Field values (uppercase)           → Mazzard 20px / weight 400 / white
 *     • "12.12.2025"  "12.04.2026"  "6,500 euro"
 *
 * Brackets use the canonical /figma/Vector.svg ( #555452, 3 px stroke ).
 * ========================================================================== */

.before-after-section_section__Bai49 {
  width: 100%;
  background-color: var(--color-black);
  padding: 90px 0 110px;
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  color: var(--color-white);
  overflow: hidden;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.before-after-section_title__HAJu0 {
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-size: 64px;
  line-height: 99.9%;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-orange-100);
  letter-spacing: 0;
  white-space: nowrap;
  padding: 0 40px;
}

/* ── Bracketed subheading ────────────────────────────────────────────────── */
.before-after-section_bracketRow__Re6wa {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 70px;                              /* Figma spec — 70 px from bracket to text both sides */
  margin: 60px 0 0 100px;                 /* left-align with card; bracket sits at card edge */
  padding: 16px 0;
}
.before-after-section_bracketLeft__jVWts,
.before-after-section_bracketRight__IxCoD {
  width: 13px;
  height: 76px;
  flex-shrink: 0;
}
.before-after-section_bracketRight__IxCoD { transform: scaleX(-1); }

.before-after-section_subhead__P-vJS {
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  line-height: 100%;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.before-after-section_subheadYellow__ls2dz {
  color: var(--color-orange-100);
  display: inline-block;
  margin-bottom: 14px;
}
.before-after-section_subheadWhite__dU6vi {
  color: var(--color-white);
  display: inline-block;
}

/* ── Carousel ───────────────────────────────────────────────────────────── */
.before-after-section_carousel__Po\+b9 {
  margin-top: 70px;
  padding-left: 100px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.before-after-section_track__nsW98 {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 100px;
  padding-bottom: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.before-after-section_track__nsW98::-webkit-scrollbar { display: none; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.before-after-section_card__Ygdk4 {
  flex: 0 0 auto;
  width: 880px;
  max-width: 90vw;
  background-color: #1C1C1C;
  border-radius: 0;
  padding: 32px 40px 40px;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.before-after-section_labelsRow__Nq-X0 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  font-family: inherit;
  font-size: 14px;                          /* Mazzard H Medium 14 (Figma) */
  line-height: 100%;
  font-weight: 500;                          /* Medium */
  letter-spacing: 0;
}
.before-after-section_labelBefore__cYiDH { color: var(--color-white); }
.before-after-section_labelAfter__P-umx  { color: var(--color-orange-100); }

.before-after-section_imagesRow__FdCcT {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 18px;
}
.before-after-section_cardImg__KIIEB {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 0;
  display: block;
  background: #0a0a0a;
}

.before-after-section_cardTitle__JMU6q {
  margin: 60px 0 0;
  font-family: inherit;
  font-size: 32px;
  line-height: 99.9%;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: 0;
}

.before-after-section_cardFooter__dhh7J {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 32px;
  gap: 32px;
  position: relative;
}
.before-after-section_cardFooter__dhh7J::before,
.before-after-section_cardFooter__dhh7J::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.before-after-section_cardFooter__dhh7J::before {
  left: calc(33.333% - 16px);
}
.before-after-section_cardFooter__dhh7J::after {
  left: calc(66.666% - 16px);
}
.before-after-section_footerCell__8yG6Y {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.before-after-section_footerLabel__E\+p6B {
  font-family: inherit;
  font-size: 16px;
  line-height: 100%;
  font-weight: 400;
  color: var(--color-white);
  text-transform: none;
  letter-spacing: 0;
}
.before-after-section_footerValue__h-qtx {
  font-family: inherit;
  font-size: 20px;
  line-height: 99.9%;
  font-weight: 400;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
}
/* Note: per canonical Figma all 3 footer values share the same 20 px / 400
   treatment (Order date · Finished date · Turnkey price). No special-case
   for the price column — it is white, not amber. */

/* ── Navigation ─────────────────────────────────────────────────────────── */
.before-after-section_nav__ZP-g1 {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.before-after-section_navBtn__XGV0c {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-orange-100);
  background: transparent;
  color: var(--color-orange-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.before-after-section_navBtn__XGV0c:hover:not(:disabled) {
  background-color: var(--color-orange-100);
  color: #000;
}
.before-after-section_navBtn__XGV0c:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.before-after-section_dots__Hg0yQ {
  display: flex;
  align-items: center;
  gap: 14px;
}
.before-after-section_dot__fEFl9 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.before-after-section_dot__fEFl9:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.before-after-section_dotActive__5dQB7 {
  width: 14px;
  height: 14px;
  background-color: var(--color-orange-100);
}

/* ── Responsive (mirrors canonical Figma media queries) ──────────────────── */

/* ≤1350px — title gracefully shrinks (canonical doesn't define an exact bp,
   but on narrow desktops 64 px overflows). */
@media screen and (max-width: 1350px) {
  .before-after-section_title__HAJu0 { font-size: 51px; }
}

/* ≤1100px — tighter cards, but typography stays at canonical sizes. */
@media screen and (max-width: 1100px) {
  .before-after-section_bracketRow__Re6wa { margin-left: 40px; }
  .before-after-section_carousel__Po\+b9 { padding-left: 40px; }
  .before-after-section_track__nsW98 { scroll-padding-left: 40px; }
  .before-after-section_card__Ygdk4 { width: 720px; padding: 24px 28px 32px; }
  .before-after-section_cardImg__KIIEB { height: 280px; }
}

/* ≤925px — canonical: BMV 328 → 26 px (.bmv328). */
@media screen and (max-width: 925px) {
  .before-after-section_title__HAJu0 { font-size: 51px; line-height: 51px; }
  .before-after-section_cardTitle__JMU6q { font-size: 26px; line-height: 26px; }
}

/* ≤700px — narrow tablets / large phones. */
@media screen and (max-width: 700px) {
  .before-after-section_bracketRow__Re6wa { margin-left: 20px; }
  .before-after-section_carousel__Po\+b9 { padding-left: 20px; }
  .before-after-section_track__nsW98 { scroll-padding-left: 20px; }
  .before-after-section_card__Ygdk4 { width: 86vw; padding: 20px; }
  .before-after-section_cardImg__KIIEB { height: 200px; }
  .before-after-section_cardFooter__dhh7J { grid-template-columns: 1fr; gap: 20px; }
  .before-after-section_cardFooter__dhh7J::before,
  .before-after-section_cardFooter__dhh7J::after { display: none; }
}

/* ≤450px — canonical: title 38 px, subhead 19 px, labels/values 16 px,
   BMV 328 19 px. */
@media screen and (max-width: 450px) {
  .before-after-section_title__HAJu0 { font-size: 38px; line-height: 38px; }
  .before-after-section_subhead__P-vJS { font-size: 19px; line-height: 19px; }
  .before-after-section_labelsRow__Nq-X0 { font-size: 14px; line-height: 14px; }
  .before-after-section_cardTitle__JMU6q { font-size: 19px; line-height: 19px; }
  .before-after-section_footerLabel__E\+p6B { font-size: 14px; line-height: 14px; }
  .before-after-section_footerValue__h-qtx { font-size: 16px; line-height: 16px; }
}

/* Empty state — no enabled before/after cards. */
.before-after-section_empty__EVaRv {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Mazzard', system-ui, sans-serif;
  font-size: 18px;
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   "Преди и след" is shorter than "Before and after" so the title is OK.
   But the bracketed sub-line "Нашите клиенти получават / най-добрата услуга"
   is longer than "Our clients receive / the best service" — keep same box.
*/
html[lang="bg"] .before-after-section_title__HAJu0 {
  letter-spacing: -0.005em;
}
html[lang="bg"] .before-after-section_bracketRow__Re6wa {
  /* Slightly tighter letter spacing on the inner labels so the long BG
     phrase still hugs the bracket like the EN version did. */
  letter-spacing: -0.005em;
}

.frame-component16_bmvDetails__eHIeb,
.frame-component16_bmvDetailsParent__jntvS {
  background-color: var(--color-gray-200);
}
.frame-component16_bmvDetailsParent__jntvS {
  align-self: stretch;
  height: var(--height-727);
  position: relative;
  max-width: 100%;
  z-index: 0;
  text-align: left;
  font-size: var(--fs-32);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component16_bmvDetails__eHIeb {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.frame-component16_bmvElements__dGwqJ {
  position: absolute;
  top: 500.9px;
  left: 22px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
}
.frame-component16_bmv328__RF7KG {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
}
.frame-component16_rectangleParent__FGs1- {
  position: absolute;
  top: 24px;
  left: calc(50% - 406px);
  width: var(--width-812);
  height: var(--height-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap--402);
}
.frame-component16_frameChild__ViQhj {
  height: var(--height-370_4);
  width: var(--width-402);
  position: relative;
  background-color: var(--color-gray-100);
  display: none;
  flex-shrink: 0;
}
.frame-component16_componentChild__p93sX,
.frame-component16_componentInner__Nsog2,
.frame-component16_componentItem__ifKY3 {
  position: absolute;
  top: 505px;
  border-radius: var(--br-8);
  background-color: var(--color-black);
  height: var(--height-118_3);
  display: none;
}
.frame-component16_componentChild__p93sX {
  left: 26px;
  width: var(--width-223);
}
.frame-component16_componentInner__Nsog2,
.frame-component16_componentItem__ifKY3 {
  width: var(--width-255_2);
}
.frame-component16_componentItem__ifKY3 {
  left: calc(50% - 127.6px);
}
.frame-component16_componentInner__Nsog2 {
  left: 582.8px;
}
.frame-component16_dataLayoutWrapper__zOUZr {
  position: absolute;
  top: 582.2px;
  left: 22px;
  width: var(--width-795_4);
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--fs-16);
}
.frame-component16_dataLayout__L14Sc,
.frame-component16_dataLayoutWrapper__zOUZr,
.frame-component16_orderDateParent__fKQwV {
  display: flex;
  align-items: flex-start;
}
.frame-component16_dataLayout__L14Sc {
  flex: 1 1;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
}
.frame-component16_orderDateParent__fKQwV {
  width: 136.2px;
  flex-direction: column;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-18);
}
.frame-component16_labelContainer__EnKNT,
.frame-component16_orderDate__28BNM {
  position: relative;
  display: inline-block;
}
.frame-component16_orderDate__28BNM {
  width: var(--width-86);
}
.frame-component16_labelContainer__EnKNT {
  margin: 0;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  min-width: var(--min-w-99);
}
.frame-component16_dataDisplay__T6n2v {
  height: 80.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4.3px var(--padding-33) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  z-index: 4;
}
.frame-component16_dataDisplayChild__4E-WQ {
  width: var(--width-0_6);
  flex: 1 1;
  position: relative;
  background-color: var(--color-gainsboro-200);
}
.frame-component16_theDateOfTheFinishedCarParent__k\+0sy {
  width: 219.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-2) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-18);
  z-index: 2;
}
.frame-component16_h3__m29lm,
.frame-component16_theDateOf__Ge4Pb {
  position: relative;
}
.frame-component16_theDateOf__Ge4Pb {
  align-self: stretch;
  z-index: 2;
}
.frame-component16_h3__m29lm {
  margin: 0;
  width: var(--width-103);
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component16_dataLayoutChild__LbbOy {
  height: var(--height-76_4);
  width: var(--width-0_6);
  position: relative;
  background-color: var(--color-gainsboro-200);
  z-index: 5;
}
.frame-component16_turnkeyPriceInBulgariaParent__irIqh {
  width: var(--width-193);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-19);
  z-index: 3;
}
.frame-component16_turnkeyPriceIn__jmxkY {
  align-self: stretch;
  position: relative;
}
.frame-component16_euro__r9GA0 {
  margin: 0;
  position: relative;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: var(--min-w-114);
}
.frame-component16_dtKlausenLs1351Parent__D0u-j,
.frame-component16_frameParent__gGTuU {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component16_frameParent__gGTuU {
  position: absolute;
  top: 77px;
  left: 22px;
  width: var(--width-812);
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-8);
}
.frame-component16_dtKlausenLs1351Parent__D0u-j {
  width: var(--width-402);
  row-gap: var(--gap-20);
  z-index: 2;
}
.frame-component16_dtKlausenLs1351Icon__vjJl9,
.frame-component16_dtKlausenLs1352Icon__bmQwb {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.frame-component16_dtKlausenLs1351Icon__vjJl9 {
  width: var(--width-402);
  flex-shrink: 0;
}
.frame-component16_dtKlausenLs1352Icon__bmQwb {
  flex: 1 1;
  overflow: hidden;
  min-width: var(--min-w-261);
  z-index: 1;
}
@media screen and (max-width: 925px) {
  .frame-component16_bmvDetailsParent__jntvS {
    height: auto;
    min-height: var(--min-h-727);
  }
  .frame-component16_bmv328__RF7KG {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .frame-component16_dataLayout__L14Sc {
    flex-wrap: wrap;
  }
  .frame-component16_dataLayoutChild__LbbOy {
    width: 100%;
    height: var(--height-0_6);
  }
  .frame-component16_dtKlausenLs1351Parent__D0u-j {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .frame-component16_bmv328__RF7KG {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component16_euro__r9GA0,
  .frame-component16_h3__m29lm,
  .frame-component16_labelContainer__EnKNT {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
}

.frame-component15_frameParent__CpOL8,
.frame-component15_orderDateParent__sVTER {
  display: flex;
  align-items: flex-start;
}
.frame-component15_frameParent__CpOL8 {
  height: var(--height-80_5);
  width: 218.2px;
  justify-content: space-between;
  padding: var(--padding-0) var(--padding-30) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-20);
  z-index: 2;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component15_orderDateParent__sVTER {
  flex-direction: column;
  gap: var(--gap-18);
  flex-shrink: 0;
}
.frame-component15_h3__lwoVi,
.frame-component15_orderDate__SE5NU {
  position: relative;
  display: inline-block;
}
.frame-component15_orderDate__SE5NU {
  width: var(--width-86);
}
.frame-component15_h3__lwoVi {
  margin: 0;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  min-width: var(--min-w-99);
}
.frame-component15_dateBackgroundWrapper__Go5XB {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-4_1) var(--padding-0) var(--padding-0);
}
.frame-component15_dateBackground__7GtZ\+ {
  width: var(--width-0_6);
  flex: 1 1;
  position: relative;
  background-color: var(--color-gainsboro-200);
  flex-shrink: 0;
}
@media screen and (max-width: 450px) {
  .frame-component15_h3__lwoVi {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
}

.frame-component14_instanceChild__oUthF,
.frame-component14_rectangleParent__r9eDC {
  background-color: var(--color-gray-200);
}
.frame-component14_rectangleParent__r9eDC {
  align-self: stretch;
  height: var(--height-727);
  position: relative;
  max-width: 100%;
  z-index: 0;
  text-align: left;
  font-size: var(--fs-32);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component14_instanceChild__oUthF {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.frame-component14_bmv328Wrapper__\+43EZ {
  position: absolute;
  top: 500.9px;
  left: 22px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
}
.frame-component14_bmv328__pR95B {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
}
.frame-component14_rectangleGroup__BWayA {
  position: absolute;
  top: 24px;
  left: calc(50% - 406px);
  width: var(--width-812);
  height: var(--height-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap--402);
}
.frame-component14_frameChild__M7I2i {
  height: var(--height-370_4);
  width: var(--width-402);
  position: relative;
  background-color: var(--color-gray-100);
  display: none;
  flex-shrink: 0;
}
.frame-component14_instanceInner__II-yb,
.frame-component14_instanceItem__VN8x9,
.frame-component14_rectangleDiv__BB2I1 {
  position: absolute;
  top: 505px;
  border-radius: var(--br-8);
  background-color: var(--color-black);
  height: var(--height-118_3);
  display: none;
}
.frame-component14_instanceItem__VN8x9 {
  left: 26px;
  width: var(--width-223);
}
.frame-component14_instanceInner__II-yb,
.frame-component14_rectangleDiv__BB2I1 {
  width: var(--width-255_2);
}
.frame-component14_instanceInner__II-yb {
  left: calc(50% - 127.5px);
}
.frame-component14_rectangleDiv__BB2I1 {
  left: 582.9px;
}
.frame-component14_frameParent__XkZ22,
.frame-component14_frameWrapper__LSq8a {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component14_frameWrapper__LSq8a {
  position: absolute;
  top: 582.2px;
  left: 22px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
  box-sizing: border-box;
  font-size: var(--fs-16);
}
.frame-component14_frameParent__XkZ22 {
  gap: 54.1px;
}
.frame-component14_theDateOfTheFinishedCarParent__uuA\+k {
  width: var(--width-217);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-18);
  z-index: 1;
}
.frame-component14_theDateOf__LXMGh {
  align-self: stretch;
  position: relative;
  z-index: 2;
}
.frame-component14_labelturnkey__8Zx6E {
  margin: 0;
  width: var(--width-103);
  position: relative;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component14_rectangleContainer__lhOM5 {
  height: var(--height-76_4);
  width: 244.9px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
}
.frame-component14_frameInner__rs8wL {
  align-self: stretch;
  width: var(--width-0_6);
  position: relative;
  background-color: var(--color-gainsboro-200);
  flex-shrink: 0;
  z-index: 2;
}
.frame-component14_turnkeyPriceInBulgariaParent__YC\+0s {
  width: var(--width-193);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-19);
  flex-shrink: 0;
  z-index: 1;
}
.frame-component14_turnkeyPriceIn__SxJqo {
  align-self: stretch;
  position: relative;
}
.frame-component14_euro__bawP0 {
  margin: 0;
  position: relative;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: var(--min-w-114);
}
.frame-component14_dtKlausenLs1351Parent__OQph3,
.frame-component14_frameGroup__ERgMs {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component14_frameGroup__ERgMs {
  position: absolute;
  top: 18.4px;
  left: 22px;
  gap: var(--gap-8);
}
.frame-component14_dtKlausenLs1351Parent__OQph3 {
  width: var(--width-402);
  row-gap: var(--gap-20);
}
.frame-component14_dtKlausenLs1351Icon__KW0pX {
  width: var(--width-402);
  position: relative;
  max-height: 100%;
  object-fit: contain;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component14_dtKlausenLs1352Wrapper__uJCr0 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 58.6px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-component14_dtKlausenLs1352Icon__4kjeF {
  width: 100%;
  position: relative;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}
@media screen and (max-width: 925px) {
  .frame-component14_rectangleParent__r9eDC {
    height: auto;
    min-height: var(--min-h-727);
  }
  .frame-component14_bmv328__pR95B {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .frame-component14_dtKlausenLs1351Parent__OQph3,
  .frame-component14_frameGroup__ERgMs,
  .frame-component14_frameParent__XkZ22 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .frame-component14_bmv328__pR95B {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component14_euro__bawP0,
  .frame-component14_labelturnkey__8Zx6E {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
}

.frame-component19_orderProcessWrapper__BaZGN {
  padding: var(--padding-0) var(--padding-0) 27.8px var(--padding-6);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-20);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component19_componentParent__BAS6z,
.frame-component19_orderProcess__O\+2Lv,
.frame-component19_orderProcessWrapper__BaZGN {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component19_orderProcess__O\+2Lv {
  overflow-x: auto;
  gap: var(--gap-16_5);
}
.frame-component19_componentParent__BAS6z {
  width: var(--width-856);
  flex-shrink: 0;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
.frame-component19_beforeProcess__\+X\+n3 {
  width: var(--width-64);
  margin: 0 !important;
  position: absolute;
  top: 12.4px;
  left: 30px;
  border-radius: var(--br-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 1;
}
.frame-component19_before__\+H5uv {
  margin: 0;
  width: var(--width-80);
  position: relative;
  font-size: inherit;
  line-height: 100%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
}
.frame-component19_afterPhase__6bW35 {
  width: var(--width-47);
  margin: 0 !important;
  position: absolute;
  top: 12.4px;
  right: 369px;
  border-radius: var(--br-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 2;
  color: var(--color-orange-100);
}
.frame-component19_after__46tbx {
  margin: 0;
  width: 63px;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
}
.frame-component19_afterWrapper__ZgyZU {
  width: var(--width-47);
  margin: 0 !important;
  position: absolute;
  top: 12.4px;
  right: 368px;
  border-radius: var(--br-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 2;
  color: var(--color-orange-100);
}
.frame-component19_instanceGroup__BKK45 {
  height: var(--height-727);
  width: var(--width-856);
  position: relative;
  flex-shrink: 0;
  max-width: 100%;
  font-size: var(--fs-32);
}
.frame-component19_instanceChild__Lq9aL,
.frame-component19_rectangleParent__S3Zl- {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-gray-200);
  width: 100%;
  height: 100%;
}
.frame-component19_rectangleParent__S3Zl- {
  max-width: 100%;
}
.frame-component19_instanceChild__Lq9aL {
  display: none;
}
.frame-component19_bmv328Wrapper__Ehmqi {
  position: absolute;
  top: 500.9px;
  left: 22px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
}
.frame-component19_bmv328__ipXvj {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
}
.frame-component19_rectangleGroup__KXkV8 {
  position: absolute;
  top: 24px;
  left: calc(50% - 406px);
  width: var(--width-812);
  height: var(--height-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap--402);
}
.frame-component19_frameChild__AFNz3 {
  height: var(--height-370_4);
  width: var(--width-402);
  position: relative;
  background-color: var(--color-gray-100);
  display: none;
  flex-shrink: 0;
}
.frame-component19_instanceInner__Ag9Zt,
.frame-component19_instanceItem__J4gh2,
.frame-component19_rectangleDiv__xDjup {
  position: absolute;
  top: 505px;
  border-radius: var(--br-8);
  background-color: var(--color-black);
  height: var(--height-118_3);
  display: none;
}
.frame-component19_instanceItem__J4gh2 {
  left: 26px;
  width: var(--width-223);
}
.frame-component19_instanceInner__Ag9Zt,
.frame-component19_rectangleDiv__xDjup {
  width: var(--width-255_2);
}
.frame-component19_instanceInner__Ag9Zt {
  left: calc(50% - 127.6px);
}
.frame-component19_rectangleDiv__xDjup {
  left: 582.8px;
}
.frame-component19_frameWrapper__H6HJg {
  position: absolute;
  top: 582.2px;
  left: 22px;
  width: var(--width-795_4);
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-7);
  box-sizing: border-box;
  font-size: var(--fs-16);
}
.frame-component19_dateElementParent__tF1AU,
.frame-component19_frameWrapper__H6HJg,
.frame-component19_nestedFinishedParent__5TNnE {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component19_dateElementParent__tF1AU {
  flex: 1 1;
  gap: 84.3px;
}
.frame-component19_nestedFinishedParent__5TNnE {
  gap: 52.6px;
}
.frame-component19_nestedFinished__lcsle {
  width: var(--width-217);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-18);
}
.frame-component19_h3__wX7oY,
.frame-component19_theDateOf__t\+sIa {
  position: relative;
}
.frame-component19_theDateOf__t\+sIa {
  align-self: stretch;
  z-index: 2;
}
.frame-component19_h3__wX7oY {
  margin: 0;
  width: var(--width-103);
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component19_priceBackground__GRnyw {
  height: var(--height-76_4);
  width: var(--width-0_6);
  position: relative;
  background-color: var(--color-gainsboro-200);
}
.frame-component19_priceDetails__K6kcl {
  width: var(--width-193);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-19);
}
.frame-component19_turnkeyPriceIn__toIlq {
  align-self: stretch;
  position: relative;
}
.frame-component19_euro__uM3FN {
  margin: 0;
  position: relative;
  font-size: var(--fs-20);
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: var(--min-w-114);
}
.frame-component19_frameParent__ModZv,
.frame-component19_wrapperDtKlausenLs1351Parent__JisHO {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-component19_frameParent__ModZv {
  position: absolute;
  top: 77px;
  left: 22px;
  width: var(--width-812);
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-8);
}
.frame-component19_wrapperDtKlausenLs1351Parent__JisHO {
  width: var(--width-402);
  row-gap: var(--gap-20);
  z-index: 2;
}
.frame-component19_wrapperDtKlausenLs1351__6aOS0 {
  width: var(--width-402);
  position: relative;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.frame-component19_dtKlausenLs1351Icon__IlmHK {
  width: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transform: scale(1);
}
.frame-component19_dtKlausenLs1352Icon__Wtoiy {
  flex: 1 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  min-width: var(--min-w-261);
  z-index: 1;
}
.frame-component19_beforeContainer__1xIIg {
  position: absolute;
  top: 12.4px;
  left: 30px;
  border-radius: var(--br-8);
  width: var(--width-64);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10);
  box-sizing: border-box;
  font-size: var(--fs-20);
}
@media screen and (max-width: 925px) {
  .frame-component19_instanceGroup__BKK45,
  .frame-component19_rectangleParent__S3Zl- {
    height: auto;
    min-height: var(--min-h-727);
  }
  .frame-component19_bmv328__ipXvj {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .frame-component19_dateElementParent__tF1AU,
  .frame-component19_nestedFinishedParent__5TNnE {
    flex-wrap: wrap;
  }
  .frame-component19_priceBackground__GRnyw {
    width: 100%;
    height: var(--height-0_6);
  }
  .frame-component19_wrapperDtKlausenLs1351Parent__JisHO {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .frame-component19_after__46tbx,
  .frame-component19_before__\+H5uv {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
  .frame-component19_bmv328__ipXvj {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .frame-component19_euro__uM3FN,
  .frame-component19_h3__wX7oY {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
}

/* ============================================================================
 * ReviewsArea1 — Figma-accurate "OUR CLIENTS SAY" block.
 * FULLY FLUID RESPONSIVE: scales smoothly from mobile (320 px) to 4K (3840 px+)
 * without fixed-pixel breakpoint jumps. Geometric proportions are preserved
 * across every viewport.
 *
 * Design tokens (Figma 1920 viewport reference):
 *   • Card: 582 × 486 px         (582 = (1179 − 15) / 2)
 *   • Gap:  15 px
 *   • 460+ block: 1179 × 455 px  (= 2 cards + gap)
 *   • Heading "What customers say…": 60 px / Bold / orange
 *   • Card name (Georgi …):       24 px / Bold / orange
 *   • Card text:                  24 px / Regular / white / lh 27.5
 *   • Big "{N} +":                431.35 px / SemiBold Italic / 15 % white
 *   • Bracketed "Satisfied":      24 px / Medium / uppercase
 *
 * The reference column the block sits in is 1179 px at 1920 viewport, i.e.
 * ~61.4 vw. Below 1024 px viewport the layout collapses to a single column
 * with heading on top and cards stacked vertically.
 * ========================================================================== */

/* CSS variables make the whole block scale via a single tunable knob.
   `--ra-track` is the slider track width (= 460+ block width, fluid). */
.reviews-area1_reviewsArea__o0aHv {
  /* fluid track between 320 px (mobile) and 1179 px (desktop) */
  --ra-track: clamp(320px, 61.4vw, 1179px);
  --ra-gap: clamp(8px, 0.78vw, 15px);
  /* gap BETWEEN the two layout columns (heading | cards). Exposed as a
     variable so the heading can stretch across it and land exactly at
     the arrow tip. */
  --ra-layout-gap: clamp(16px, 1.6vw, 32px);
  --ra-card-w: calc((var(--ra-track) - var(--ra-gap)) / 2);
  /* card aspect ratio 582:486 = 1.198 (preserved for proportional height) */
  --ra-card-h: calc(var(--ra-card-w) * 0.835);
  /* 460+ block height: 455/1179 = 0.386 of track width */
  --ra-block-h: calc(var(--ra-track) * 0.386);
  /* 460+ font size: 431.35/1179 = 0.366 of track width */
  --ra-num-size: calc(var(--ra-track) * 0.366);
  --ra-num-lh: calc(var(--ra-track) * 0.386);
  /* SATISFIED CLIENTS positioning inside the 460+ block */
  --ra-sat-top: calc(var(--ra-block-h) * 0.278);
  --ra-sat-right: calc(var(--ra-track) * 0.158);
  /* slider top offset: 298/1179 = 0.253 of track width
     (cards overlap bottom 157 px of 460+ block per canonical Figma) */
  --ra-slider-top: calc(var(--ra-track) * 0.253);
  /* Arrow icon (fontisto:arrow-up). In Figma the element is 215×215 px
     rotated -45.3°. The SVG export at /figma/fontisto_arrow-up.svg already
     bakes that rotation into its path (viewBox 305×305 → diamond), so we
     render it at its NATURAL 215 px box and just position it absolutely.
     FIXED at 215 px on desktop per design spec — the icon is hidden on
     tablet (<=1024 px) so a fixed size won't cause overflow. */
  --ra-arrow-size: 215px;

  width: 100%;
  /* Left padding kept small (Figma uses 12 px); right padding remains generous
     so the cards row visually breathes from the viewport edge. Top padding
     reduced so the "OUR CLIENTS SAY" heading sits close to the 460+ block
     per Figma (small gap, not a large void). */
  padding: clamp(8px, 0.83vw, 16px) clamp(20px, 5.2vw, 100px) 0
           clamp(8px, 0.625vw, 12px);
  box-sizing: border-box;
  background-color: var(--color-black);
  color: var(--color-orange-100);
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.reviews-area1_layout__44Eze {
  display: grid;
  /* Left column widens enough (≥ 491 px at 1920) so the 60 px Bold heading
     wraps to exactly 3 lines: "What customers / say when they / work with us"
     — matching the Figma reference. */
  grid-template-columns: minmax(300px, 1fr) var(--ra-track);
  grid-gap: var(--ra-layout-gap);
  gap: var(--ra-layout-gap);
  align-items: start;
  position: relative;
}

/* ── LEFT column — Google block + headline + arrow icon ──────────────────
 * Layout per Figma reference (audited):
 *   ┌── leftColumn ──────────────┐  ┌── rightColumn ─────────────────────┐
 *   │ Google logo + 4.9 + stars  │  │ 460+ [ SATISFIED CLIENTS / ARE     │
 *   │ "31 Google reviews"        │  │        OUR PRIORITY ]              │
 *   │                            │  │                                    │
 *   │ "What customers / say when │  │ [Card][Card][Card][Card][Card]…    │
 *   │  they / work with us"      │  │                                    │
 *   └────────────────────────────┘  └────────────────────────────────────┘
 *
 * Google block aligns with TOP of 460+ block.
 * "What customers say…" heading aligns with TOP of cards row.
 * Both columns share the same grid row, no padding-top on column.
 */
.reviews-area1_leftColumn__pzJSA {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  /* No padding-top — Google block uses absolute positioning to align with
     the [SATISFIED CLIENTS / ARE OUR PRIORITY] brackets centerline on the
     right column, regardless of column height. */
  padding-top: 0;
  min-width: 0;
  z-index: 3;
  gap: 0;
  /* Reserve space so absolute children are properly contained */
  min-height: calc(var(--ra-block-h) + 350px);
}

/* ── Google rating block ──────────────────────────────────────────────────
 * Top-edge aligned with the [SATISFIED CLIENTS / ARE OUR PRIORITY] caption
 * on the right column so both blocks sit "facing each other" on the same
 * horizontal line. Uses the same `--ra-sat-top` token, so they stay glued
 * at every viewport. */
.reviews-area1_googleBlock__CFvOc {
  position: absolute;
  top: var(--ra-sat-top);
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 41px;
  width: auto;
}
.reviews-area1_googleLogo__9hLMd {
  width: clamp(160px, 13.5vw, 259px);
  height: auto;
  flex-shrink: 0;
  position: relative;
}
.reviews-area1_googleMeta__UVgGi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 17px;
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.reviews-area1_googleRatingRow__9re3h {
  display: flex;
  align-items: center;
  gap: 15px;
}
.reviews-area1_googleScore__pHi6D {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}
.reviews-area1_googleStars__35pza {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.reviews-area1_googleStar__59LBU {
  width: 24px;
  height: 24px;
  display: block;
}
.reviews-area1_googleReviewsLink__om1pb {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.reviews-area1_googleReviewsLink__om1pb:hover {
  opacity: 0.85;
}

.reviews-area1_whatCustomersSay__bQtGW {
  margin: 0;
  /* "What customers say…" — vertically aligned with the CARDS BODY (not the
     top edge). We anchor to the slider top + the card padding-top so the
     subtitle starts level with the avatar / name row inside the cards. The
     padding-top inside `.card` is clamp(28px, 3.33vw, 64px), so we mirror
     the same expression here to keep the alignment fluid across viewports. */
  position: absolute;
  top: calc(var(--ra-slider-top) + clamp(28px, 3.33vw, 64px));
  left: 0;
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  /* Figma typography (audited from layout panel):
       Font: Mazzard
       Weight: 700  (H Bold)
       Size: 60 px
       Line height: 61 px
       Letter spacing: 0
       Color: #FEAE00  ( --color-orange-100 ) */
  font-size: clamp(28px, 3.125vw, 60px);   /* 60 / 1920 = 3.125 vw */
  line-height: calc(61 / 60);              /* exact 61 px at 60 px size */
  font-weight: 700;
  font-style: normal;
  color: var(--color-orange-100);          /* #FEAE00 */
  letter-spacing: 0;
  text-align: left;

  /* Heading STRETCHES from its left edge all the way to the ARROW TIP
     (= cards row left edge). Right edge of the heading box therefore
     lands exactly where the arrow's right corner sits — eliminating the
     visual gap the user described. We extend the box BY the layout gap
     using calc(): the heading overflows its grid column into the gap. */
  width: calc(100% + var(--ra-layout-gap));
  max-width: none;
  box-sizing: border-box;
  /* Tiny right padding so descenders don't kiss the arrow path —
     keeps the text comfortably ending at the arrow tip. */
  padding-right: clamp(4px, 0.4vw, 8px);
}

/* ARROW ICON — pixel-accurate Figma placement (audit-driven):
 *
 *   Figma spec (from layout panel):
 *     • Width  = 215 px
 *     • Height = 215 px
 *     • Rotation = -45.3°  (already baked into the exported SVG path —
 *                            viewBox 305×305, see /figma/fontisto_arrow-up.svg)
 *
 *   Geometric anchors (described by the design):
 *     • RIGHT edge of the arrow icon  ==  LEFT edge of the reviews cards row
 *     • BOTTOM edge of the arrow icon ==  BOTTOM edge of the cards row
 *     • The arrow lives in the GAP COLUMN between the heading text and the
 *       cards row — it is NOT a flow child of the heading any more.
 *
 *   We position it absolutely inside `.layout` (which is `position: relative`),
 *   using the same CSS tokens that drive the cards row geometry so the
 *   arrow stays glued to the cards on every viewport.
 */
.reviews-area1_fontistoarrowUpIcon__1mNYR {
  position: absolute;
  width: var(--ra-arrow-size);
  height: var(--ra-arrow-size);

  /* RIGHT-edge anchor:
       layout-right - track  ==  cards row LEFT edge
     (no extra gap → "сразу упирается в блок отзывы" per the brief) */
  right: var(--ra-track);

  /* BOTTOM-edge anchor:
       cards row TOP   = --ra-slider-top
       cards row HEIGHT = --ra-card-h
       cards row BOTTOM = slider-top + card-h
     so arrow TOP = (slider-top + card-h) - arrow-size */
  top: calc(var(--ra-slider-top) + var(--ra-card-h) - var(--ra-arrow-size));

  margin: 0;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  z-index: 1; /* above the 460+ backdrop, below the cards */
}

/* ── RIGHT column — backdrop + slider ────────────────────────────────────── */
.reviews-area1_rightColumn__GRIcx {
  position: relative;
  width: var(--ra-track);
  min-width: 0;
}

/* The 460+ container — fluid 1179×455 (preserves aspect ratio).
   Width matches exactly 2 cards + gap, so right edge aligns with card 2 right. */
.reviews-area1_bigNumberBlock__UXNwV {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ra-track);
  height: var(--ra-block-h);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.reviews-area1_bigNumber__lsGKi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  font-size: var(--ra-num-size);
  line-height: var(--ra-num-lh);
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  text-align: left;
  display: inline-block;
}

/* "Satisfied clients / are our priority" — fluid position inside 460+ block. */
.reviews-area1_satisfiedBlock__C8ONG {
  position: absolute;
  top: var(--ra-sat-top);
  right: var(--ra-sat-right);
  display: flex;
  align-items: center;
  /* 70 px bracket↔text gap on desktop to match the canonical Figma
     spec used by Vehicle Deals ("Thousands of listings.") and
     Before/After. Scales down fluidly on smaller viewports so the
     bracketed block stays within the 460+ stage. */
  gap: clamp(14px, 4.55vw, 70px);
  z-index: 4;
  pointer-events: auto;
}

.reviews-area1_bracketLeft__7DZQy,
.reviews-area1_bracketRight__ntQy4 {
  width: clamp(8px, 0.68vw, 13px);
  height: clamp(48px, 3.96vw, 76px);
  flex-shrink: 0;
  filter: invert(36%) sepia(0%) saturate(0%) hue-rotate(0deg)
          brightness(95%) contrast(85%);
}
.reviews-area1_bracketRight__ntQy4 { transform: scaleX(-1); }

.reviews-area1_satisfiedLabel__YKHUT {
  margin: 0;
  font-family: inherit;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.33;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0;
}
.reviews-area1_satisfiedYellow__CWosc { color: var(--color-orange-100); }
.reviews-area1_satisfiedWhite__5aYXI  { color: var(--color-white); }

/* ── Slider track ───────────────────────────────────────────────────────── */
.reviews-area1_sliderWrap__CMcGU {
  position: relative;
  margin-top: var(--ra-slider-top);
  width: var(--ra-track);
  max-width: 100%;
  z-index: 2;
  overflow: visible;
}

.reviews-area1_track__fx6lq {
  display: flex;
  gap: var(--ra-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-area1_track__fx6lq::-webkit-scrollbar { display: none; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.reviews-area1_card__9S5lV {
  flex: 0 0 var(--ra-card-w);
  width: var(--ra-card-w);
  min-height: var(--ra-card-h);
  background-color: var(--color-gray-200);
  padding: clamp(28px, 3.33vw, 64px) clamp(20px, 2.6vw, 50px)
           clamp(32px, 4.38vw, 84px);
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.13vw, 60px);

  /* ── Focus animation — "depth, not damage" ──────────────────────────────
     The reference does NOT blur the side cards — instead it fades the
     foreground text into the card surface so the eye reads it as a
     receded, secondary layer that is still legible. We mirror that exact
     mental model here using only:

       1. Subtle scale + translateY  → depth
       2. Text-colour de-emphasis    → foreground hierarchy (NO blur)
       3. Inner-edge gradient mask   → soft "hiding behind active" feel
       4. Lifted shadow on active    → bring active card forward
       5. Long-tail ease-out-expo    → kinematic, professional motion

     The active card stays at full opacity & full text contrast. The
     inactive cards keep their full background (so the surface is still
     present, not dissolved) but their text colour drops to a muted tone
     that visually receeds. Nothing is blurred — everything is readable. */
  position: relative;
  isolation: isolate;
  transform-origin: center center;
  will-change: transform, opacity, box-shadow;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 720ms cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-mask-image 720ms cubic-bezier(0.16, 1, 0.3, 1),
    mask-image 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inner-text colour transitions live on the children so we get
   independent timing for the "ink fade" effect (mirroring the reference
   where the foreground text colour is the primary depth cue). */
.reviews-area1_card__9S5lV .reviews-area1_cardName__ETX-\+,
.reviews-area1_card__9S5lV .reviews-area1_cardText__51ujf {
  transition:
    color 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reviews-area1_card__9S5lV .reviews-area1_avatar__7RMcX,
.reviews-area1_card__9S5lV .reviews-area1_avatarImg__MmuGx {
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Active card — perfectly clear, lifted forward ───────────────────── */
.reviews-area1_cardActive__8HL9n {
  transform: scale(1) translateY(0);
  opacity: 1;
  z-index: 3;
  /* The shadow extends beyond the card edges so the neighbouring cards
     visually sit "behind" it — the same effect the reference design uses
     to imply z-depth without any blur. */
  box-shadow:
    0 32px 60px -28px rgba(0, 0, 0, 0.75),
    0 12px 24px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* ── Adjacent / inactive cards — text fades, card stays solid ────────── */
.reviews-area1_cardAdjacent__C7pKf,
.reviews-area1_cardInactive__n01Ax {
  cursor: pointer;
  /* A small pull-back (3% smaller) + 6 px down-shift gives a believable
     "second plane" without ever cropping the card. */
  transform: scale(0.93) translateY(6px);
  opacity: 0.92;
  z-index: 1;
  /* Soft horizontal mask: the edge that faces the active card fades a
     touch — emulating the reference's "card peeks out from behind" look. */
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.78) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.78) 100%
  );
}
/* TEXT-LEVEL depth: this is the dominant cue.
   Card body text drops from pure white → light grey.
   Card name (orange) drops to a muted ochre.
   Avatar dims slightly so the colour identity reads as "background plane". */
.reviews-area1_cardAdjacent__C7pKf .reviews-area1_cardText__51ujf,
.reviews-area1_cardInactive__n01Ax .reviews-area1_cardText__51ujf {
  color: rgba(255, 255, 255, 0.34);
}
.reviews-area1_cardAdjacent__C7pKf .reviews-area1_cardName__ETX-\+,
.reviews-area1_cardInactive__n01Ax .reviews-area1_cardName__ETX-\+ {
  color: rgba(254, 174, 0, 0.4);
}
.reviews-area1_cardAdjacent__C7pKf .reviews-area1_avatar__7RMcX,
.reviews-area1_cardInactive__n01Ax .reviews-area1_avatar__7RMcX,
.reviews-area1_cardAdjacent__C7pKf .reviews-area1_avatarImg__MmuGx,
.reviews-area1_cardInactive__n01Ax .reviews-area1_avatarImg__MmuGx {
  opacity: 0.45;
  filter: saturate(0.7);
}

/* ── Far cards (≥2 positions away) — same model, pushed deeper. ────── */
.reviews-area1_cardFar__5XOd3 {
  cursor: pointer;
  transform: scale(0.9) translateY(10px);
  opacity: 0.82;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.95) 22%,
    rgba(0, 0, 0, 0.95) 78%,
    rgba(0, 0, 0, 0.55) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.95) 22%,
    rgba(0, 0, 0, 0.95) 78%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
.reviews-area1_cardFar__5XOd3 .reviews-area1_cardText__51ujf { color: rgba(255, 255, 255, 0.22); }
.reviews-area1_cardFar__5XOd3 .reviews-area1_cardName__ETX-\+ { color: rgba(254, 174, 0, 0.28); }
.reviews-area1_cardFar__5XOd3 .reviews-area1_avatar__7RMcX,
.reviews-area1_cardFar__5XOd3 .reviews-area1_avatarImg__MmuGx { opacity: 0.32; filter: saturate(0.55); }

/* Hover lifts a dimmed card halfway toward "active" — readable preview. */
.reviews-area1_cardAdjacent__C7pKf:hover,
.reviews-area1_cardInactive__n01Ax:hover,
.reviews-area1_cardFar__5XOd3:hover {
  transform: scale(0.96) translateY(3px);
  opacity: 1;
}
.reviews-area1_cardAdjacent__C7pKf:hover .reviews-area1_cardText__51ujf,
.reviews-area1_cardInactive__n01Ax:hover .reviews-area1_cardText__51ujf,
.reviews-area1_cardFar__5XOd3:hover .reviews-area1_cardText__51ujf { color: rgba(255, 255, 255, 0.62); }
.reviews-area1_cardAdjacent__C7pKf:hover .reviews-area1_cardName__ETX-\+,
.reviews-area1_cardInactive__n01Ax:hover .reviews-area1_cardName__ETX-\+,
.reviews-area1_cardFar__5XOd3:hover .reviews-area1_cardName__ETX-\+ { color: rgba(254, 174, 0, 0.75); }
.reviews-area1_cardAdjacent__C7pKf:hover .reviews-area1_avatar__7RMcX,
.reviews-area1_cardInactive__n01Ax:hover .reviews-area1_avatar__7RMcX,
.reviews-area1_cardFar__5XOd3:hover .reviews-area1_avatar__7RMcX,
.reviews-area1_cardAdjacent__C7pKf:hover .reviews-area1_avatarImg__MmuGx,
.reviews-area1_cardInactive__n01Ax:hover .reviews-area1_avatarImg__MmuGx,
.reviews-area1_cardFar__5XOd3:hover .reviews-area1_avatarImg__MmuGx { opacity: 0.8; filter: saturate(0.9); }

/* Respect users with reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .reviews-area1_card__9S5lV,
  .reviews-area1_card__9S5lV .reviews-area1_cardName__ETX-\+,
  .reviews-area1_card__9S5lV .reviews-area1_cardText__51ujf,
  .reviews-area1_card__9S5lV .reviews-area1_avatar__7RMcX,
  .reviews-area1_card__9S5lV .reviews-area1_avatarImg__MmuGx {
    transition: none;
  }
}

.reviews-area1_avatarRow__crpwb {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 27px);
  flex-shrink: 0;
}
.reviews-area1_avatar__7RMcX {
  width: clamp(40px, 3.65vw, 70px);
  height: clamp(40px, 3.65vw, 70px);
  border-radius: 50%;
  background-color: var(--color-dimgray-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.reviews-area1_avatarImg__MmuGx {
  width: clamp(40px, 3.65vw, 70px);
  height: clamp(40px, 3.65vw, 70px);
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background-color: var(--color-dimgray-100);
}
.reviews-area1_avatarInitial__5s7AV {
  color: var(--color-orange-100);
  font-size: clamp(16px, 1.4vw, 26px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  font-family: inherit;
  -webkit-user-select: none;
          user-select: none;
}
.reviews-area1_emptyState__gKfqV {
  width: 100%;
  margin-top: var(--ra-slider-top);
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: clamp(14px, 1.04vw, 20px);
  z-index: 2;
  position: relative;
}

.reviews-area1_cardName__ETX-\+ {
  margin: 0;
  font-family: inherit;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1;
  font-weight: 700;
  color: var(--color-orange-100);
  letter-spacing: 0;
}

.reviews-area1_cardText__51ujf {
  margin: 0;
  font-family: inherit;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.146;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0;
}

/* ── Bottom navigation ──────────────────────────────────────────────────── */
.reviews-area1_nav__gXBwP {
  margin-top: clamp(24px, 2.6vw, 50px);
  margin-bottom: clamp(32px, 3.13vw, 60px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.15vw, 22px);
}

.reviews-area1_navBtn__DDSFQ {
  width: clamp(28px, 1.98vw, 38px);
  height: clamp(28px, 1.98vw, 38px);
  border-radius: 50%;
  border: 1.5px solid var(--color-orange-100);
  background: transparent;
  color: var(--color-orange-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.reviews-area1_navBtn__DDSFQ:hover:not(:disabled) {
  background-color: var(--color-orange-100);
  color: #000;
}
.reviews-area1_navBtn__DDSFQ:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reviews-area1_dots__h8ab6 {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.73vw, 14px);
}
.reviews-area1_dot__7VIOQ {
  width: clamp(4px, 0.31vw, 6px);
  height: clamp(4px, 0.31vw, 6px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.reviews-area1_dot__7VIOQ:hover { background-color: rgba(255, 255, 255, 0.8); }
.reviews-area1_dotActive__8Zuim {
  width: clamp(10px, 0.73vw, 14px);
  height: clamp(10px, 0.73vw, 14px);
  background-color: var(--color-orange-100);
}

/* ── Tablet (≤1024 px) — collapse to single column ───────────────────────── */
@media (max-width: 1024px) {
  .reviews-area1_reviewsArea__o0aHv {
    /* on tablet/mobile the track fills the available width minus padding */
    --ra-track: min(640px, 100%);
    --ra-card-h: calc(var(--ra-card-w) * 1.05);
  }
  .reviews-area1_layout__44Eze {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 40px);
  }
  .reviews-area1_leftColumn__pzJSA {
    padding-top: 0;
    padding-bottom: clamp(16px, 3vw, 30px);
    width: 100%;
  }
  .reviews-area1_whatCustomersSay__bQtGW {
    font-size: clamp(34px, 6vw, 56px);
    max-width: 100%;
  }
  .reviews-area1_fontistoarrowUpIcon__1mNYR { display: none; }

  .reviews-area1_rightColumn__GRIcx { width: 100%; }
}

/* ── Mobile (≤640 px) — Compact layout, single card visible per slide ──── */
@media (max-width: 640px) {
  .reviews-area1_reviewsArea__o0aHv {
    --ra-track: 100%;
    --ra-gap: 12px;
    /* On mobile card width = full track width (single card visible) */
    --ra-card-w: 100%;
    --ra-card-h: auto;
    --ra-block-h: 220px;
    --ra-num-size: 145px;
    --ra-num-lh: 145px;
    --ra-sat-top: 50px;
    --ra-sat-right: 16px;
    --ra-slider-top: 110px;
  }
  .reviews-area1_whatCustomersSay__bQtGW {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
  }
  .reviews-area1_satisfiedLabel__YKHUT { font-size: clamp(13px, 3.6vw, 18px); }
  .reviews-area1_card__9S5lV {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 12px);
    min-height: auto;
    padding: 28px 20px 36px;
    gap: 20px;
  }
  .reviews-area1_cardName__ETX-\+ { font-size: 18px; }
  .reviews-area1_cardText__51ujf { font-size: 16px; line-height: 1.35; }
  .reviews-area1_nav__gXBwP { justify-content: center; }
}

/* ── Ultra-wide (≥2400 px) — cap on desktop scaling ──────────────────────── */
@media (min-width: 2400px) {
  .reviews-area1_reviewsArea__o0aHv {
    --ra-track: 1179px;
  }
}

/* ────────── Bulgarian (BG) adaptive overrides ──────────
   Bracketed subtitle: "Доволни клиенти / са наш приоритет" ≈
   "Satisfied clients / are our priority" — fits naturally, keep proportions.
*/
html[lang="bg"] .reviews-area1_satisfiedYellow__CWosc,
html[lang="bg"] .reviews-area1_satisfiedWhite__5aYXI {
  letter-spacing: -0.005em;
}

.frame-component26_frameChild__V9v6V,
.frame-component26_rectangleParent__Lk\+9i {
  background-color: var(--color-black);
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component26_rectangleParent__Lk\+9i {
  margin-left: -3.1px;
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 176.4px 140px 178.1px 401px;
  box-sizing: border-box;
  gap: 139.8px;
  z-index: 4;
  text-align: left;
  font-size: var(--fs-64);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.frame-component26_frameChild__V9v6V {
  width: var(--width-1920);
  height: 1415.9px;
  position: relative;
  display: none;
}
.frame-component26_lessPayContainer__84kNN {
  width: 1154px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Reduced horizontal padding so "WHY YOU PAY LESS" fits on one line at
     the 64 px H Bold size (Figma: 2-line block — line 1 "WHY YOU PAY
     LESS", line 2 "— AND GET MORE"). */
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component26_whyYouPayContainer__EpuFh {
  margin: 0;
  height: auto;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  /* H Bold per Figma spec — 64 px / weight 700 */
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
  white-space: nowrap;
}
.frame-component26_andGetMore__pGoG6 {
  color: var(--color-white);
}
.frame-component26_paylessReasons__Y0ZQI {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 74.8px;
  max-width: 100%;
  flex-shrink: 0;
  font-size: 204.1px;
  color: var(--color-gray-200);
}
.frame-component26_advantages__xtlql {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  z-index: 2;
}
.frame-component26_vehicleAdvantage__D5qWh {
  width: 1333.2px;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  max-width: 100%;
  font-size: 359.9px;
  color: var(--color-white);
}
.frame-component26_car__EbVio {
  width: 772px;
  position: absolute;
  margin: 0 !important;
  top: 479px;
  left: -272px;
  line-height: 100%;
  text-transform: uppercase;
  display: inline-block;
  /* H Bold 359.94 px per Figma spec. */
  font-weight: 700;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  z-index: 1;
  flex-shrink: 0;
}
.frame-component26_trimContainer__Pfcku {
  flex: 1 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-component26_contentAdvantage__P34fv {
  width: 1209.1px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.1px;
  max-width: 100%;
}
.frame-component26_infoContainer__KHEnH {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-32);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component26_detailAdvantage__-qriG,
.frame-component26_titleAdvantage__xl1rJ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.frame-component26_detailAdvantage__-qriG {
  width: var(--width-348);
  gap: 209.9px;
  max-width: 100%;
}
.frame-component26_titleAdvantage__xl1rJ {
  align-self: stretch;
  gap: var(--gap-33);
}
.frame-component26_advantageFeatures__vHtub {
  width: auto;
  min-width: 271px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-6);
  box-sizing: border-box;
}
.frame-component26_largeSelection__dSC4h,
.frame-component26_moreTrimLevels__Bizf8 {
  margin: 0;
  position: relative;
  font-weight: 400;
  font-family: inherit;
  z-index: 1;
}
.frame-component26_largeSelection__dSC4h {
  flex: 1 1;
  font-size: inherit;
  line-height: 100%;
  /* H Bold 32 px per Figma — keep on a single line. */
  font-weight: 700;
  white-space: nowrap;
}
.frame-component26_moreTrimLevels__Bizf8 {
  font-size: var(--fs-24);
}
.frame-component26_cheaperAdvantage__zYxmZ,
.frame-component26_trimFeatures__n-xZA {
  display: flex;
  align-items: flex-start;
}
.frame-component26_trimFeatures__n-xZA {
  width: auto;
  min-width: 293px;
  padding: var(--padding-0) var(--padding-6);
  box-sizing: border-box;
}
.frame-component26_cheaperAdvantage__zYxmZ {
  gap: var(--gap-36);
  max-width: 100%;
}
.frame-component26_image79Icon__Ec39U {
  flex: 0 1 391px;
  width: 391px;
  height: 391px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  min-width: 254px;
  flex-shrink: 0;
  z-index: 1;
}
.frame-component26_descriptionContainer__X6URR {
  width: var(--width-348);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 125.9px;
  flex-shrink: 0;
  max-width: 100%;
}
.frame-component26_evenTakingInto__3q1Pf,
.frame-component26_muchCheaper__4XeLJ,
.frame-component26_transparentHistory__OIFaa {
  margin: 0;
  position: relative;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component26_evenTakingInto__3q1Pf {
  font-size: var(--fs-24);
  line-height: var(--lh-27_5);
  min-height: 140px;
  /* H Regular 24 px per Figma. */
  font-weight: 400;
}
.frame-component26_muchCheaper__4XeLJ {
  width: auto;
  min-width: 244px;
  font-size: inherit;
  line-height: 100%;
  /* H Bold 32 px per Figma — single line. */
  font-weight: 700;
  white-space: nowrap;
}
.frame-component26_transparentHistory__OIFaa {
  width: auto;
  min-width: 318px;
  font-size: inherit;
  line-height: 100%;
  /* H Bold 32 px per Figma — single line. */
  font-weight: 700;
  white-space: nowrap;
}
.frame-component26_multimediaFeatures__wZS8g {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.frame-component26_moreOptionsBetterMultimedia__OvPEo {
  margin: 0;
  width: 267px;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
.frame-component26_vINTool__Eqs0g {
  width: var(--width-348);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-component26_vinChecksCarfax__OC4KG {
  margin: 0;
  align-self: stretch;
  position: relative;
  /* Now nested inside .titleAdvantage → inherit would give 32 px from
     .infoContainer. Lock to 24 px H Regular per Figma so the "VIN checks
     (Carfax, AutoCheck)" body styles identically to "Even taking into
     account…" under the Much cheaper title. */
  font-size: var(--fs-24);
  line-height: var(--lh-27_5);
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
}
@media screen and (max-width: 1850px) {
  .frame-component26_infoContainer__KHEnH {
    flex-wrap: wrap;
  }
  .frame-component26_cheaperAdvantage__zYxmZ,
  .frame-component26_detailAdvantage__-qriG {
    flex: 1 1;
  }
}
@media screen and (max-width: 1350px) {
  .frame-component26_rectangleParent__Lk\+9i {
    gap: 70px;
    padding: 115px 70px 116px 200px;
    box-sizing: border-box;
  }
  .frame-component26_lessPayContainer__84kNN {
    padding-left: var(--padding-136);
    padding-right: var(--padding-136);
    box-sizing: border-box;
  }
  .frame-component26_cheaperAdvantage__zYxmZ,
  .frame-component26_descriptionContainer__X6URR,
  .frame-component26_detailAdvantage__-qriG {
    min-width: 100%;
  }
}
@media screen and (max-width: 925px) {
  .frame-component26_rectangleParent__Lk\+9i {
    gap: 35px;
    padding: var(--padding-75) 35px var(--padding-75) var(--padding-100);
    box-sizing: border-box;
  }
  .frame-component26_lessPayContainer__84kNN {
    padding-left: var(--padding-68);
    padding-right: var(--padding-68);
    box-sizing: border-box;
  }
  .frame-component26_whyYouPayContainer__EpuFh {
    font-size: var(--fs-51);
    line-height: var(--lh-51);
  }
  .frame-component26_paylessReasons__Y0ZQI {
    gap: var(--gap-37);
  }
  .frame-component26_advantages__xtlql {
    font-size: 82px;
    line-height: 122px;
  }
  .frame-component26_car__EbVio {
    font-size: 144px;
    line-height: 216px;
  }
  .frame-component26_largeSelection__dSC4h {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .frame-component26_cheaperAdvantage__zYxmZ {
    flex-wrap: wrap;
  }
  .frame-component26_descriptionContainer__X6URR {
    flex: 1 1;
  }
  .frame-component26_muchCheaper__4XeLJ,
  .frame-component26_transparentHistory__OIFaa {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .frame-component26_multimediaFeatures__wZS8g {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .frame-component26_lessPayContainer__84kNN {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .frame-component26_whyYouPayContainer__EpuFh {
    font-size: var(--fs-38);
    line-height: var(--lh-38);
  }
  .frame-component26_paylessReasons__Y0ZQI {
    gap: var(--gap-19);
  }
  .frame-component26_advantages__xtlql {
    font-size: var(--fs-51);
    line-height: 82px;
  }
  .frame-component26_car__EbVio {
    font-size: 90px;
    line-height: 144px;
  }
  .frame-component26_detailAdvantage__-qriG {
    gap: 105px;
  }
  .frame-component26_titleAdvantage__xl1rJ {
    gap: var(--gap-16);
  }
  .frame-component26_largeSelection__dSC4h {
    line-height: var(--lh-19);
  }
  .frame-component26_largeSelection__dSC4h,
  .frame-component26_moreTrimLevels__Bizf8 {
    font-size: var(--fs-19);
  }
  .frame-component26_cheaperAdvantage__zYxmZ {
    gap: var(--gap-18);
  }
  .frame-component26_descriptionContainer__X6URR {
    gap: 63px;
  }
  .frame-component26_muchCheaper__4XeLJ {
    line-height: var(--lh-19);
  }
  .frame-component26_evenTakingInto__3q1Pf,
  .frame-component26_muchCheaper__4XeLJ {
    font-size: var(--fs-19);
  }
  .frame-component26_transparentHistory__OIFaa {
    line-height: var(--lh-19);
  }
  .frame-component26_moreOptionsBetterMultimedia__OvPEo,
  .frame-component26_transparentHistory__OIFaa,
  .frame-component26_vinChecksCarfax__OC4KG {
    font-size: var(--fs-19);
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Bulgarian (BG) adaptive overrides
   ----------------------------------------------------------------------
   Problem:
     • "CAR" (EN, 3 chars) → "АВТОМОБИЛ" (BG, 9 chars) — rotated -90°,
       at 359.94px the BG word overflows the vertical box (was ~1780px
       tall vs the 772px the design allocates).
     • "ADVANTAGES" (EN, 10 chars) → "ПРЕДИМСТВА" (BG, 10 chars but
       cyrillic glyphs are wider) — at 204.1px the BG word renders at
       ~1487px wide vs the 1379px container, so it bleeds into the
       right-side feature column.
   Solution:
     EN baseline is preserved verbatim. For BG we shrink font-size +
     apply a tight negative letter-spacing so the glyphs fit into the
     SAME geometry boxes as the EN version.
   Geometry targets (≈ same visual footprint as EN):
     .car         : visual length after rotation ≤ 772px  → font 130px
     .advantages  : text width ≤ 1379px (container)       → font 184px
   ──────────────────────────────────────────────────────────────────── */
html[lang="bg"] .frame-component26_car__EbVio {
  font-size: 130px;
  letter-spacing: -1.5px;
}
html[lang="bg"] .frame-component26_advantages__xtlql {
  font-size: 184px;
  letter-spacing: -3px;
}
/* Inner feature titles ("/ Голям избор", "/ Много по-евтино",
   "/ По-добри комплектации", "/ Прозрачна история") — cyrillic copy is
   ~10% wider than english, and the cell width is fixed at 348/293 px.
   Drop the BG H2 from 32 → 27 px so each title still fits on one line. */
html[lang="bg"] .frame-component26_largeSelection__dSC4h,
html[lang="bg"] .frame-component26_muchCheaper__4XeLJ,
html[lang="bg"] .frame-component26_transparentHistory__OIFaa {
  font-size: 27px;
}
/* Body description under the first feature ("Повече комплектации,
   цветове, редки модели") is slightly wider than its 348px column
   at H Regular 24 — drop it to 22 in BG. */
html[lang="bg"] .frame-component26_moreTrimLevels__Bizf8,
html[lang="bg"] .frame-component26_evenTakingInto__3q1Pf,
html[lang="bg"] .frame-component26_moreOptionsBetterMultimedia__OvPEo,
html[lang="bg"] .frame-component26_vinChecksCarfax__OC4KG {
  font-size: 22px;
}

@media screen and (max-width: 1350px) {
  html[lang="bg"] .frame-component26_car__EbVio {
    font-size: 108px;
  }
  html[lang="bg"] .frame-component26_advantages__xtlql {
    font-size: 158px;
  }
}

@media screen and (max-width: 925px) {
  html[lang="bg"] .frame-component26_car__EbVio {
    font-size: 52px;
    line-height: 78px;
  }
  html[lang="bg"] .frame-component26_advantages__xtlql {
    font-size: 66px;
    line-height: 100px;
  }
}

@media screen and (max-width: 450px) {
  html[lang="bg"] .frame-component26_car__EbVio {
    font-size: 32px;
    line-height: 50px;
  }
  html[lang="bg"] .frame-component26_advantages__xtlql {
    font-size: 42px;
    line-height: 70px;
  }
}

/* ============================================================================
 * "Want to drive your dream car?" — Hero CTA block
 *
 * Figma spec (audited from layout panel):
 *   Section:     1921 × 1041 px (full-bleed at 1920 design width)
 *   Background:  /figma/dream-car-bg.png  (object-fit: cover)
 *   Logo:        264 × 90 px,  top-left overlay  (offset ≈ 100 px from edges)
 *   Heading:     H Bold 100 px,  line-height ~100 px,  uppercase
 *                  line 1 = "WANT TO DRIVE"   color #FEAE00
 *                  line 2 = "YOUR DREAM CAR?" color #FFFFFF
 *   Sub-copy:    H Bold 32 px,  line-height ~36 px,  white,  3 lines
 *   Button:      width 380 px,  height 60 px,  bg #FEAE00,
 *                label "CONTACT US",  H Medium 14 px,  black,  uppercase
 *
 * Layout uses a single absolutely-positioned section with the image as a
 * CSS background and the content overlaid via flexbox.
 * ========================================================================== */

.frame-component27_heroSection__NZmYb {
  position: relative;
  align-self: stretch;
  width: 100%;
  /* Lock to the Figma 1921 × 1041 aspect at the design viewport.
     Below that the section scales via the figmaScaler transform wrapper.
     The background image is set inline from JSX (CSS modules can't
     resolve /public absolute URLs through postcss-loader). */
  height: 1041px;
  margin-left: -3.6px;
  background-color: var(--color-black);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 5;
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  box-sizing: border-box;
  padding: 100px 100px 90px 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top-left BIBI logo overlay */
.frame-component27_logo__eFM1L {
  width: 264px;
  height: 90px;
  display: block;
  align-self: flex-start;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Bottom row holds the heading on the left and the form column on the right.
   Flex with space-between keeps them anchored to opposite edges. */
.frame-component27_bottomRow__GrOzL {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  z-index: 2;
}

/* ── Heading "WANT TO DRIVE / YOUR DREAM CAR?" ─────────────────────────── */
.frame-component27_heading__fdcl1 {
  margin: 0;
  font-family: inherit;
  /* Figma: 100 px H Bold, line-height ~100 % */
  font-size: 100px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: left;
  /* Stacks the two lines tightly. */
  display: block;
  max-width: 100%;
}
.frame-component27_headingOrange__pePlq {
  color: var(--color-orange-100); /* #FEAE00 */
}
.frame-component27_headingWhite__hN7TK {
  color: var(--color-white);
}

/* ── Right-side form column ──────────────────────────────────────────────── */
.frame-component27_formColumn__iPgHG {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  flex-shrink: 0;
  width: 380px;
}

.frame-component27_subcopy__Do7XC {
  margin: 0;
  font-family: inherit;
  /* Figma: H Bold 32 px white */
  font-size: 32px;
  line-height: 1.125;        /* 36 / 32 — comfortable 3-line block */
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

/* ── Responsive scaling ──────────────────────────────────────────────────── */
@media screen and (max-width: 1350px) {
  .frame-component27_heroSection__NZmYb {
    height: auto;
    min-height: 720px;
    padding: 60px 60px 60px 60px;
  }
  .frame-component27_heading__fdcl1 {
    font-size: 80px;
  }
  .frame-component27_subcopy__Do7XC {
    font-size: 26px;
    line-height: 1.2;
  }
  .frame-component27_formColumn__iPgHG {
    width: 320px;
    gap: 40px;
  }
}

@media screen and (max-width: 925px) {
  .frame-component27_heroSection__NZmYb {
    min-height: 600px;
    padding: 40px 32px 40px 32px;
  }
  .frame-component27_heading__fdcl1 {
    font-size: 56px;
  }
  .frame-component27_bottomRow__GrOzL {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .frame-component27_formColumn__iPgHG {
    width: 100%;
    max-width: 380px;
  }
  .frame-component27_subcopy__Do7XC {
    font-size: 22px;
  }
  .frame-component27_logo__eFM1L {
    width: 180px;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .frame-component27_heroSection__NZmYb {
    min-height: 520px;
    padding: 24px 20px;
  }
  .frame-component27_heading__fdcl1 {
    font-size: 40px;
  }
  .frame-component27_subcopy__Do7XC {
    font-size: 18px;
  }
  .frame-component27_logo__eFM1L {
    width: 140px;
  }
}

/* ============================================================================
 * FAQ Section — last block before footer.
 *
 * Figma spec:
 *   • Section: full-bleed, black bg, padded 250 px top / 100 px bottom.
 *   • Title "FAQ": H Bold 64 px, orange, centered.
 *   • Question row: H Medium 24 px, orange, with "1/ " prefix on left and
 *     "+" / "−" toggle on right.
 *   • Below each row: 1 px separator (rgba(254,174,0,0.25)).
 *   • Answer (when open): H Medium 14 px, orange, with optional <ol> list.
 *   • Behaviour: single-open accordion, first row open on initial render.
 * ========================================================================== */

.frame-component28_rectangleParent__hm8Lq {
  align-self: stretch;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200px 357px 140px 357px;
  box-sizing: border-box;
  gap: 110px;
  z-index: 6;
  text-align: left;
  font-family: var(--font-mazzard);
  color: var(--color-orange-100);
  max-width: 100%;
}

/* ── Title ────────────────────────────────────────────────────────────── */
.frame-component28_faqContent__irIXz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

.frame-component28_faq__\+eLaB {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-orange-100);
  text-align: center;
}

/* ── Items list ───────────────────────────────────────────────────────── */
.frame-component28_faqItems__b8fBl {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.frame-component28_faqItem__KmXAz {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}

.frame-component28_faqItemOpen__nNmSL {
  /* Slightly larger gap when expanded so the answer breathes. */
  gap: 22px;
}

/* ── Question row (clickable button) ──────────────────────────────────── */
.frame-component28_questionContainer__j9QlB {
  /* Reset native button look */
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  padding: 14px 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: opacity 0.2s ease;
}

.frame-component28_questionContainer__j9QlB:hover {
  opacity: 0.85;
}

.frame-component28_questionContainer__j9QlB:focus-visible {
  outline: 2px solid var(--color-orange-100);
  outline-offset: 4px;
  border-radius: 4px;
}

.frame-component28_questionText__eJkNO {
  margin: 0;
  font-size: 24px;
  font-weight: 500;          /* H Medium per Figma */
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-orange-100);
  flex: 1 1 auto;
  text-align: left;
}

.frame-component28_toggleIcon__podxw {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-orange-100);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
          user-select: none;
  transition: transform 0.25s ease;
}
.frame-component28_toggleIconOpen__1yC0d {
  /* "−" already implied by content swap; subtle scale-in for delight. */
  transform: scale(1.05);
}

/* ── Answer (expanded) ────────────────────────────────────────────────── */
.frame-component28_answer__v0Iyd {
  font-size: 14px;
  font-weight: 500;          /* H Medium */
  line-height: 1.6;
  color: var(--color-gray-100); /* #949494 — matches Figma reveal copy */
  padding: 4px 0 14px 0;
  max-width: 1100px;
}

/* ── Yellow 1 px divider shown ONLY when an item is expanded ──────────
   Sits between the question button and the answer body. Renders the
   orange accent line that the Figma design shows under each open FAQ
   title — the visual cue that separates the question from the answer. */
.frame-component28_openDivider__igovy {
  width: 100%;
  height: 1px;
  background-color: var(--color-orange-100); /* #FEAE00 */
  margin: 0;
  border: none;
  flex-shrink: 0;
}

/* Rich-text content from the admin Quill editor */
.frame-component28_answer__v0Iyd p {
  margin: 0 0 10px 0;
}
.frame-component28_answer__v0Iyd p:last-child {
  margin-bottom: 0;
}
.frame-component28_answer__v0Iyd ol,
.frame-component28_answer__v0Iyd ul {
  margin: 8px 0 0 0;
  padding: 0 0 0 20px;
}
.frame-component28_answer__v0Iyd ol { list-style: decimal; }
.frame-component28_answer__v0Iyd ul { list-style: disc; }
.frame-component28_answer__v0Iyd li {
  margin: 4px 0;
  line-height: 1.6;
}
.frame-component28_answer__v0Iyd strong,
.frame-component28_answer__v0Iyd b {
  color: var(--color-orange-100);
  font-weight: 600;
}
.frame-component28_answer__v0Iyd em,
.frame-component28_answer__v0Iyd i {
  font-style: italic;
}
.frame-component28_answer__v0Iyd a {
  color: var(--color-orange-100);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.frame-component28_answer__v0Iyd a:hover {
  filter: brightness(1.1);
}
.frame-component28_answer__v0Iyd h1,
.frame-component28_answer__v0Iyd h2,
.frame-component28_answer__v0Iyd h3,
.frame-component28_answer__v0Iyd h4 {
  margin: 12px 0 8px 0;
  color: var(--color-orange-100);
  font-weight: 700;
  line-height: 1.25;
}
.frame-component28_answer__v0Iyd h1 { font-size: 22px; }
.frame-component28_answer__v0Iyd h2 { font-size: 20px; }
.frame-component28_answer__v0Iyd h3 { font-size: 18px; }
.frame-component28_answer__v0Iyd h4 { font-size: 16px; }

.frame-component28_answerList__jXmi- {
  margin: 8px 0 0 0;
  padding: 0 0 0 20px;
  list-style: decimal;
}

.frame-component28_answerList__jXmi- li {
  margin: 4px 0;
  line-height: 1.6;
}

/* ── Separator ────────────────────────────────────────────────────────── */
.frame-component28_separator__hLH0q {
  width: 100%;
  height: 1px;
  background-color: rgba(254, 174, 0, 0.25);
  flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 1350px) {
  .frame-component28_rectangleParent__hm8Lq {
    padding: 160px 180px 100px 180px;
    gap: 80px;
  }
  .frame-component28_faqItems__b8fBl {
    gap: 24px;
  }
}

@media screen and (max-width: 925px) {
  .frame-component28_rectangleParent__hm8Lq {
    padding: 100px 60px 80px 60px;
    gap: 60px;
  }
  .frame-component28_faq__\+eLaB {
    font-size: 51px;
  }
  .frame-component28_questionText__eJkNO {
    font-size: 20px;
  }
  .frame-component28_questionContainer__j9QlB {
    gap: 16px;
  }
  .frame-component28_toggleIcon__podxw {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .frame-component28_rectangleParent__hm8Lq {
    padding: 60px 20px 60px 20px;
    gap: 36px;
  }
  .frame-component28_faq__\+eLaB {
    font-size: 38px;
  }
  .frame-component28_questionText__eJkNO {
    font-size: 17px;
  }
  .frame-component28_answer__v0Iyd {
    font-size: 13px;
  }
}

.homepage1_homepage__kL0K4 {
  width: 100%;
  position: relative;
  background-color: var(--color-gray-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  line-height: normal;
  letter-spacing: normal;
}
.homepage1_image57Icon__wyMXD {
  /* The aerial-road background was previously positioned absolutely on
     the homepage. It is now baked into TurnkeyBanner1 (the consolidated
     "How to buy a turnkey car" block), so we hide it here to avoid
     duplicate rendering. */
  display: none;
}
.homepage1_image57__Yec6I,
.homepage1_unsplashwl8dyDm7x8Icon__XBKWE {
  position: relative;
  display: none;
  flex-shrink: 0;
}
.homepage1_image57__Yec6I {
  align-self: stretch;
  height: 1201.6px;
  z-index: 1;
}
.homepage1_unsplashwl8dyDm7x8Icon__XBKWE {
  width: 1494.7px;
  max-height: 100%;
  object-fit: contain;
  max-width: 100%;
  z-index: 2;
}
.homepage1_catalogAction__k\+7gI {
  align-self: stretch;
  justify-content: center;
  /* Per Figma: gray top zone has 472px total height, with text positioned at ~2/3 from top.
     Top padding 232px, bottom padding 134px → text sits closer to the brands card below. */
  padding: 232px var(--padding-20) 134px;
  box-sizing: border-box;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--fs-60);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
  /* Same gray background as the BrandLogos block below — they form one continuous zone */
  background-color: var(--color-gray-200);
}
.homepage1_carSearch__J4BJa,
.homepage1_catalogAction__k\+7gI,
.homepage1_searchCopy__S7IMA {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.homepage1_carSearch__J4BJa {
  width: auto;
  max-width: 1100px;
  flex-direction: column;
  gap: 13px;
  align-items: center;
}
.homepage1_searchCopy__S7IMA {
  align-self: center;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
}
.homepage1_fromAmericaAnd__eSF9u,
.homepage1_searchForCars__u5Wnx {
  margin: 0;
  position: relative;
  line-height: 100%;
  text-transform: uppercase;
  font-family: inherit;
  white-space: nowrap;
}
.homepage1_searchForCars__u5Wnx {
  font-size: inherit;
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  /* Per spec: Mazzard H Bold */
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 700;
}
.homepage1_fromAmericaAnd__eSF9u {
  align-self: center;
  font-size: var(--fs-50);
  color: var(--color-white);
  white-space: nowrap;
  /* Per spec: Mazzard H Bold */
  font-family: 'Mazzard H', 'Mazzard', system-ui, sans-serif;
  font-weight: 700;
}
.homepage1_frameChild__Iudzl,
.homepage1_rectangleParent__vl3ZF {
  background-color: var(--color-black);
  max-width: 100%;
  flex-shrink: 0;
}
.homepage1_rectangleParent__vl3ZF {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 155px 98px 173px;
  box-sizing: border-box;
  gap: 74px;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.homepage1_frameChild__Iudzl {
  width: 1919.5px;
  height: 2541.9px;
  position: relative;
  display: none;
}
.homepage1_moreVehicles__700IR {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 790px var(--padding-0) 788px;
  flex-shrink: 0;
}
.homepage1_moreVehicles2__uKZKI {
  position: relative;
  text-decoration: underline;
  line-height: 99.9%;
  text-transform: uppercase;
  z-index: 1;
}
.homepage1_lineiconsaudi__\+r6uA {
  width: 123px;
  max-height: 100%;
  z-index: 11;
}
.homepage1_homepageChild__k0eRq,
.homepage1_lineiconsaudi__\+r6uA,
.homepage1_lineiconsaudi2__Ogm6u {
  position: relative;
  display: none;
  flex-shrink: 0;
}
.homepage1_lineiconsaudi2__Ogm6u {
  width: 123px;
  max-height: 100%;
  z-index: 12;
}
.homepage1_homepageChild__k0eRq {
  align-self: stretch;
  height: -1205.6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), var(--color-black));
  z-index: 15;
}
.homepage1_serviceVisualsParent__Ir7i0 {
  align-self: stretch;
  background-color: var(--color-black);
  overflow: hidden;
  flex-direction: column;
  padding: 148px var(--padding-0) 119.7px 101px;
  box-sizing: border-box;
  gap: 12px;
  flex-shrink: 0;
}
.homepage1_beforeAndAfterWrapper__f46Lr,
.homepage1_serviceVisuals__dtC1O,
.homepage1_serviceVisualsParent__Ir7i0 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.homepage1_serviceVisuals__dtC1O {
  width: 1193px;
  flex-direction: column;
  padding: var(--padding-0) var(--padding-20) 82px var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-60);
  text-align: left;
  font-size: var(--fs-64);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.homepage1_beforeAndAfterWrapper__f46Lr {
  align-self: stretch;
  justify-content: flex-end;
}
.homepage1_beforeAndAfter__Q3GDX {
  margin: 0;
  width: 629px;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-height: var(--min-h-76);
  max-width: 100%;
}
.homepage1_serviceDiagram__VrHdc {
  width: 429px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8.2px;
  max-width: 100%;
  font-size: var(--fs-24);
}
.homepage1_serviceDiagramInner__qYJSy {
  width: var(--width-78);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.9px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.homepage1_vectorWrapper__W1pT2 {
  align-self: stretch;
  height: var(--height-70);
  position: relative;
}
.homepage1_vectorIcon__N3E8H {
  position: absolute;
  top: calc(50% - 37.9px);
  left: calc(50% - 39px);
  width: 100%;
  height: var(--height-76);
  flex-shrink: 0;
}
.homepage1_ourClientsReceiveTheBestSParent__nhsZg {
  height: var(--height-70);
  flex: 1 1;
  position: relative;
  min-width: 223px;
  max-width: 100%;
}
.homepage1_ourClientsReceiveContainer__QVvP0 {
  margin: 0;
  position: absolute;
  top: 10.5px;
  left: 0;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
}
.homepage1_theBestService__i2-TD {
  color: var(--color-white);
}
.homepage1_vectorContainer__LzKbr {
  position: absolute;
  top: 70px;
  left: 342.8px;
  width: var(--width-78);
  height: var(--height-70);
  transform: rotate(180deg);
  transform-origin: 0 0;
  z-index: 1;
}
.homepage1_vectorIcon2__XQxrG {
  position: absolute;
  top: calc(50% - 37.9px);
  left: calc(50% - 39px);
  width: 100%;
  height: var(--height-76);
  transform: rotate(-180deg);
  flex-shrink: 0;
}
.homepage1_navigation__Mh1rD {
  width: 1717.5px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 170.2px;
  box-sizing: border-box;
  max-width: 100%;
}
.homepage1_carouselControls__M1dQ3 {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-11);
}
.homepage1_navigationControls__y2Bzg {
  height: var(--height-32);
  width: var(--width-32);
  position: relative;
}
.homepage1_navigationControlsChild__2ubdV {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-50);
  border: 0 solid var(--color-orange-100);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.homepage1_lsiconleftFilled__Gmk77 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: var(--width-16);
  height: var(--height-16);
  z-index: 1;
}
.homepage1_controls__7jazy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 12.8px;
}
.homepage1_ellipseParent__yPmnU {
  align-self: stretch;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: var(--gap-16);
}
.homepage1_frameInner__jyCV4,
.homepage1_frameItem__hz5w\+ {
  height: var(--height-6_3);
  width: var(--width-6_3);
  position: relative;
  border-radius: var(--br-50);
  background-color: var(--color-orange-100);
}
.homepage1_frameInner__jyCV4 {
  background-color: var(--color-gray-200);
}
.homepage1_navigationControlsItem__XOTzZ {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-50);
  background-color: var(--color-orange-100);
  width: 100%;
  height: 100%;
}
.homepage1_lsiconleftFilled2__a74XF {
  position: absolute;
  top: 8px;
  left: 8px;
  width: var(--width-16);
  height: var(--height-16);
  object-fit: contain;
  z-index: 1;
}
.homepage1_reviewsContainer__6n2Q1,
.homepage1_reviewsContainerWrapper__2aXCB {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.homepage1_reviewsContainerWrapper__2aXCB {
  width: 1127.5px;
  padding: var(--padding-0) var(--padding-6) 0;
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-64);
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.homepage1_reviewsContainer__6n2Q1 {
  flex: 1 1;
  flex-direction: column;
  gap: 78.2px;
}
.homepage1_testimonialsHeader__2Egtc {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.homepage1_ourClientsSay__zpWPW {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  min-height: var(--min-h-76);
}
.homepage1_clientReviews__8lvW4 {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: 41px;
  max-width: 100%;
  font-size: var(--fs-24);
  color: var(--color-white);
}
.homepage1_image34Icon__lfRSe {
  width: 259px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.homepage1_reviewContent__Gshae {
  flex-direction: column;
  padding: var(--padding-17) var(--padding-0) var(--padding-0);
}
.homepage1_reviewContent__Gshae,
.homepage1_reviewDetails__IaFEW,
.homepage1_reviewInfo__ydFLQ {
  display: flex;
  align-items: flex-start;
}
.homepage1_reviewInfo__ydFLQ {
  flex-direction: column;
  gap: var(--gap-6);
}
.homepage1_reviewDetails__IaFEW {
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-1);
}
.homepage1_parent__gPTZ1 {
  align-self: stretch;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-15);
}
.homepage1_h3__0mtfU {
  margin: 0;
  width: var(--width-36);
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
}
.homepage1_rating__FBvNT {
  display: flex;
  align-items: center;
}
.homepage1_materialSymbolsstarIcon__gMiNc {
  width: var(--width-24);
  position: relative;
  max-height: 100%;
}
.homepage1_googleReviews__2urwa {
  width: 139px;
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: 'Mazzard', 'Mazzard H', system-ui, sans-serif;
  text-decoration: underline;
  display: inline-block;
}
.homepage1_controlsContainer__dLIOT {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) 53px;
}
.homepage1_reviewCarousels__jnNxd {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-11);
}
.homepage1_reviewCarouselsInner__SXTVf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12.8px var(--padding-0) var(--padding-0);
}
@media screen and (max-width: 1350px) {
  .homepage1_rectangleParent__vl3ZF {
    gap: var(--gap-37);
    padding: var(--padding-66) var(--padding-49) 73px;
    box-sizing: border-box;
  }
  .homepage1_moreVehicles__700IR {
    padding-left: 394px;
    padding-right: 395px;
    box-sizing: border-box;
  }
  .homepage1_serviceVisualsParent__Ir7i0 {
    padding-left: var(--padding-50);
    padding-top: 62px;
    padding-bottom: 51px;
    box-sizing: border-box;
  }
  .homepage1_serviceVisuals__dtC1O {
    gap: var(--gap-30);
  }
  .homepage1_reviewsContainer__6n2Q1 {
    gap: 39px;
  }
}
@media screen and (max-width: 925px) {
  .homepage1_searchCopy__S7IMA {
    padding-left: var(--padding-33);
    padding-right: var(--padding-33);
    box-sizing: border-box;
  }
  .homepage1_searchForCars__u5Wnx {
    font-size: var(--fs-48);
    line-height: var(--lh-48);
  }
  .homepage1_fromAmericaAnd__eSF9u {
    font-size: var(--fs-40);
    line-height: var(--lh-40);
  }
  .homepage1_rectangleParent__vl3ZF {
    gap: var(--gap-18);
    padding: 43px var(--padding-24) var(--padding-47);
    box-sizing: border-box;
  }
  .homepage1_moreVehicles__700IR {
    padding-left: 197px;
    padding-right: 197px;
    box-sizing: border-box;
  }
  .homepage1_serviceVisualsParent__Ir7i0 {
    gap: 29px;
    padding-left: var(--padding-25);
    padding-top: var(--padding-40);
    padding-bottom: var(--padding-33);
    box-sizing: border-box;
  }
  .homepage1_beforeAndAfter__Q3GDX {
    font-size: var(--fs-51);
    line-height: var(--lh-51);
  }
  .homepage1_reviewsContainer__6n2Q1 {
    gap: var(--gap-20);
  }
  .homepage1_ourClientsSay__zpWPW {
    font-size: var(--fs-51);
    line-height: var(--lh-51);
  }
  .homepage1_clientReviews__8lvW4 {
    gap: var(--gap-20);
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .homepage1_searchForCars__u5Wnx {
    font-size: var(--fs-36);
    line-height: var(--lh-36);
  }
  .homepage1_fromAmericaAnd__eSF9u {
    font-size: var(--fs-30);
    line-height: var(--lh-30);
  }
  .homepage1_moreVehicles__700IR {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .homepage1_beforeAndAfter__Q3GDX {
    font-size: var(--fs-38);
    line-height: var(--lh-38);
  }
  .homepage1_ourClientsReceiveContainer__QVvP0 {
    font-size: var(--fs-19);
    line-height: var(--lh-19);
  }
  .homepage1_ourClientsSay__zpWPW {
    font-size: var(--fs-38);
    line-height: var(--lh-38);
  }
  .homepage1_h3__0mtfU {
    font-size: var(--fs-19);
  }
}

/* =========================================================================
 *  CalculatorPage — Figma "CALCULATOR USA" 1:1 port (BIBI Cars).
 *
 *  Pixel-perfect spec (in design coordinates, viewport = 1920):
 *
 *    Outer left/right padding ............................. 100 px
 *    Header bottom → breadcrumb "HOME / CALCULATOR" ........  52 px
 *    Header bottom → "CALCULATOR" H1 ......................  148 px
 *    Header bottom → "[ Calculate the approximate cost… ]"   296 px
 *    Subtitle box position: left 1322 / right 139
 *    Header bottom → calculator gray block ................  480 px
 *
 *    Gray calculator block ................................ 1720 × 1133 px
 *    Block inner padding .................................. 72 px
 *    Gap between the two columns (form / estimate) ........ 80 px
 *    NO border-radius on the block, NO rounded inner cards.
 *
 *    Left column gaps inside the form:
 *      • Country buttons → next label .....................  22 px
 *      • Vehicle icon row → next label ....................  24 px
 *      • "Fill the summ" input → next label ...............  24 px
 *
 *    Right column row-group spacing .......................  44 px
 *    Disclaimer → CTA "I want a complete calculation" .....  56 px
 *    Calc block bottom → footer ........................... 128 px
 *
 *    Button sizes:
 *      • USA / Korea ............ 374 × 45
 *      • Fill the summ .......... 748 × 45
 *      • NOT DAMAGED / DAMAGED .. 374 × 45
 *      • I want a complete …  ... 325 × 45
 *
 *    Typography (Mazzard H):
 *      "CALCULATOR"   ............. Bold 64
 *      Subtitle ................... Medium 24 (orange + white parts)
 *      Calculation Form / Cost
 *        Estimate ................. Semibold 18 white
 *      Row labels (white) ......... Medium 14
 *      Row labels (gray totals) ... Medium 14 (#B0B0B0)
 *      TOTAL APPROXIMATE COST ..... Bold 20 (#FEAE00)
 *      CTA button text ............ Medium 14
 * ====================================================================== */

.CalculatorPage_calcPage__3E8RB {
  background: #000;
  color: #fff;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  width: 100%;
  /* 128 px gap from the bottom of the gray block to the public footer. */
  padding-bottom: 128px;
}

/* ── Outer container — locks the 100 px left/right gutter ────────────── */
.CalculatorPage_container__qUUzI {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 100px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Breadcrumb (52 px from header bottom) ───────────────────────────── */
.CalculatorPage_breadcrumb__CzsrN {
  margin-top: 52px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: inherit;
  font-size: 20px;             /* H SemiBold 20 per spec */
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}
.CalculatorPage_breadcrumb__CzsrN a { color: inherit; text-decoration: none; }
.CalculatorPage_breadcrumb__CzsrN a:hover { color: #FEAE00; }
.CalculatorPage_breadcrumb__CzsrN .CalculatorPage_crumbActive__j153v { color: #FEAE00; }

/* ── H1 "CALCULATOR" (148 px from header) ────────────────────────────── */
.CalculatorPage_pageTitle__fVaf\+ {
  /* gap to breadcrumb top: 148-52 = 96, minus breadcrumb height ~14 = 82 */
  margin: 82px 0 0;
  font-size: 64px;             /* H Bold 64 */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

/* ── Subtitle row "[ CALCULATE THE APPROXIMATE COST… ]" ────────────────
 *   left 1322, right 139 in design coords  ⇒  positioned at
 *   left edge of inner content area + 1222 (since container has 100 px
 *   gutter, the design's 1322 = 100 + 1222).
 *   Width = 1920 - 1322 - 139 = 459 → block is 459 px wide.
 *   Height of 3 lines × 24 ≈ 84 px.
 *   gap to title bottom: 296-148-64 = 84 px → margin-top: 84.            */
/* ── Subtitle row "[ CALCULATE THE APPROXIMATE COST… ]" ────────────────
 *   In the Figma the right edge of the closing bracket aligns with the
 *   right edge of the 1720 px grey calculator block below — i.e. with
 *   the container's right padding (100 px from page edge). So the
 *   subtitle is right-aligned with `margin-right: 0` (the 100 px is
 *   already supplied by .container's padding).
 *   Height of the 3-line text is matched to the 80 px bracket by using
 *   a tight 26 px line-height (3 × 26 = 78 ≈ 80).                       */
.CalculatorPage_subBox__\+Y0hM {
  margin-top: 84px;
  margin-left: auto;
  margin-right: 0;             /* right-aligned with grey block right edge */
  width: auto;                  /* let inner text drive width */
  max-width: 720px;
  display: inline-flex;
  /* Phase B3.2.2 — stretch the bracket frame to the natural height of
     the inner text. Previously fixed at 80 px which left a visible gap
     when the text was shorter (EN) and clipped when it was longer (BG/UK).
     Brackets are SVG with preserveAspectRatio="none" so they scale Y
     freely; vector-effect="non-scaling-stroke" keeps the 3 px stroke
     crisp at every height. */
  align-items: stretch;
  /* Phase B3.2.3 — match the canonical homepage / Before-&-After bracket
     rhythm: 70 px breathing room on each side instead of the previous
     tight 16 px. Brackets now sit visibly apart from the text exactly
     like VehicleDeals1 (`THOUSANDS OF LISTINGS / …`). */
  gap: 70px;
  align-self: flex-end;
  padding: 4px 0;
}
.CalculatorPage_bracketL__dMJPd,
.CalculatorPage_bracketR__D1qHr {
  width: 14px;                 /* spec: bracket 14 × variable, gray #949494 */
  height: auto;
  align-self: stretch;
  flex: 0 0 auto;
  display: block;
}
.CalculatorPage_bracketR__D1qHr { transform: scaleX(-1); }  /* mirror "[" → "]" */
.CalculatorPage_subText__RpzzN {
  margin: 0;
  flex: 1 1;
  align-self: center;
  font-family: inherit;
  font-size: 24px;             /* H Medium 24 */
  font-weight: 500;
  line-height: 26px;           /* tight so 3 lines (= 78 px) fit inside the 80 px bracket */
  text-transform: uppercase;
  color: #FEAE00;
  white-space: nowrap;          /* keep orange line + white lines unbroken */
}
.CalculatorPage_subText__RpzzN .CalculatorPage_subWhite__\+4pnw { color: #fff; }

/* BG: bulgarian copy is ~10% wider than EN. Expand the subBox & relax the
   font a notch so the longest BG line ("НА ВАШИЯ АВТОМОБИЛ И ИЗПРАТЕТЕ
   ЗАЯВКА") still fits on a single line without overflowing. */
html[lang="bg"] .CalculatorPage_subBox__\+Y0hM {
  max-width: 820px;
}
html[lang="bg"] .CalculatorPage_subText__RpzzN {
  font-size: 22px;
  line-height: 26px;
}

/* =========================================================================
 *  GRAY CALCULATOR CARD — Adaptive 1720 × 1133 (max), keeps the 50/50
 *  column split at any viewport (no more "left wide / right narrow").
 *  • ≥ 1920 viewport (100 + 1720 + 100 = 1920) → strict 1720 × 1133.
 *  • < 1920 → card width shrinks to fit container, columns still 50/50.
 *  Inner padding 72, column gap 80.
 * ====================================================================== */
.CalculatorPage_calcBlock__9ixHf {
  margin-top: 104px;
  width: 100%;                 /* fill the 100 px-gutter container */
  max-width: 1720px;           /* but never exceed the spec */
  height: 1133px;
  background: #232323;
  border-radius: 0;
  padding: 72px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 80px;
  font-family: inherit;
}

/* ── Two equal-width columns inside the gray card ────────────────────
 *   At 1920 viewport: (1720 − 144 − 80) / 2 = 748 each.
 *   At any narrower: still 50/50, just smaller — left never grows wider
 *   than right (the bug the user was seeing).
 *   Left: Hug 510 / Right: Fill 989 with CTA pinned to bottom.
 * ──────────────────────────────────────────────────────────────────── */
.CalculatorPage_col__LZ5Bb {
  flex: 1 1;                 /* equal grow, equal shrink */
  min-width: 0;                /* allow shrinking below content size */
  display: flex;
  flex-direction: column;
  background: transparent;
}
.CalculatorPage_colLeft__ENt1L  { height: 510px; }
.CalculatorPage_colRight__FubGl { height: 989px; }
.CalculatorPage_colRight__FubGl .CalculatorPage_estStack__bIlFP {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.CalculatorPage_colRight__FubGl .CalculatorPage_ctaBtn__HQTcg { margin-top: auto; }

/* ── Section header — "Calculation Form" / "Cost Estimate" ───────────── */
.CalculatorPage_sectionHead__ZXS1X {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 0 10px;
  border-bottom: 1px solid #2E2E2E;
}
.CalculatorPage_sectionHead__ZXS1X h2 {
  margin: 0;
  font-family: inherit;
  font-size: 18px;             /* H Semibold 18 */
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

/* =========================================================================
 *  LEFT COLUMN — Calculation Form
 * ====================================================================== */
.CalculatorPage_formStack__wUB1h {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
/* margin-top per field group — STRICT per spec:
 *   • section head → first field   : 56 px
 *   • field-to-field everywhere    : 24 px  (was a mix of 22 / 24)
 */
.CalculatorPage_field__bBT-Q {
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* label → control inside the field */
}
.CalculatorPage_field__bBT-Q + .CalculatorPage_field__bBT-Q            { margin-top: 24px; }
.CalculatorPage_fieldLabel__s7IaH {
  font-family: inherit;
  font-size: 14px;             /* H Medium 14 */
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.CalculatorPage_fieldLabel__s7IaH .CalculatorPage_req__6lV7F { color: #FEAE00; }
.CalculatorPage_firstField__FaTuV { margin-top: 56px; }   /* section-head → first field gap, strict 56 */

/* ── Country-of-origin row (fills col width, 2 equal buttons) ────────── */
.CalculatorPage_ctryRow__8Z1dO {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;                 /* fill column — 748 max at 1920 viewport */
  max-width: 748px;
  height: 45px;
}
.CalculatorPage_ctryBtn__Ma4tD,
.CalculatorPage_ctryBtn2__h52HP {
  height: 45px;
  flex: 1 1;                 /* equal width grow */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  color: #B0B0B0;
  transition: background 120ms, color 120ms, border-color 120ms;
  border: 1px solid #2E2E2E;
  border-right-width: 0;
}
.CalculatorPage_ctryBtn__Ma4tD  { border-radius: 4px 0 0 4px; }
.CalculatorPage_ctryBtn2__h52HP { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.CalculatorPage_ctryActive__0OMGR {
  background: #FEAE00;
  color: #000;
  border-color: #FEAE00;
}
.CalculatorPage_flag__Jk3MK {
  width: 20px;
  height: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 1px;
}

/* ── Vehicle-type icon row ───────────────────────────────────────────── */
.CalculatorPage_vehRow__TNMe9 {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 748px;
  margin-bottom: 8px;
}
.CalculatorPage_vehCard__nkRJV {
  flex: 1 1;
  min-width: 0;
  border-radius: 4px;
  /* extra 8 px padding-bottom so the label has a visible breathing strip
     inside both inactive (transparent) and active (orange) cards */
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  color: #949494;             /* H Regular grey per spec */
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;            /* Regular */
  line-height: 1;
  text-transform: uppercase;
  border: 0;
  transition: background 120ms, color 120ms;
}
/* Icon glyph rendered via CSS mask so we can recolour the silhouette
 * to match the card foreground (grey when inactive, black when active). */
.CalculatorPage_vehIcon__iGkLy {
  display: block;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 40px 40px;
          mask-size: 40px 40px;
  flex-shrink: 0;
}
.CalculatorPage_vehLabel__RK8pC { display: block; }
.CalculatorPage_vehCard__nkRJV:hover { color: #ffffff; }
.CalculatorPage_vehCardActive__Sv3-0 { background: #FEAE00; color: #000; }

/* ── Price input (fills col, ≤ 748 × 45) — orange € icon prefix ──────── */
.CalculatorPage_priceRow__iVji8 {
  width: 100%;
  max-width: 748px;
  height: 45px;
  border: 1px solid #2E2E2E;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 16px;
  background: transparent;
  transition: border-color 120ms;
}
.CalculatorPage_priceRow__iVji8:focus-within { border-color: #FEAE00; }
.CalculatorPage_priceEuro__KLcG2 {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  display: block;
}
.CalculatorPage_priceInput__r3n94 {
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;             /* H Regular 14 per spec */
  font-weight: 400;
  padding: 0;
}
.CalculatorPage_priceInput__r3n94::placeholder { color: #6B6B6B; font-weight: 400; }

/* ── Damage toggle (equal halves) — Figma: no outer border, only the
 *   center splitter and the bottom shadow line carry the active colour.
 *   Inactive: transparent bg, grey label, hairline shared border between
 *   the two cells. Active: tinted bg + bold coloured label, and BOTH the
 *   center splitter (own right-border on the active half) and the
 *   bottom edge of the entire toggle pick up the active colour.
 * ──────────────────────────────────────────────────────────────────── */
.CalculatorPage_dmgRow__\+BXe5 {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 748px;
  height: 45px;
  border-radius: 8px;
  overflow: hidden;
  background: #1A1B19;
}
/* ── DAMAGE TOGGLE ───────────────────────────────────────────────────
 *  Segmented control: [ NOT DAMAGED | DAMAGED ].
 *  Активный сегмент подсвечивается ТОЛСТОЙ (4 px) цветной линией
 *  на ВНУТРЕННЕЙ грани (т.е. в середине пары, между двумя кнопками)
 *  + лёгкая тинтованная заливка + цветной текст.
 *  Логика "сквозная": тот же паттерн используется в калькуляторе.
 * ----------------------------------------------------------------- */
.CalculatorPage_dmgBtn__RyJcB,
.CalculatorPage_dmgBtn2__3FxC3 {
  height: 45px;
  flex: 1 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  box-sizing: border-box;
  background: transparent;
  color: #6B6B6B;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  border: 0;
  border-radius: 0;
}
.CalculatorPage_dmgBtn__RyJcB  { border-radius: 8px 0 0 8px; }
.CalculatorPage_dmgBtn2__3FxC3 { border-radius: 0 8px 8px 0; }

.CalculatorPage_dmgBtn__RyJcB.CalculatorPage_dmgOk__zXyF7 {
  background: rgba(0, 178, 121, 0.10);
  color: #00B279;
  box-shadow: inset -4px 0 0 0 #00B279;   /* thick green line on RIGHT = middle */
}
.CalculatorPage_dmgBtn2__3FxC3.CalculatorPage_dmgErr__wHwuU {
  background: rgba(243, 67, 76, 0.10);
  color: #F3434C;
  box-shadow: inset 4px 0 0 0 #F3434C;    /* thick red line on LEFT = middle */
}
.CalculatorPage_dmgBtn__RyJcB:hover:not(.CalculatorPage_dmgOk__zXyF7)   { color: #B0B0B0; }
.CalculatorPage_dmgBtn2__3FxC3:hover:not(.CalculatorPage_dmgErr__wHwuU) { color: #B0B0B0; }

/* =========================================================================
 *  RIGHT COLUMN — Cost Estimate
 *  Strict spec:
 *    • section head → first group   : 56 px
 *    • group → group                 : 44 px
 *    • group total → TOTAL APPROX    : 44 px
 *    • TOTAL APPROX → disclaimer     : 44 px
 *    • disclaimer → CTA              : 56 px
 * ====================================================================== */
.CalculatorPage_estStack__bIlFP {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.CalculatorPage_estGroup__HzKZQ {
  display: flex;
  flex-direction: column;
  gap: 24px;                   /* row-to-row within a sub-group */
}
.CalculatorPage_estGroup__HzKZQ + .CalculatorPage_estGroup__HzKZQ      { margin-top: 44px; }   /* group → group, strict 44 */
.CalculatorPage_firstEstGroup__mNwUH             { margin-top: 56px; }   /* section-head → first group, strict 56 */

.CalculatorPage_estRow__cRFyD {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* summary-only design: label is the only element */
  gap: 20px;
}
.CalculatorPage_estRow__cRFyD .CalculatorPage_lbl__e7oF7,
.CalculatorPage_estRow__cRFyD .CalculatorPage_val__vM1ok {
  font-family: inherit;
  font-size: 14px;             /* H Medium 14 */
  font-weight: 500;
  line-height: 1;
}
.CalculatorPage_estRow__cRFyD .CalculatorPage_lbl__e7oF7 { color: #fff; }
.CalculatorPage_estRow__cRFyD .CalculatorPage_val__vM1ok { display: none; }  /* per summary-only design (Jul 12, 2026) */

/* ── Group total row (CAR & AUCTION / LOGISTICS / CUSTOMS) ───────────── */
.CalculatorPage_estGroupTotal__utnLC {
  align-self: stretch;
  border-top: 1px solid #2E2E2E;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 6px;
}
.CalculatorPage_estGroupTotal__utnLC .CalculatorPage_gtLbl__Y3GdR,
.CalculatorPage_estGroupTotal__utnLC .CalculatorPage_gtVal__FQCoc {
  font-family: inherit;
  font-size: 14px;             /* H Medium 14 uppercase, gray */
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #949494;
}
.CalculatorPage_estGroupTotal__utnLC .CalculatorPage_gtVal__FQCoc { color: #949494; white-space: nowrap; }

/* ── TOTAL approximate cost — H Bold 20 orange (44 px gap above) ────── */
.CalculatorPage_grandTotal__WNnag {
  align-self: stretch;
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.CalculatorPage_grandTotal__WNnag h3 {
  margin: 0;
  font-family: inherit;
  font-size: 20px;             /* H Bold 20 */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #FEAE00;
}
.CalculatorPage_grandTotal__WNnag .CalculatorPage_totalVal__13R2N { white-space: nowrap; }

/* ── Approximate-estimate disclaimer (44 px gap from TOTAL above) ────── */
.CalculatorPage_disclaimer__Y3tUT {
  align-self: stretch;
  margin-top: 44px;
  width: 100%;
  max-width: 748px;
  min-height: 66px;
  box-sizing: border-box;
  background: #2C2418;           /* dark brown per Figma */
  border-left: 3px solid #644310;
  padding: 16px;
  font-family: inherit;
  font-size: 14px;               /* H Regular 14 */
  font-weight: 400;
  line-height: 17px;
  color: #949494;
}
.CalculatorPage_disclaimer__Y3tUT .CalculatorPage_em__NevRk { color: #949494; font-weight: 600; }  /* "Approximate estimate" — SemiBold, same grey */

/* ── CTA "I want a complete calculation" (325 × 45) ──────────────────── */
.CalculatorPage_ctaBtn__HQTcg {
  margin-top: 56px;             /* 56 px from disclaimer to CTA */
  width: 325px;
  max-width: 100%;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: #FEAE00;
  color: #000;
  font-family: inherit;
  font-size: 14px;             /* H Medium 14 */
  font-weight: 500;
  text-transform: uppercase;
  align-self: center;          /* centered within the right column per Figma */
  transition: filter 120ms;
}
.CalculatorPage_ctaBtn__HQTcg:hover { filter: brightness(0.94); }
.CalculatorPage_ctaBtn__HQTcg:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Right-column loading veil ───────────────────────────────────────── */
.CalculatorPage_loading__cMSOL { opacity: 0.55; pointer-events: none; transition: opacity 200ms; }

/* =========================================================================
 *  Responsive guards — desktop ≥ 1280 keeps strict 100 px gutter and the
 *  fixed 1720 × 1133 card. Below that the card overflows horizontally
 *  (acceptable per Figma — 1720 × 1133 is strict / Hug).
 *  Below 720 px (mobile) we degrade gracefully so the page is at least
 *  usable on phones.
 * ====================================================================== */
@media (max-width: 1279px) {
  .CalculatorPage_container__qUUzI { padding: 0 max(24px, min(100px, 5vw)); }
  .CalculatorPage_subBox__\+Y0hM { margin-right: max(0px, calc(5vw - 61px)); width: min(459px, 36vw); }
}

/* =========================================================================
 *  MOBILE LAYOUT (≤ 768 px) — pixel-precise per user spec session 34.
 *  Reference: zipped Next.js export "Calculator mobi.zip" + screenshot.
 *
 *  Vertical anchors (top → bottom, from below header):
 *    • Breadcrumb HOME / CALCULATOR              24 px from header
 *    • CALCULATOR H1                             24 px below breadcrumb
 *    • Subtitle "CALCULATE THE APPROXIMATE COST" 24 px below H1
 *    • Calculation Form (grey card top)          32 px below subtitle
 *
 *  Page L/R padding 12.  Grey card is EDGE-TO-EDGE (escape via negative
 *  margins).  All inner content keeps 12 L/R inside the grey.
 *
 *  Fonts (Mazzard H):
 *    Breadcrumb            : H SemiBold 12  (HOME #5E5E5E / CALCULATOR #FEAE00)
 *    Page title            : H Bold 24    white, left
 *    Subtitle line 1       : H Medium 16  #FEAE00  (no break)
 *    Subtitle line 2-3     : H Medium 16  #FFFFFF
 *    Section heads
 *      (Calculation Form,
 *       Cost Estimate)     : H Medium 16  white   → 8 px grey divider
 *    Field labels          : H Medium 14  white
 *    Country active (USA)  : H Medium 14  black
 *    Country inactive (KR) : H Medium 14  #949494
 *    Damage (NOT/DAMAGED)  : H Medium 14
 *    Estimate row labels   : H Regular 14 white
 *    Estimate values       : H Medium 14
 *    Group total           : H Medium 14  (uppercase, grey)
 *    TOTAL approx. cost    : H Medium 16  #FEAE00
 *    Disclaimer "Approx."  : H SemiBold 14
 *    Disclaimer text       : H Regular 14
 *    CTA button text       : H Medium 14  → 336 × 45 yellow filled
 *
 *  Inner spacings:
 *    Form section-head → field-1                 32 px
 *    Field label → control                       12 px
 *    Field → field                               24 px
 *    Cost-Estimate head → group-1                32 px
 *    Within sub-group (row → row)                16 px
 *    Sub-group → sub-group                       40 px
 *    Group "CUSTOMS & FINAL FEES" → TOTAL        44 px
 *    TOTAL → "Approximate estimate" disclaimer   32 px
 *    Disclaimer → CTA button                     56 px
 *    CTA → grey card bottom                      56 px
 * ===================================================================== */
@media (max-width: 768px) {
  .CalculatorPage_calcPage__3E8RB {
    padding-bottom: 0;                            /* footer spacing handled in card */
  }
  .CalculatorPage_container__qUUzI {
    padding: 0 12px;                              /* user spec: 12 L/R */
    max-width: 100%;
  }

  /* ── Breadcrumb ─────────────────────────────────────────────────── */
  .CalculatorPage_breadcrumb__CzsrN {
    margin-top: 24px;
    gap: 4px;                                     /* tight slash spacing */
    font-size: 12px;                              /* H SemiBold 12 */
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #5E5E5E;
  }
  .CalculatorPage_breadcrumb__CzsrN a,
  .CalculatorPage_breadcrumb__CzsrN a:visited { color: #5E5E5E; }
  .CalculatorPage_breadcrumb__CzsrN a:hover   { color: #FEAE00; }
  .CalculatorPage_breadcrumb__CzsrN .CalculatorPage_crumbActive__j153v,
  .CalculatorPage_breadcrumb__CzsrN > span:last-child { color: #FEAE00; }

  /* ── H1 "CALCULATOR" ───────────────────────────────────────────── */
  .CalculatorPage_pageTitle__fVaf\+ {
    margin-top: 24px;                             /* 24 from breadcrumb bottom */
    font-size: 24px;                              /* H Bold 24 */
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
  }

  /* ── Subtitle (centered, brackets hidden on mobile) ────────────── */
  .CalculatorPage_subBox__\+Y0hM {
    margin-top: 24px;                             /* 24 from H1 */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 0;
  }
  .CalculatorPage_bracketL__dMJPd, .CalculatorPage_bracketR__D1qHr { display: none; }
  .CalculatorPage_subText__RpzzN {
    font-size: 16px;                              /* H Medium 16 */
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: normal;                          /* allow natural wrap */
    color: #FFFFFF;                               /* default white; first span overrides */
  }
  .CalculatorPage_subText__RpzzN > span:first-child,
  .CalculatorPage_subText__RpzzN > span:first-of-type {
    color: #FEAE00;                               /* "CALCULATE THE APPROXIMATE COST" line — yellow */
  }
  .CalculatorPage_subText__RpzzN .CalculatorPage_subWhite__\+4pnw { color: #FFFFFF; }

  /* ── GRAY CARD — edge-to-edge full-bleed ────────────────────────── */
  .CalculatorPage_calcBlock__9ixHf {
    margin-top: 32px;                             /* 32 from subtitle → card top */
    margin-left: -12px;                           /* escape .container L padding */
    margin-right: -12px;                          /* escape .container R padding */
    width: calc(100% + 24px);
    max-width: none;
    height: auto;
    min-height: 0;
    background: #1A1B19;                          /* match other cards on mobile */
    /* Top padding 32 (user spec).  Bottom padding 0 so the spec'd 56 px
     * from the CTA button to the end of the form is provided entirely by
     * `.ctaBtn { margin-bottom: 56 }` — no extra padding stacking. */
    padding: 32px 12px 0;
    gap: 32px;                                    /* between Form and Estimate sections */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .CalculatorPage_col__LZ5Bb,
  .CalculatorPage_colLeft__ENt1L,
  .CalculatorPage_colRight__FubGl {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  /* ── Section head — H Medium 16 + 8 px grey divider ────────────── */
  .CalculatorPage_sectionHead__ZXS1X {
    padding: 0 0 8px;
    border-bottom: 1px solid #2E2E2E;
  }
  .CalculatorPage_sectionHead__ZXS1X h2 {
    font-size: 16px;                              /* H Medium 16 */
    font-weight: 500;
    text-transform: uppercase;
  }

  /* ── Form fields ───────────────────────────────────────────────── */
  .CalculatorPage_formStack__wUB1h { gap: 0; }
  .CalculatorPage_field__bBT-Q {
    gap: 12px;                                    /* user spec: 12 label → control */
  }
  .CalculatorPage_field__bBT-Q + .CalculatorPage_field__bBT-Q { margin-top: 24px; }           /* user spec: 24 field → field */
  .CalculatorPage_firstField__FaTuV     { margin-top: 32px; }           /* user spec: 32 head → first field */
  .CalculatorPage_fieldLabel__s7IaH {
    font-size: 14px;
    font-weight: 500;                             /* H Medium 14 */
    color: #FFFFFF;
  }

  /* Country buttons — full-width 336 / 45 */
  .CalculatorPage_ctryRow__8Z1dO {
    max-width: none;
    width: 100%;
    height: 45px;
  }
  .CalculatorPage_ctryBtn__Ma4tD, .CalculatorPage_ctryBtn2__h52HP {
    font-size: 14px;
    font-weight: 500;
  }
  /* Inactive country = grey, active = black on yellow (already handled). */
  .CalculatorPage_ctryBtn__Ma4tD:not(.CalculatorPage_ctryActive__0OMGR),
  .CalculatorPage_ctryBtn2__h52HP:not(.CalculatorPage_ctryActive__0OMGR) { color: #949494; }

  /* Vehicle icon row */
  .CalculatorPage_vehRow__TNMe9 {
    max-width: none;
    width: 100%;
    margin-bottom: 0;
    gap: 4px;
  }
  .CalculatorPage_vehCard__nkRJV {
    padding: 8px 4px 12px;
    gap: 6px;
    font-size: 10px;
  }
  .CalculatorPage_vehIcon__iGkLy { width: 32px; height: 32px; mask-size: 32px 32px; -webkit-mask-size: 32px 32px; }

  /* Price input */
  .CalculatorPage_priceRow__iVji8 {
    max-width: none;
    width: 100%;
  }

  /* Damage segmented */
  .CalculatorPage_dmgRow__\+BXe5 {
    max-width: none;
    width: 100%;
  }
  .CalculatorPage_dmgBtn__RyJcB, .CalculatorPage_dmgBtn2__3FxC3 {
    font-size: 14px;
    font-weight: 500;
  }

  /* ── COST ESTIMATE column ──────────────────────────────────────── */
  .CalculatorPage_estStack__bIlFP { gap: 0; }
  .CalculatorPage_estGroup__HzKZQ       { gap: 16px; }                  /* user spec: 16 within sub-group */
  .CalculatorPage_firstEstGroup__mNwUH  { margin-top: 32px; }           /* user spec: 32 head → first group */
  .CalculatorPage_estGroup__HzKZQ + .CalculatorPage_estGroup__HzKZQ { margin-top: 40px; }     /* user spec: 40 sub-group → sub-group (real gap from group total to next first row text) */
  .CalculatorPage_estRow__cRFyD .CalculatorPage_lbl__e7oF7,
  .CalculatorPage_estRow__cRFyD .CalculatorPage_val__vM1ok {
    font-size: 14px;
  }
  .CalculatorPage_estRow__cRFyD .CalculatorPage_lbl__e7oF7 { font-weight: 400; }              /* H Regular 14 white per spec */
  .CalculatorPage_estRow__cRFyD .CalculatorPage_val__vM1ok { font-weight: 500; }              /* H Medium 14 white per spec */
  .CalculatorPage_estGroupTotal__utnLC {
    padding-top: 8px;                             /* user spec: 8 above group total */
    border-top-color: #2E2E2E;
    gap: 16px;
  }
  .CalculatorPage_estGroupTotal__utnLC .CalculatorPage_gtLbl__Y3GdR,
  .CalculatorPage_estGroupTotal__utnLC .CalculatorPage_gtVal__FQCoc {
    font-size: 14px;                              /* H Medium 14, gray */
    font-weight: 500;
    color: #949494;
  }

  /* TOTAL approximate cost */
  .CalculatorPage_grandTotal__WNnag {
    margin-top: 44px;                             /* user spec: 44 from CUSTOMS & FINAL FEES */
  }
  .CalculatorPage_grandTotal__WNnag h3 {
    font-size: 16px;                              /* H Medium 16, orange */
    font-weight: 500;
  }

  /* Disclaimer */
  .CalculatorPage_disclaimer__Y3tUT {
    margin-top: 32px;                             /* user spec: 32 from TOTAL */
    max-width: 100%;
    font-size: 14px;                              /* H Regular 14 */
    font-weight: 400;
    line-height: 18px;
    padding: 14px 12px;
  }
  .CalculatorPage_disclaimer__Y3tUT .CalculatorPage_em__NevRk {
    font-weight: 600;                             /* H SemiBold 14 for "Approximate estimate." */
  }

  /* CTA "I want a complete calculation" — 336 × 45 yellow, centered.
   * Higher specificity (.colRight .ctaBtn) needed to override the desktop
   * `.colRight .ctaBtn { margin-top: auto }` rule that pushes the button
   * to the bottom of the flex column.  Without this, the spec'd 56 px
   * gap from the disclaimer collapses (flex auto absorbs all slack). */
  .CalculatorPage_colRight__FubGl .CalculatorPage_ctaBtn__HQTcg,
  .CalculatorPage_ctaBtn__HQTcg {
    margin-top: 56px;                             /* 56 px from disclaimer to button (user spec) */
    margin-bottom: 56px;                          /* 56 px from button to grey card bottom (user spec) */
    margin-left: auto;
    margin-right: auto;                           /* horizontal centering inside card */
    width: 336px;                                 /* user spec: 336 × 45 */
    max-width: calc(100% - 0px);
    height: 45px;
    font-size: 14px;
    font-weight: 500;
    align-self: center;
    border-radius: 4px;
  }
}

/* Legacy fallback for ultra-narrow viewports (kept for safety; the
 * 768-px block above already covers everything ≤ 768).            */
@media (max-width: 380px) {
  .CalculatorPage_vehCard__nkRJV { padding: 6px 2px 10px; font-size: 9px; }
  .CalculatorPage_vehIcon__iGkLy { width: 28px; height: 28px; mask-size: 28px 28px; -webkit-mask-size: 28px 28px; }
}

/* =============================================================================
 * PageHero — shared breadcrumb + page-title block for public pages.
 *
 * STRICT desktop spec (Single Car page reference, May 2026 Figma):
 *
 *   ┌──────────────────────────────────────────────────────────────┐
 *   │  padding-left 100              padding-right 100             │
 *   │  ↓ 52 px from public header bottom                           │
 *   │  HOME / catalog                  (Mazzard H SemiBold 20)     │
 *   │  ↕ 76 px                                                     │
 *   │  CATALOG                         (Mazzard H Bold 80, white)  │
 *   └──────────────────────────────────────────────────────────────┘
 *
 *   Colour rules (breadcrumb):
 *     • return links      : #5E5E5E (grey)
 *     • slash separator   : #5E5E5E (grey, inherits)
 *     • current crumb     : #FEAE00 (orange)
 *
 * All measurements scale down fluidly between 769–1280 px, then switch
 * to the per-page mobile spec at ≤ 768 px (CSS for mobile overrides
 * lives in each page's own stylesheet — this file deliberately stops
 * caring about mobile so we don't fight existing per-page mobile work).
 * ========================================================================== */

.PageHero_hero__YKqPu {
  background: #000;
  width: 100%;
}

.PageHero_container__7dGLx {
  max-width: 1920px;
  margin: 0 auto;
  padding: 52px 100px 0;                         /* 52 top — header → breadcrumb */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
}

/* ── Breadcrumb (H SemiBold 20, grey + orange current) ────────────────── */
.PageHero_crumbs__88jZz {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #5E5E5E;
}
.PageHero_crumbLink__bSLCY {
  color: #5E5E5E;
  text-decoration: none;
  transition: color 150ms ease;
  font: inherit;
}
.PageHero_crumbLink__bSLCY:hover,
.PageHero_crumbLink__bSLCY:focus-visible {
  color: #FEAE00;
  outline: none;
}
.PageHero_crumbSep__XTeFt {
  color: #5E5E5E;
  font: inherit;
  padding: 0;
}
.PageHero_crumbActive__JJv-D {
  color: #FEAE00;
  font: inherit;
}

/* ── Title row (h1 + optional right slot for inline content) ───────────── */
.PageHero_titleRow__zx\+8N {
  margin-top: 76px;                              /* breadcrumb → title — strict */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.PageHero_title__tQyKZ {
  margin: 0;
  font-family: inherit;
  font-size: 80px;                               /* H Bold 80 */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #FFFFFF;
}
.PageHero_rightSlot__hCfcL {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Fluid scale between 769–1280 px (laptops / small desktops) ────────── */
@media (max-width: 1279px) {
  .PageHero_container__7dGLx { padding: clamp(40px, 4vw, 52px) clamp(40px, 7.81vw, 100px) 0; }
  .PageHero_crumbs__88jZz    { font-size: clamp(14px, 1.56vw, 20px); }
  .PageHero_titleRow__zx\+8N  { margin-top: clamp(40px, 5.94vw, 76px); }
  .PageHero_title__tQyKZ     { font-size: clamp(40px, 6.25vw, 80px); }
}

/* ── Mobile (≤ 768 px) — defer to page-level styles. We only flatten the
 * outer geometry here so the pages don't get broken by the new desktop
 * spec. Each consuming page already provides its own pixel-perfect mobile
 * spec for breadcrumb and title; we just make sure nothing leaks. ─────── */
@media (max-width: 768px) {
  .PageHero_container__7dGLx { padding: 32px 12px 0; }
  .PageHero_crumbs__88jZz    { font-size: 13px; gap: 6px; }
  .PageHero_titleRow__zx\+8N  { margin-top: 32px; gap: 16px; }
  .PageHero_title__tQyKZ     { font-size: 32px; }
}

/* =============================================================================
 * BIBI Cars — Coming Soon page
 * ========================================================================== */

.bibi-coming-soon {
  width: 100%;
  background: var(--bibi-black);
  color: var(--bibi-white);
}

.bibi-coming-soon__body {
  background: var(--bibi-black);
  padding: clamp(40px, 6vw, 100px) 0 clamp(80px, 12vw, 200px);
  display: flex;
  justify-content: center;
}

.bibi-coming-soon__body--full {
  min-height: calc(100vh - 240px);
  align-items: center;
  padding: clamp(60px, 10vw, 160px) 0;
}

.bibi-coming-soon__card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--bibi-yellow);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(254, 174, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}

.bibi-coming-soon__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--bibi-yellow);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bibi-coming-soon__title {
  margin: 0;
  font-family: var(--bibi-font);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--bibi-white);
}

.bibi-coming-soon__text {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--bibi-text-mute-2);
  max-width: 540px;
}

.bibi-coming-soon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding-top: 8px;
}

.bibi-btn--ghost {
  background: transparent !important;
  color: var(--bibi-yellow) !important;
  border: 1px solid var(--bibi-yellow) !important;
  height: 45px;
  padding: 0 28px;
}

@media (max-width: 768px) {
  .bibi-coming-soon__body {
    padding: 24px 16px 64px;
  }
  .bibi-coming-soon__card {
    padding: 32px 20px;
    gap: 18px;
    border-radius: 12px;
  }
  .bibi-coming-soon__actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .bibi-coming-soon__actions .bibi-btn {
    width: 100%;
  }
}

/* =========================================================================
 *  CatalogPage — Figma "BIBI Cars / CATALOG" (May 2026).
 *
 *  FLUID RESPONSIVE strategy:
 *  — The design coordinate system is 1920 px (Figma).
 *  — At 1920 px viewport the geometry below matches the Figma 1:1.
 *  — Below 1920 px every spacing/font value scales LINEARLY via clamp(): the
 *    upper bound is the exact Figma px, the lower bound keeps the page usable
 *    around ~1100 px (MacBook Pro 13 native = 1280, MacBook Pro 13 scaled = 1024).
 *  — Above 1920 px the page stays centered with a 1920 px max-width.
 *  — NO mobile breakpoints. The user explicitly asked us NOT to write mobile rules.
 *
 *  GEOMETRY AT 1920 px (unchanged):
 *    Outer L/R padding ...... 100 px
 *    Header → breadcrumb ....  52 px
 *    Header → "CATALOG" .... 148 px
 *    Header → filter top .... 352 px
 *    Header → SORT+ ......... 362 px (level with filters)
 *    Header → first card .... 418 px
 *    Filter width ........... 427 px
 *    Vehicle card ........... 1263 × 467 px (max)
 *    Image in card .......... 518 × 387 px (max)
 *    Gap filter ↔ cards ....  30 px
 *
 *  TYPOGRAPHY: Mazzard H, never overridden by mobile rules.
 * ====================================================================== */

/* ---- Linear scaling math ---------------------------------------------------
   For a value V whose “design” is V_px at 1920px and which should reach V_min
   at 1100px we use:
        clamp( V_min, V_min + (V_px - V_min) * ((100vw - 1100px) / 820px), V_px )
   The 820 = 1920 - 1100. We collapse this into vw arithmetic where possible.
   --------------------------------------------------------------------------*/

.CatalogPage_catalogPage__JyZbX {
  background: #000;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  width: 100%;
  /* No bottom padding here — the CatalogConsultationBlock handles the
   * vertical rhythm between the last card and the footer (569 / 161 px). */
  padding-bottom: 0;
  min-width: 0;
}

/* ---------- 100 px gutter at 1920, fluid down to 24 px at 1024 ---------- */
.CatalogPage_container__IGUXq {
  max-width: 1920px;
  margin: 0 auto;
  /* 24 → 100 between 1024 and 1920 viewports */
  padding: 0 clamp(24px, 5.21vw, 100px);
  box-sizing: border-box;
}

/* ---------- Breadcrumb (52 → 24 px top) -------------------------------- */
.CatalogPage_breadcrumb__AFyn3 {
  padding-top: clamp(24px, 2.71vw, 52px);
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 99.9%;
  text-transform: uppercase;
  color: #FFFFFF;
}
.CatalogPage_breadcrumb__AFyn3 a, .CatalogPage_breadcrumb__AFyn3 a:visited { color: #FFFFFF; text-decoration: none; }
.CatalogPage_breadcrumb__AFyn3 .CatalogPage_accent__FsJUh { color: #FEAE00; }
.CatalogPage_breadcrumb__AFyn3 .CatalogPage_sep__Ij1Qo { padding: 0 4px; color: #FEAE00; }

/* ---------- Page title row: heading + Figma search bar (right) ---------- */
.CatalogPage_titleRow__IcpT0 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: clamp(40px, 5vw, 96px);
}
.CatalogPage_title__3ByAK {
  margin: 0;
  padding-top: 0;                       /* moved to .titleRow */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(36px, 3.33vw, 64px);
  line-height: 99.9%;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* ---------- Two-column grid: filter (427 @1920 → 380 @1280) | cards | gap 30 ----
 *  Sidebar шкалируется ЛИНЕЙНО, отдавая горизонтальное место карточкам
 *  на узких экранах (MacBook 13"). Никаких mobile-брейкпойнтов.
 *  МИНИМУМ ширины фильтра — 380 px, чтобы 5 vehicle-type карточек
 *  (5 × 72.6 + 64 padding = 427) могли стоять без визуального
 *  сплющивания: на 1440-px viewport (MacBook Pro 13") filter = 380 px,
 *  а карточки автоматически дотягиваются до ~63 px (с 32 px иконкой
 *  по центру даёт ~15 px воздуха слева/справа от иконки).
 *  Max = 427 (Figma 1:1 @ 1920).
 * --------------------------------------------------------------------- */
.CatalogPage_grid__FRqOz {
  padding-top: clamp(60px, 7.3vw, 140px);
  display: grid;
  grid-template-columns: clamp(380px, calc(29.22vw - 134px), 427px) minmax(0, 1fr);
  grid-column-gap: clamp(16px, 1.56vw, 30px);
  column-gap: clamp(16px, 1.56vw, 30px);
  align-items: start;
}

/* ---------- Right column: results header + cards ----------------------- */
.CatalogPage_resultsCol__Hj0Vs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.67vw, 32px);
  min-width: 0;            /* allow children to shrink within the grid track */
}

.CatalogPage_resultsHeader__cRuIo {
  margin-top: clamp(0px, 0.52vw, 10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.CatalogPage_resultsCount__8H\+5w {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                     /* Medium */
  font-size: 12px;                      /* Figma: 12 */
  line-height: 99.9%;
  text-transform: uppercase;
  color: #949494;                       /* Figma: grey */
}
.CatalogPage_resultsCount__8H\+5w .CatalogPage_num__gHbEC { color: #FEAE00; font-weight: 600; }

.CatalogPage_chipRow__4\+4kN {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.CatalogPage_chip__bBxFl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 16px;                  /* Figma: 16 */
  border: 1px solid #555452;            /* Figma: grey #555452 */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                     /* Medium */
  font-size: 12px;                      /* Figma: 12 */
  line-height: 99.9%;
  text-transform: capitalize;
  color: #FFFFFF;                       /* Figma: white */
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.CatalogPage_chip__bBxFl:hover { background: rgba(255,255,255,0.04); border-color: #7a7a78; }
.CatalogPage_chip__bBxFl .CatalogPage_x__dBjP8 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;            /* Figma: 14×14 */
  font-size: 16px;                      /* heavier glyph than 12px text */
  line-height: 1;
  font-weight: 400;
  opacity: .95;
}

.CatalogPage_resetAll__ZUPg8 {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500; font-size: 12px; line-height: 99.9%; text-transform: uppercase;
  color: #5E5E5E;                       /* Figma: grey */
  text-decoration: underline;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.CatalogPage_sortBtn__8MITT {
  display: inline-flex; align-items: center; justify-content: center;
  width: 51px;
  height: 17px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500; font-size: 14px; line-height: 99.9%; text-transform: uppercase;
  color: #FEAE00;
  background: transparent; border: 0; cursor: pointer; padding: 0; margin-left: auto;
}
.CatalogPage_sortBtn__8MITT:hover { opacity: 0.85; }

.CatalogPage_cards__UpuNS { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); }

/* SHOW MORE — Figma 1:1 @ 1920 px:
 *   • left  margin (page edge → button left):  1130 px
 *   • right margin (button right → page edge):  673 px
 *   • button width auto = 117 px (= 1920 − 1130 − 673)
 *   • top  spacing from last vehicle card:    104 px
 *
 *  Because the cards column spans x = 557 → 1820 (1263 px wide), the
 *  button at x = 1130 → 1247 sits EXACTLY at the column's horizontal
 *  centre. So we use `justify-content: center` and the natural text
 *  width of "SHOW MORE" (≈ 117 px in Mazzard H Medium 16 px) lines up
 *  pixel-perfect.
 *
 *  Font: H Medium 16, line-height 100%, uppercase, color #FEAE00,
 *  underline. */
.CatalogPage_showMoreWrap__BnOBA {
  display: flex;
  justify-content: center;
  /* Visual gap from the last card MUST equal exactly 104 px.
   * The parent `.resultsCol` already contributes a `gap: clamp(16px, 1.67vw, 32px)`
   * between the cards section and this wrapper, so we subtract it from
   * the padding to keep the total at 104 across every viewport.       */
  padding-top: calc(104px - clamp(16px, 1.67vw, 32px));
}
.CatalogPage_showMore__yl5ul {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;      /* H Medium */
  font-size: 16px;       /* fixed per Figma — никакого clamp */
  line-height: 100%;
  text-transform: uppercase;
  color: #FEAE00;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease;
}
.CatalogPage_showMore__yl5ul:hover         { color: #FFC23A; }
.CatalogPage_showMore__yl5ul:focus-visible { outline: none; color: #FFC23A; }
.CatalogPage_showMore__yl5ul:disabled      { opacity: 0.5; cursor: not-allowed; }

.CatalogPage_statePanel__go9do {
  width: 100%;
  min-height: clamp(240px, 24.3vw, 467px);
  background: #1A1B19;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500; font-size: 16px; color: #B0B0B0;
  text-align: center; padding: 24px; box-sizing: border-box;
}

/* =========================================================================
 *  PRICE-FILTER HONESTY BANNER (Phase B2.1)
 *  -----------------------------------------------------------------------
 *  Surfaces backend `meta.hidden_by_price_filter` so users understand
 *  why a price filter narrowed (or emptied) the result set — instead of
 *  silently misleading them. Honest, opt-out, never gaslighting.
 * ===================================================================== */
.CatalogPage_priceHintBanner__-OGAY {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: #1F1D14;             /* solid (no transparency, per design rules) */
  border: 1px solid #FEAE00;
  border-radius: 10px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 14px;
  color: #F2E7C9;
  line-height: 1.4;
  margin-bottom: 4px;
}
.CatalogPage_priceHintDot__iZBES {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FEAE00;
  box-shadow: 0 0 0 3px rgba(254,174,0,0.18);
}
.CatalogPage_priceHintLink__Esz28 {
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 6px 0;
  color: #FEAE00;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.CatalogPage_priceHintLink__Esz28:hover { color: #FFC23A; }
.CatalogPage_priceHintAction__QsS\+H {
  background: transparent;
  border: 1px solid #FEAE00;
  color: #FEAE00;
  padding: 8px 16px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.CatalogPage_priceHintAction__QsS\+H:hover { background: rgba(254,174,0,0.1); color: #FFC23A; }
@media (max-width: 768px) {
  .CatalogPage_priceHintBanner__-OGAY { flex-wrap: wrap; }
  .CatalogPage_priceHintLink__Esz28   { margin-left: 0; }
}

/* =========================================================================
 *  Mobile-only UI elements — hidden on desktop, shown ≤ 768 px.
 *  Built from the Figma "Catalog Mobile" reference:
 *    – Filter / Sort icon buttons (24×24, yellow stroke)
 *    – Filter drawer (slide-in from the right, fills viewport)
 *    – Backdrop scrim for the drawer
 * ===================================================================== */
.CatalogPage_mobileTools__hfObO     { display: none; }
.CatalogPage_mobileBackdrop__qRsfV  { display: none; }
.CatalogPage_mobileDrawer__vbEjI    { display: none; }
.CatalogPage_sortDropdownDesktop__\+peKe { display: contents; }
.CatalogPage_mobileSortMenu__qh2po  { display: none; }

/* =========================================================================
 *  MOBILE BREAKPOINT (≤ 768 px) — Figma "Catalog Mobile".
 *  -----------------------------------------------------------------------
 *  Spacings (per spec):
 *    • 12 px L/R page padding
 *    • Breadcrumb top   = 104 px from page top (sits right under header)
 *    • Breadcrumb font  = H Bold 12 (CATALOG accent yellow)
 *    • Heading "CATALOG"= H Bold 24, top gap 24
 *    • Search bar       = full-width × 36, font H Regular 14, icon 20×20
 *    • Found-row        = H Medium 12, sort/filter icons 24×24 on the right
 *    • Chip row         = horizontally scrollable, chips H Regular 12, h=34
 *    • Card             = 336 × 684 (incl. CTA), gap 24 between cards
 * ===================================================================== */
@media (max-width: 768px) {
  .CatalogPage_container__IGUXq { padding: 0 12px; }

  /* Breadcrumb under header (header height = 80; 104 - 80 = 24 padding) */
  .CatalogPage_breadcrumb__AFyn3 {
    padding-top: 24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  /* Title row collapses to single column */
  .CatalogPage_titleRow__IcpT0 {
    padding-top: 24px;
    gap: 24px;
    flex-direction: column;
    align-items: stretch;
  }
  .CatalogPage_title__3ByAK {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  /* Single-column layout: filter sidebar hidden, results take full width */
  .CatalogPage_grid__FRqOz {
    padding-top: 24px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }
  /* The first grid child is the desktop CatalogFilter — hide it entirely */
  .CatalogPage_grid__FRqOz > :first-child { display: none; }

  .CatalogPage_resultsCol__Hj0Vs { gap: 16px; }

  /* Results header: "FOUND X RESULTS" + sort/filter icons on one row,
   *  chips overflow into their own scrollable row below (order: 99). */
  .CatalogPage_resultsHeader__cRuIo {
    margin-top: 0;
    flex-wrap: wrap;
    gap: 12px;
  }
  .CatalogPage_resultsCount__8H\+5w {
    font-size: 12px;
    font-weight: 500;
    flex: 1 1 auto;
  }

  /* Hide the desktop SortDropdown wrapper on mobile — its menu doesn't
   *  match the Figma mobile spec.  Mobile uses our own sort/filter icons. */
  .CatalogPage_sortDropdownDesktop__\+peKe { display: none; }

  /* Mobile tools row — sort + filter icon buttons */
  .CatalogPage_mobileTools__hfObO {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .CatalogPage_mobileTools__hfObO button {
    width: 24px; height: 24px;
    background: transparent;
    border: 0; padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .CatalogPage_mobileTools__hfObO img { width: 24px; height: 24px; display: block; }
  .CatalogPage_mobileTools__hfObO button[aria-pressed="true"] img { filter: drop-shadow(0 0 4px rgba(254,174,0,0.6)); }

  /* Chip row — horizontally scrollable, chips h=34, font 12 */
  .CatalogPage_chipRow__4\+4kN {
    order: 99;                    /* push to its own row below the header */
    flex: 0 0 100%;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .CatalogPage_chipRow__4\+4kN::-webkit-scrollbar { display: none; }
  .CatalogPage_chip__bBxFl {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 400;
  }
  .CatalogPage_chip__bBxFl .CatalogPage_x__dBjP8 {
    width: 14px; height: 14px;
    font-size: 14px;
  }
  .CatalogPage_resetAll__ZUPg8 { flex: 0 0 auto; align-self: center; }

  /* Cards gap */
  .CatalogPage_cards__UpuNS { gap: 24px; }

  /* Show more — keep centred, smaller gap */
  .CatalogPage_showMoreWrap__BnOBA { padding-top: 24px; }
  .CatalogPage_showMore__yl5ul { font-size: 14px; }

  /* ---------- Backdrop scrim (used by sort bottom-sheet) ------------ */
  .CatalogPage_mobileBackdrop__qRsfV {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .CatalogPage_mobileBackdropOpen__H8oHZ { opacity: 1; pointer-events: auto; }

  /* ---------- Mobile filter sheet — slides UP from the bottom (rounded
   *  bottom-sheet with a drag handle, NOT fullscreen).
   *  Per Figma:
   *    • container takes ~85 vh from the bottom edge
   *    • border-radius 16 on top-left + top-right ONLY
   *    • 60 × 4 grey drag-handle pill at the very top, centered
   *    • header  "FILTERS" + ×
   *    • content scrolls vertically (CatalogFilter from web)
   *    • footer bar pinned to bottom: "RESET ALL" (text) + "APPLY FILTERS" (yellow)
   * ----------------------------------------------------------------- */
  .CatalogPage_mobileDrawer__vbEjI {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100vw;
    max-height: 85vh;
    background: #1A1B19;                       /* unified gray (matches Figma) */
    z-index: 1100;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  }
  .CatalogPage_mobileDrawerOpen__M8-xe { transform: translateY(0); }

  /* Drag handle — 60 × 4 grey pill (#555452), 14 px from top, centered.
   *  Sits on the same gray sheet background, no white halo. */
  .CatalogPage_mobileDrawer__vbEjI::before {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #555452;
    border-radius: 2px;
    margin: 14px auto 0 auto;
    flex: 0 0 auto;
  }

  .CatalogPage_mobileDrawerHeader__PosoO {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 16px;
    border-bottom: 1px solid #2A2A2A;          /* single-pixel separator */
    background: #1A1B19;                       /* same as sheet */
    flex: 0 0 auto;
  }
  .CatalogPage_mobileDrawerTitle__PH73X {
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
  }
  .CatalogPage_mobileDrawerClose__r2U7q {
    width: 32px; height: 32px;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Scrollable content area (CatalogFilter goes here) */
  .CatalogPage_mobileDrawerBody__ygJUQ {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #1A1B19;                       /* same unified gray */
  }

  /* Bottom action bar — pinned, two buttons.
   *  Layout: grid 1fr 197px → RESET ALL centered in left column,
   *  APPLY FILTERS fixed 197px on the right.
   *  RESET ALL  — H Medium 14, color #5E5E5E, underline.
   *  APPLY FILTERS — yellow 197 × 45, text H Medium 14, color #010101. */
  .CatalogPage_mobileDrawerFooter__qPKqa {
    display: grid;
    grid-template-columns: 1fr 197px;
    align-items: center;
    grid-column-gap: 16px;
    column-gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid #2A2A2A;
    background: #1A1B19;
    flex: 0 0 auto;
  }
  .CatalogPage_mobileDrawerReset__wo-Eh {
    justify-self: center;                      /* centered inside its 1fr column */
    background: transparent;
    border: 0;
    padding: 8px 4px;
    color: #5E5E5E;                            /* Figma grey */
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 500;                          /* Medium */
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
  }
  .CatalogPage_mobileDrawerApply__9Nakp {
    width: 197px;                              /* Figma */
    height: 45px;
    border: 0;
    border-radius: 4px;
    background: #FEAE00;
    color: #010101;                            /* pure black */
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 500;                          /* H Medium */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .CatalogPage_mobileDrawerApply__9Nakp:hover { background: #FFC83F; }
  /* The drawer hosts the existing CatalogFilter — re-show it inside the
   *  drawer (parent `.grid > :first-child { display: none }` would not
   *  apply since the drawer is rendered outside the grid). */
  .CatalogPage_mobileDrawer__vbEjI > :nth-child(2) { padding: 0; }

  /* ---------- Mobile sort sheet — slides UP from the bottom -----------
   *  Same visual language as the filter sheet:
   *    • gray background #1A1B19
   *    • 16 px top radius (bottom-anchored, so no bottom radius)
   *    • drag handle 60 × 4 (#555452), 14 px from top
   *    • header "SORT" + ×, single separator line below
   *    • options Mazzard H Regular 14, dividers between Figma groups
   *    • selected option has a yellow check-mark on the left
   * ----------------------------------------------------------------- */
  .CatalogPage_mobileSortMenu__qh2po {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #1A1B19;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 1100;
    padding: 0;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  }
  .CatalogPage_mobileSortMenuOpen__3Lvmo {
    display: block;
    transform: translateY(0);
  }
  /* Drag handle 60×4, identical to filter sheet */
  .CatalogPage_mobileSortMenu__qh2po::before {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #555452;
    border-radius: 2px;
    margin: 14px auto 0 auto;
  }
  .CatalogPage_mobileSortHeader__Xc-H\+ {
    display: flex;
    align-items: center;                /* X centered with SORT text */
    justify-content: space-between;
    padding: 16px 16px;                 /* gives ≈ 73 px total header w/ handle */
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 600;                   /* Figma: SemiBold */
    font-size: 18px;                    /* Figma: 18 */
    line-height: 21px;                  /* Figma row: 360 × 21 hug */
    text-transform: uppercase;
    color: #FFFFFF;
    border-bottom: 1px solid #2A2A2A;
    background: #1A1B19;
  }
  .CatalogPage_mobileSortHeader__Xc-H\+ > span { line-height: 21px; display: inline-flex; align-items: center; }
  .CatalogPage_mobileSortHeader__Xc-H\+ button {
    background: transparent;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  /* List wrapper — Figma "Sort mobile" frame is 328 × 336 with 16 px L/R
   *  padding, so the inner column is 296 wide.  We use the full width
   *  and let row padding do the spacing. */
  .CatalogPage_mobileSortList__YfuI6 {
    padding: 8px 16px 16px 16px;
    display: flex;
    flex-direction: column;
  }
  .CatalogPage_mobileSortOption__XCDUX {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: 0;
    color: #C8C8C8;
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 400;                   /* Figma: Regular */
    font-size: 14px;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    text-transform: capitalize;
  }
  .CatalogPage_mobileSortOption__XCDUX[data-active="true"] { color: #FFFFFF; }
  .CatalogPage_mobileSortOption__XCDUX:hover { background: rgba(255,255,255,0.04); }
  .CatalogPage_mobileSortCheck__dqqZd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: #FEAE00;
    flex-shrink: 0;
  }
  .CatalogPage_mobileSortCheckHidden__3AV8k { visibility: hidden; }
  .CatalogPage_mobileSortDivider__48U8K {
    height: 1px;
    background: #555452;          /* Figma grey line */
    border: 0;
    margin: 8px 0;
  }

  /* Per Figma "Catalog Mobile": 128 px gap from "Show More" button to
   * the top edge of the consultation section's gray background. */
  [data-testid="catalog-consultation-spacer"] { height: 128px !important; }
}

/* ──────────────────────────────────────────────────────────────
 *  Catalog left filter — Figma 1:1 (Vehicles Filter.png).
 *
 *  Container spec:
 *    • Fixed width    : 427 px  (height auto)
 *    • Background     : #1A1B19
 *    • Border-radius  : 4 px (cards/inputs/buttons)
 *    • Horizontal padding from text to edge : 32 px
 *    • Vertical block-gap : 24 px between major blocks
 *
 *  Typography:
 *    • Section header (SOURCE / TECHNICAL SPECS) — H SemiBold 14, white, uppercase.
 *    • Field label (Brand, Model, Year…)         — H Medium 14, white.
 *    • Input value / dropdown value              — H Regular 14, white.
 *    • Placeholder                               — #5E5E5E.
 * ───────────────────────────────────────────────────────────────── */
.CatalogFilter_filter__vmNiR {
  width: 100%;
  max-width: 427px;
  background: #1A1B19;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 32px 0;
  box-sizing: border-box;
  gap: 24px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 14px;
  color: #FFFFFF;
  min-width: 0;
  border-radius: 0;                          /* square corners — user spec */
}

/* ─── Vehicle type icons (top row) ─────────────────────────────────
 *  Figma spec @ 1920 / 427-px filter:
 *    • Outer padding 32 px left & right (32 + 32 = 64 px reserved).
 *    • Hit-zone of each card: 72.6 × 48 px, border-radius 4 px.
 *    • 5 cards × 72.6 = 363 px = exact (filter width 427 − 64 padding).
 *    • Icon inside: 32 × 32 (white default, black on active).
 *    • Active state: yellow #FEAE00 background over the whole 72.6×48.
 *  Responsive: cards use `flex:1 1 0; max-width:72.6px;` so on narrower
 *  filter widths (1440/1280) they shrink proportionally without
 *  overflowing or “squishing” the icon below its 32 × 32 footprint.
 * ───────────────────────────────────────────────────────────────── */
.CatalogFilter_iconsRow__F5-2J {
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 0;
  flex-wrap: nowrap;
}
.CatalogFilter_vehCard__XzBD5 {
  flex: 1 1;
  min-width: 0;
  max-width: 72.6px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background 120ms ease, color 120ms ease;
  box-sizing: border-box;
  outline: none;            /* remove default focus ring (blue border) */
  -webkit-tap-highlight-color: transparent;
}
.CatalogFilter_vehCard__XzBD5:focus,
.CatalogFilter_vehCard__XzBD5:focus-visible { outline: none; box-shadow: none; }
.CatalogFilter_vehCard__XzBD5:hover { background: rgba(254, 174, 0, 0.08); }
.CatalogFilter_vehCardActive__Z2xk1 {
  background: #FEAE00;
  color: #18181B;
}
.CatalogFilter_vehCardActive__Z2xk1:hover { background: #FEAE00; }
.CatalogFilter_vehIcon__bq-lj {
  display: block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 32px 32px;   mask-size: 32px 32px;
}

/* ─── Field blocks (label + control) ───────────────────────────── */
.CatalogFilter_block__3KpKY {
  display: flex;
  flex-direction: column;
  gap: 16px;                /* Figma: 16 px от label до control */
  padding: 0 clamp(16px, 1.67vw, 32px);
}
.CatalogFilter_label__du4Mh {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: #FFFFFF;
}

/* Two-column grid (Figma: From — To). */
.CatalogFilter_row2__Y\+MCj {
  display: grid;
  /* `minmax(0, 1fr)` instead of bare `1fr` so a column never grows past
     its allocated slot if its content (e.g. our combo input + chevron)
     has a min-content larger than the available width — otherwise the
     right-hand column would visibly overflow the filter sidebar, which
     is what the regression report showed. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  grid-column-gap: 12px;
  column-gap: 12px;
}

.CatalogFilter_textInput__RSq6a {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #4F4F4F;
  border-radius: 4px;
  padding: 0 14px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF;
  outline: none;
  text-align: center;
  transition: border-color 120ms ease;
}
.CatalogFilter_textInput__RSq6a::placeholder { color: #5E5E5E; transition: opacity 120ms ease; }
.CatalogFilter_textInput__RSq6a:hover  { border-color: #6B6B6B; }
.CatalogFilter_textInput__RSq6a:focus  { border-color: #FEAE00; }
/* Hide the placeholder once the field is focused so the user does not
 * appear to "type on top of" the From / To / 0 hints. Default browsers
 * keep the placeholder visible until the first keystroke; we drop it the
 * moment the input is focused for a cleaner editing UX. */
.CatalogFilter_textInput__RSq6a:focus::placeholder { opacity: 0; }

/* Slider sits 16 px below the last form-control of the same block
 * (.row2 → .sliderWrap == 4 px top because .block gap=12 + 4 = 16).
 * We override the .block gap right above the slider to exactly 4 px,
 * because the slider container is 24 px tall and the visual centre of
 * its thumb is 12 px from its top → 12 + 4 = 16 from the input bottom. */
.CatalogFilter_block__3KpKY > .CatalogFilter_sliderWrap__BVDVg {
  margin-top: 4px;
}
.CatalogFilter_sliderWrap__BVDVg {
  width: 100%;
}

/* ─── Damage segmented control ─────────────────────────────────── */
.CatalogFilter_damageRow__fewOA {
  display: flex;
  align-items: stretch;
  margin: 0 clamp(16px, 1.67vw, 32px);
  gap: 0;
  height: 45px;
  border-radius: 4px;
  overflow: hidden;
  background: #1A1B19;
}
.CatalogFilter_dmgBtn__Hf\+Wk {
  flex: 1 1; height: 45px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500; font-size: 14px; line-height: 1;
  text-transform: uppercase;
  background: transparent; border: 0; color: #6B6B6B;
  cursor: pointer; box-sizing: border-box; min-width: 0;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.CatalogFilter_dmgBtn__Hf\+Wk:first-child { border-radius: 4px 0 0 4px; }
.CatalogFilter_dmgBtn__Hf\+Wk:last-child  { border-radius: 0 4px 4px 0; }
.CatalogFilter_dmgBtn__Hf\+Wk:hover       { color: #B0B0B0; }
.CatalogFilter_dmgBtn__Hf\+Wk:first-child.CatalogFilter_dmgActiveOk__U9T73 {
  background: rgba(0, 178, 121, 0.10);
  color: #00B279;
  box-shadow: inset -4px 0 0 0 #00B279;
}
.CatalogFilter_dmgBtn__Hf\+Wk:last-child.CatalogFilter_dmgActiveBad__ziETz {
  background: rgba(243, 67, 76, 0.10);
  color: #F3434C;
  box-shadow: inset 4px 0 0 0 #F3434C;
}

/* ─── Section divider + collapsible header ─────────────────────── */
.CatalogFilter_divider__tmasP {
  border: 0;
  border-top: 1px solid #2C2D2A;
  margin: 0 clamp(16px, 1.67vw, 32px);
}
.CatalogFilter_sectionHeader__8Dc\+o {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(16px, 1.67vw, 32px);
  background: transparent;
  border: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;            /* H Bold (Figma) */
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  text-align: left;
}
.CatalogFilter_sectionCaret__\+j0pO {
  width: 17px;
  height: 17px;
  transition: transform 200ms ease;
  flex: 0 0 17px;
}
.CatalogFilter_sectionCaretClosed__iCit3 { transform: rotate(-90deg); }

/* ─── Pills (Country USA/Korea, Fuel, Transmission) ──────────────
 *  Figma:
 *    • Card adapts to text content (no fixed width).
 *    • Padding 7 px top/bottom, 16 px left/right.
 *    • Border-radius 20 px, 1 px border.
 *    • Font: Mazzard H Regular 14 / line-height 1.
 *    • Row gap: 8 px (so 4 fuel pills line up in a single row inside
 *      the 427-px filter — Gasoline / Diesel / Hybrid / EV).
 *    • Inactive : border #4F4F4F, color #6B6B6B.
 *    • Active   : bg #FEAE00, border #FEAE00, color #18181B.
 *  Note: 16 px gap from the section label down to the pill row is
 *  provided by `.block { gap: 12px }` + 4 px on the label → ~16.
 * ─────────────────────────────────────────────────────────────── */
.CatalogFilter_pillRow__vhlDr {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.CatalogFilter_pill__zeeR5 {
  height: auto;
  padding: 7px 16px;
  background: transparent;
  color: #6B6B6B;
  border: 1px solid #4F4F4F;
  border-radius: 20px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;       /* H Regular per Figma */
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  outline: none;
}
.CatalogFilter_pill__zeeR5:hover { border-color: #6B6B6B; color: #B0B0B0; }
.CatalogFilter_pill__zeeR5:focus-visible { border-color: #FEAE00; }
.CatalogFilter_pillActive__6xUOi {
  background: #FEAE00;
  border-color: #FEAE00;
  color: #18181B;
}
.CatalogFilter_pillActive__6xUOi:hover { background: #FEAE00; color: #18181B; }

/* ─── Custom checkbox rows ─────────────────────────────────────── */
.CatalogFilter_checkRow__iX8eH {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.CatalogFilter_checkLabel__dEGSM {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.CatalogFilter_checkbox__p9U7I {
  width: 16px;
  height: 16px;
  border: 1px solid #5E5E5E;
  border-radius: 3px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  transition: border-color 120ms ease, background 120ms ease;
}
.CatalogFilter_checkboxOn__1c0cb {
  border-color: #FEAE00;
  background: rgba(254, 174, 0, 0.10);
}
.CatalogFilter_checkText__1LKXF {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #6B6B6B;
  transition: color 120ms ease;
}
.CatalogFilter_checkTextOn__jdAbs { color: #FFFFFF; }

/* ──────────────────────────────────────────────────────────────
 *  CustomDropdown — Figma 1:1 (Catalog filter / Brand dropdown clicked).
 *
 *  Trigger (closed)     : 44 px tall, 1 px #555452, radius 4, padding
 *                         0 16 px, font Mazzard H 14 Regular.
 *  Trigger (open)       : same box BUT chevron hidden, contains a text
 *                         <input> that doubles as the search field.
 *  Menu                 : top: calc(100% + 9px), same width, bg #222220,
 *                         border 1 #555452, radius 4, max-height ~244 px.
 *  Option row           : 32 px tall, padding 0 16 px, gap 16 px,
 *                         font 14 Regular.
 *  Checkmark slot       : 24 px wide, holds an 9×6 yellow ✓.
 *  Colors               :
 *      • Border         : #555452
 *      • Menu bg        : #222220
 *      • Selected text  : #D6D6D6
 *      • Unselected text: #949494
 *      • Placeholder    : #5E5E5E
 *      • Check / accent : #FEAE00
 * ────────────────────────────────────────────────────────────── */
.CustomDropdown_wrap__FK1HD {
  position: relative;
  width: 100%;
}

/* ─── Trigger ──────────────────────────────────────────────────── */
.CustomDropdown_trigger__-rJky {
  width: 100%;
  height: 44px;
  background: transparent;
  border: 1px solid #555452;
  border-radius: 4px;
  padding: 0 14px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms ease;
  text-align: left;
  color: #D6D6D6;
  box-sizing: border-box;
}
.CustomDropdown_trigger__-rJky:hover           { border-color: #7A7A78; }
.CustomDropdown_trigger__-rJky:focus-visible   { border-color: #FEAE00; }
.CustomDropdown_trigger__-rJky:disabled        { opacity: 0.45; cursor: not-allowed; }
.CustomDropdown_triggerOpen__Ay7Kk             { border-color: #FEAE00; cursor: text; }

.CustomDropdown_value__ICNCI       { color: #FFFFFF; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.CustomDropdown_placeholder__zptm7 { color: #FFFFFF; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.CustomDropdown_chevron__ykPq- {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  transition: transform 150ms ease;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Search input that REPLACES the trigger label when the menu is open. */
.CustomDropdown_searchInput__Moxze {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #D6D6D6;
  caret-color: #FEAE00;
}
.CustomDropdown_searchInput__Moxze::placeholder { color: #5E5E5E; }

/* ─── Menu (popover) ──────────────────────────────────────────── */
.CustomDropdown_menu__XltA- {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #222220;
  border: 1px solid #555452;
  border-radius: 4px;
  max-height: 244px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.CustomDropdown_optionsScroll__N-GGB {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.CustomDropdown_optionsScroll__N-GGB::-webkit-scrollbar       { width: 6px; }
.CustomDropdown_optionsScroll__N-GGB::-webkit-scrollbar-thumb { background: #3A3A38; border-radius: 3px; }
.CustomDropdown_optionsScroll__N-GGB::-webkit-scrollbar-track { background: transparent; }

/* ─── Option row ──────────────────────────────────────────────── */
.CustomDropdown_option__IxAF4 {
  width: 100%;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  background: transparent;
  border: 0;
  padding: 0 16px;
  text-align: left;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #949494;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  outline: none;
}
.CustomDropdown_option__IxAF4:hover         { background: rgba(255, 255, 255, 0.04); color: #D6D6D6; }
.CustomDropdown_option__IxAF4:focus-visible { background: rgba(255, 255, 255, 0.04); }
.CustomDropdown_optionSelected__05ANy       { color: #D6D6D6; }

/* "Currently no listings" — option exists in the static catalogue but
 * has zero matching items in the live inventory. Rendered dimmed but
 * still clickable so users understand the catalogue scope. */
.CustomDropdown_optionDimmed__7BpEb {
  opacity: 0.42;
}
.CustomDropdown_optionDimmed__7BpEb:hover {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.03);
}

/* Checkmark column — always reserved so labels line up whether the
 * option is selected or not (variant="checkmark"). */
.CustomDropdown_checkSlot__h6kSI {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 9px;          /* width of the tick glyph itself */
  width: 9px;
  height: 14px;
}

/* Square checkbox — variant="checkbox" (Model dropdown). 12×12 with
 * 1 px border, ~1 px corner radius. Selected → yellow border + yellow
 * tick. Unselected → grey border, empty. */
.CustomDropdown_checkbox__b\+7Ew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1px solid #555452;
  border-radius: 1.5px;
  background: transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
  box-sizing: border-box;
}
.CustomDropdown_checkboxOn__6rN7y {
  border-color: #FEAE00;
}

.CustomDropdown_optionLabel__jIr9Z {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}

/* ─── Empty state (no search results / no models yet) ────────── */
.CustomDropdown_emptyState__kyCKz {
  padding: 12px 16px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #949494;
  text-align: center;
}

/* ─── Bottom action area (Clear selection link button) ───────── */
.CustomDropdown_actionsRow__9ZXJR {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  flex: 0 0 40px;
  border-top: 1px solid #555452;
  padding: 0 16px;
}
.CustomDropdown_clearBtn__go5sl {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #FEAE00;
  cursor: pointer;
  outline: none;
  letter-spacing: 0;
  transition: color 120ms ease, opacity 120ms ease;
}
.CustomDropdown_clearBtn__go5sl:hover         { color: #FFC23A; }
.CustomDropdown_clearBtn__go5sl:focus-visible { text-decoration: underline; }

/* Disabled wrap (no brand selected → Model dropdown is greyed out). */
.CustomDropdown_disabled__0ZaAF .CustomDropdown_trigger__-rJky        { cursor: not-allowed; }
.CustomDropdown_disabled__0ZaAF .CustomDropdown_placeholder__zptm7    { color: #4F4F4F; }

/* ──────────────────────────────────────────────────────────────
 *  RangeSlider — Figma 1:1, dual-thumb.
 *
 *  Container : 24 px tall (== thumb height)
 *  Rail line : 2 px gray  #4F4F4F, vertically CENTERED (top:50%)
 *  Fill line : 2 px yellow #FEAE00, vertically CENTERED (top:50%)
 *  Thumb     : 22.99 × 24 px OVAL, solid #FEAE00, no border, no shadow.
 *              Rail passes through the middle of the thumb (i.e. thumb
 *              extends 11 px above and 11 px below the rail line).
 * ────────────────────────────────────────────────────────────── */
.RangeSlider_slider__icnzL {
  position: relative;
  height: 24px;
  width: 100%;
  display: block;
  /* No extra margin — parent controls 16 px top / 24 px bottom gap. */
}

/* Rail + active fill — both rest exactly on the vertical center line. */
.RangeSlider_rail__fu3N3,
.RangeSlider_fill__kvk6v {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 1px;
}
.RangeSlider_rail__fu3N3 { left: 0; right: 0; background: #4F4F4F; }
.RangeSlider_fill__kvk6v { background: #FEAE00; z-index: 1; }

/* Native range inputs — full-bleed, transparent, pointer-events only on
 * the thumbs themselves. */
.RangeSlider_input__M9aby {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
}

/* Thumb — oval 22.99 × 24, yellow, no border. Rail crosses the center. */
.RangeSlider_input__M9aby::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22.99px;
  height: 24px;
  border-radius: 999px;     /* fully rounded pill / oval */
  background: #FEAE00;
  border: 0;
  box-shadow: none;
  cursor: grab;
  pointer-events: auto;
  margin-top: 0;            /* center on track (Chrome) */
  -webkit-transition: transform 100ms ease;
  transition: transform 100ms ease;
}
.RangeSlider_input__M9aby::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.06);
}
.RangeSlider_input__M9aby::-moz-range-thumb {
  width: 22.99px;
  height: 24px;
  border-radius: 999px;
  background: #FEAE00;
  border: 0;
  box-shadow: none;
  cursor: grab;
  pointer-events: auto;
  -moz-transition: transform 100ms ease;
  transition: transform 100ms ease;
}
.RangeSlider_input__M9aby::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.06);
}

/* Make the runnable-track tall enough so the thumb stays centered. */
.RangeSlider_input__M9aby::-webkit-slider-runnable-track {
  background: transparent;
  height: 24px;
  border: 0;
}
.RangeSlider_input__M9aby::-moz-range-track {
  background: transparent;
  height: 24px;
  border: 0;
}

/* Stack: hi input on top so its thumb is always reachable. */
.RangeSlider_inputLo__fEzMU { z-index: 2; }
.RangeSlider_inputHi__pfEU7 { z-index: 3; }

/**
 * RangeStepSelect.module.css — visual rules mirror the open-state of
 * CustomDropdown / YearSelect so the combo (input + chevron + popover)
 * sits inside the catalog filter without breaking the existing rhythm.
 */

.RangeStepSelect_wrap__mId2s {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* Allow flex children (.input) to shrink below their intrinsic
     min-content so the grid column from `.row2 { grid-template-columns:
     1fr 1fr }` doesn't get pushed wider than the available column slot
     (which used to overflow the filter panel and create the broken
     layout users reported). */
  min-width: 0;
  /* Match the original `.textInput` height so the slider sits at the
     same Y offset and the block rhythm is unchanged. */
  height: 48px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #4F4F4F;
  border-radius: 4px;
  transition: border-color 120ms ease;
}
.RangeStepSelect_wrap__mId2s:hover { border-color: #6B6B6B; }
.RangeStepSelect_wrapOpen__\+x6KA { border-color: #FEAE00; }

.RangeStepSelect_input__OSWk0 {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  /* Leave breathing room on both sides — the chevron eats the right
     edge, so we keep symmetric optical centring via the text-align. */
  padding: 0 4px 0 12px;
  background: transparent;
  border: 0;
  outline: none;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--bibi-font, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.RangeStepSelect_input__OSWk0::placeholder { color: #5E5E5E; transition: opacity 120ms ease; }
.RangeStepSelect_input__OSWk0:focus::placeholder { opacity: 0; }

.RangeStepSelect_chevron__U2zkb {
  /* Narrower than 36 px so the input keeps most of the column width.
     The chevron is only an affordance; the typeable input remains the
     primary control. */
  flex: 0 0 26px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #B5B4B0;
  cursor: pointer;
  transition: color 0.16s ease;
  padding: 0 6px 0 0;
}
.RangeStepSelect_chevron__U2zkb:hover { color: #FEAE00; }
.RangeStepSelect_chevronOpen__ve29R { color: #FEAE00; }
.RangeStepSelect_chevronOpen__ve29R svg { transform: rotate(180deg); transition: transform 0.18s ease; }

/* Popover menu — same chrome as CustomDropdown's open state so the
   overall filter UI reads as a single design language. */
.RangeStepSelect_menu__fMJpF {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: #161616;
  border: 1px solid #555452;
  border-radius: 4px;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.RangeStepSelect_option__rS8Gn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #D6D6D6;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--bibi-font, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.RangeStepSelect_option__rS8Gn:hover { background-color: rgba(254, 174, 0, 0.08); color: #FFFFFF; }
.RangeStepSelect_optionActive__HsZmf { color: #FEAE00; }
.RangeStepSelect_optionActive__HsZmf::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FEAE00;
  margin-right: 10px;
  flex: 0 0 6px;
}
.RangeStepSelect_optionLabel__9nB0i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================================
 *  VehicleCardRow — Figma 1:1 (active & sold variants).
 *
 *  Verified user spacings (taken from Figma annotations + verbal description):
 *    Card width            1263 (max)        — height 467 (40 + 387 + 40)
 *    Card padding          40 v / 24 h
 *    Image                 518 × 387 landscape (fills card width left)
 *    Image ↔ info gap      24
 *    Title  ↔ LOT          16
 *    LOT    ↔ VIN          12
 *    VIN    ↔ Mileage      151    (Figma)
 *    Spec row-gap          16
 *    Spec → Price gap      100    (horizontal)
 *    Price label ↔ value   24     (column-gap inside priceBlock)
 *    Price row-gap         16
 *    DataRow ↔ CTA         88
 *    Action icons          32 × 32, gap 16
 *    Copy icon             16 × 16
 *    CTA                   327 × 45, radius 4
 *    Card radius           0
 * ====================================================================== */

/* ----- CARD shell ---------------------------------------------------- *
 *  Card height = image height (portrait 518×783 at 1920).  Info column
 *  stretches vertically to match → topGroup pinned to top, dataRow pinned
 *  to bottom via justify-content: space-between on `.info`.
 *  Everything (typography, image width, internal gaps) scales fluidly with
 *  the viewport via clamp()+cqw, BUT the image↔info gap is fixed at 24 px
 *  per Figma spec, exactly as the user asked.
 * --------------------------------------------------------------------- */
.VehicleCardRow_card__PfFYL {
  container-type: inline-size;
  container-name: vcrcard;
  width: 100%;
  max-width: 1263px;
  background: #1A1B19;
  /* Unified card radius = 8 px (user spec — matches all other cards). */
  border-radius: 8px;
  display: flex;
  align-items: stretch;
  gap: 24px;                                /* Figma: 24 px — image ↔ info column, FIXED */
  /* Figma-strict padding: 40 px top + bottom, 24 px left + right.
   * Previously used clamp() that resolved to 28 px horizontal at the
   * 1263 px content width — annotated screenshot from the user shows
   * it must read 24 / 40 exactly. Mobile shrink handled by media
   * queries at the bottom of this file. */
  padding: 40px 24px;
  box-sizing: border-box;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  color: #FFFFFF;
  cursor: pointer;
  border: 0;
  outline: 1px solid transparent;
  transition: outline-color 150ms ease;
  min-width: 0;
}
.VehicleCardRow_card__PfFYL:hover { outline-color: #FEAE00; }

/* ----- IMAGE — Figma aspect-ratio 518 × 387 (landscape) --------------
 *  Width scales linearly with the card (42.92cqw of content box → 518 @1263).
 *  Height is locked to the Figma landscape aspect ratio 518/387 (≈ 4:3),
 *  which matches the natural framing of real auction photos. With
 *  `object-fit: cover` we fill the box edge-to-edge — no more black bars
 *  top/bottom that were caused by the previous 518/783 portrait box on
 *  landscape source images.
 *
 *  Total card height target = 387 (image) + 40 + 40 (vertical padding) = 467 px
 *  at the 1263 px width — exactly the Figma frame size.
 * --------------------------------------------------------------------- */
.VehicleCardRow_imageWrap__eQ9SL {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 42.92cqw, 518px);    /* 518 @1263 (content-box 1207) */
  aspect-ratio: 518 / 387;                 /* Figma landscape — fills the card cleanly */
  align-self: stretch;                     /* image dictates card height */
  overflow: hidden;
  background: #0F0F0F;
  border-radius: 0;                         /* square inner image (user spec) */
}
.VehicleCardRow_image__ILflj { width: 100%; height: 100%; object-fit: cover; display: block; }
.VehicleCardRow_placeholder__KUN9B {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #2B2B2B;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700; font-size: 22px; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(135deg, #161616 0%, #1F1F1F 100%);
}

/* ─── SOLD overlay ─────────────────────────────────────────────────
 *  Figma annotation:
 *    • background    : #00000099  (60% black scrim over image)
 *    • check icon    : 80×80 (centered, white)
 *    • "SOLD"        : Mazzard H SemiBold (600), 36 px, uppercase, white
 *    • subtitle      : Mazzard H Medium (500), 14 px, white
 *    • gap icon→SOLD : ~16 px  (visual)
 *    • gap SOLD→sub  : 8 px    (Figma)
 *    • Stack         : vertically centered
 * --------------------------------------------------------------- */
.VehicleCardRow_soldOverlay__YbruZ {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);          /* #00000099 — 60 % black */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  pointer-events: none;                     /* clicks still hit card; CTA exempted via stopPropagation */
}
.VehicleCardRow_soldCheck__PG9kg {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  display: block;
  -webkit-user-select: none;
          user-select: none;
}
.VehicleCardRow_soldTitle__nzHP8 {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;                         /* SemiBold per Figma */
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #FFFFFF;
}
.VehicleCardRow_soldSub__obqlT {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                         /* Medium per Figma */
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;                     /* original-case: "This vehicle has been sold" */
  color: #FFFFFF;
  text-align: center;
}

/* ----- INFO column --------------------------------------------------- *
 *  The image is portrait 518 × 783 px (Figma).  The info column stretches
 *  vertically to match the image height via align-items:stretch on the
 *  card flex row.  justify-content: space-between distributes content:
 *    • topGroup  (title + LOT + VIN)  — pinned to the TOP
 *    • dataRow   (specs + price + CTA) — pinned to the BOTTOM
 *  This eliminates the previous "empty space on the right" problem the
 *  user reported on screenshot 1: the CTA now sits flush with the bottom
 *  of the image, and the specs row floats just above it.
 * --------------------------------------------------------------------- */
.VehicleCardRow_info__ZHlgo {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;         /* topGroup top, dataRow bottom */
  align-self: stretch;                    /* fill card height (= image height) */
  min-width: 0;
  gap: clamp(24px, 4cqw, 48px);           /* min gap topGroup ↔ dataRow */
}

/* TOP GROUP: title + LOT/VIN (pinned to top by natural order) -------- */
.VehicleCardRow_topGroup__nVPdX {
  display: flex;
  flex-direction: column;
}

/* HEADER: title + action icons --------------------------------------- */
.VehicleCardRow_topRow__\+IsoZ {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.VehicleCardRow_title__RyoOy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(18px, 1.99cqw, 24px);   /* fluid: 24 @1920 → 18 @1280 */
  line-height: 1;
  text-transform: capitalize;
  color: #FFFFFF;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.VehicleCardRow_actionIcons__LMuij {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.VehicleCardRow_actionBtn__OA8Q6 {
  width: 32px; height: 32px;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: opacity 120ms ease, transform 120ms ease;
}
.VehicleCardRow_actionBtn__OA8Q6:hover { transform: scale(1.06); }
.VehicleCardRow_actionBtn__OA8Q6:disabled { cursor: default; }
.VehicleCardRow_actionIcon__m0nBM { width: 32px; height: 32px; display: block; }
.VehicleCardRow_actionBtnActive__pLM1n .VehicleCardRow_actionIcon__m0nBM { filter: drop-shadow(0 0 4px rgba(254,174,0,0.7)); }
.VehicleCardRow_actionBtnDisabled__f\+Hkq { opacity: .35; cursor: default; }
.VehicleCardRow_actionBtnDisabled__f\+Hkq:hover { transform: none; }
.VehicleCardRow_actionBtnDisabled__f\+Hkq .VehicleCardRow_actionIcon__m0nBM { filter: grayscale(1) brightness(.7); }

/* IDENTIFIERS (LOT, VIN) -------------------------------------------- */
.VehicleCardRow_identifiers__YDdZ3 {
  margin-top: clamp(12px, 1.33cqw, 16px);  /* Title → LOT — fluid 16→12 */
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.99cqw, 12px);          /* LOT → VIN — fluid 12→8 */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: clamp(12px, 1.16cqw, 14px);   /* fluid 14→12 */
  line-height: 1;
  color: #B0B0B0;
}
.VehicleCardRow_idLine__Grpr0 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.VehicleCardRow_idLine__Grpr0 .VehicleCardRow_copy__AKiB7 {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
}
.VehicleCardRow_idLine__Grpr0 .VehicleCardRow_copy__AKiB7 img { width: 16px; height: 16px; display: block; }

/* DATA ROW: specs (left) + right column (price + CTA) --------------
 *  Use a CSS grid so the right column has a FIXED start position
 *  regardless of how wide the spec values are (e.g. "FRONT-WHEEL DRIVE"
 *  vs "ALL WHEEL DRIVE").  Previously a flex layout with
 *  `min-width: max-content` on `.specBlock` let the spec column grow
 *  with the content, which in turn shifted `.rightCol` (and therefore
 *  the CTA button) several pixels to the right on cards with longer
 *  strings.  Grid keeps the CTA's right edge nailed to the card edge
 *  on every row.
 * ------------------------------------------------------------------ */
.VehicleCardRow_dataRow__3i0rJ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 27.09cqw, 327px);
  grid-column-gap: clamp(20px, 8.28cqw, 100px);
  column-gap: clamp(20px, 8.28cqw, 100px);
  align-items: stretch;
  min-width: 0;
}

/* ----- RIGHT COL (price + CTA) ----------------------------------- *
 *  Ширина = ширина CTA (Figma 327 @1263). Контент выровнен по левому
 *  краю → Current Rate / Auction Date начинаются под левым краем кнопки.
 *  justify-content: space-between → priceBlock сверху, CTA снизу,
 *  низ CTA = низ rightCol = низ specs (= низ картинки).
 * ----------------------------------------------------------------- */
.VehicleCardRow_rightCol__ZrhBz {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(220px, 27.09cqw, 327px);
  align-items: flex-start;                /* contents left-aligned */
  justify-content: space-between;         /* price top, CTA bottom */
  min-width: 0;
}

.VehicleCardRow_specBlock__exTZD {
  display: grid;
  grid-template-columns: -webkit-max-content -webkit-max-content;
  grid-template-columns: max-content max-content;
  grid-auto-rows: auto;
  grid-column-gap: clamp(12px, 3.6cqw, 56px);
  column-gap: clamp(12px, 3.6cqw, 56px);
  grid-row-gap: clamp(10px, 1.33cqw, 16px);
  row-gap: clamp(10px, 1.33cqw, 16px);     /* fluid 16→10 */
  align-items: baseline;
  /* No min-width: max-content — would force the spec column wider when a
     value like "FRONT-WHEEL DRIVE" is longer, shifting .rightCol to the
     right (CTA button shift bug).  The grid track minmax(0, 1fr) above
     already gives `.specBlock` enough room. */
  min-width: 0;
}

.VehicleCardRow_priceBlock__MU4rg {
  display: grid;
  grid-template-columns: -webkit-max-content -webkit-max-content;
  grid-template-columns: max-content max-content;
  grid-auto-rows: auto;
  grid-column-gap: clamp(16px, 1.99cqw, 24px);
  column-gap: clamp(16px, 1.99cqw, 24px);  /* fluid 24→16 */
  grid-row-gap: clamp(10px, 1.33cqw, 16px);
  row-gap: clamp(10px, 1.33cqw, 16px);
  align-items: baseline;
  align-content: start;
  flex: 0 0 auto;
}

/* SPEC label / value ------------------------------------------------- */
.VehicleCardRow_specLabel__KIiwC {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(12px, 1.16cqw, 14px);   /* fluid 14→12 */
  line-height: 1;
  text-transform: capitalize; color: #FFFFFF;
  white-space: nowrap;
}
.VehicleCardRow_specValue__PWdyX {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(12px, 1.16cqw, 14px);   /* fluid 14→12 */
  line-height: 1;
  text-transform: uppercase;
  color: #FEAE00;
  white-space: nowrap;
}

/* PRICE label / value ----------------------------------------------- */
.VehicleCardRow_priceLabel__5rVFf {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(12px, 1.16cqw, 14px);
  line-height: 1;
  text-transform: capitalize; color: #FFFFFF;
  white-space: nowrap;
}
.VehicleCardRow_priceValue__QrLP6 {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(16px, 1.66cqw, 20px);   /* price stays slightly larger: 20→16 */
  line-height: 1;
  color: #FEAE00;
  white-space: nowrap;
}
.VehicleCardRow_priceMuted__wa4Tq { color: #514F4C; }

/* SOLD-state muting for the LEFT spec block (Mileage / Engine / Drive /
 * Damage / Condition / Auction). When the vehicle is marked as sold, the
 * card's specs are no longer "live" data the buyer can act on, so we drop
 * both the label and value into the same muted grey (#514F4C) used by the
 * sold-price / sold-date pair on the right. The CTA button ("Find similar
 * vehicles") stays at full brightness — that's the only actionable element
 * for sold listings. */
.VehicleCardRow_specBlockMuted__P6AL2 .VehicleCardRow_specLabel__KIiwC,
.VehicleCardRow_specBlockMuted__P6AL2 .VehicleCardRow_specValue__PWdyX {
  color: #514F4C;
}
.VehicleCardRow_dateValue__-IEr1 {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(12px, 1.16cqw, 14px);
  color: #FEAE00; line-height: 1; text-transform: uppercase;
  white-space: nowrap;
}
.VehicleCardRow_dateMuted__XqxUY {
  color: #514F4C;
  text-transform: none;
}

/* CTA — fluid height & padding follow card scaling. */
.VehicleCardRow_cta__lmpTE {
  width: 100%;
  height: clamp(36px, 3.73cqw, 45px);      /* fluid 45→36 */
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(12px, 1.16cqw, 14px);
  text-transform: uppercase;
  background: #FEAE00;
  color: #18181B;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 10px clamp(12px, 1.66cqw, 20px);
  letter-spacing: .02em;
  box-sizing: border-box;
  transition: background-color 120ms ease;
  white-space: nowrap;
}
.VehicleCardRow_cta__lmpTE:hover { background: #FFC83F; }

/* `.specItem` is a transparent wrapper on desktop: each (label + value)
 * pair flows directly into the parent grid (`.specBlock` / `.priceBlock`),
 * preserving the original Figma 2-column label/value layout.  On mobile
 * the wrapper turns into a flex column so each cell becomes a label-on-top
 * / value-below tile inside a 2-col mobile grid. */
.VehicleCardRow_specItem__rHMeC { display: contents; }
.VehicleCardRow_priceItem__TwPBu { /* mobile-only override */ min-width: 0; }
.VehicleCardRow_dateItem__RvqtK  { /* mobile-only override */ min-width: 0; }
.VehicleCardRow_mobileSeparator__ohp\+f { display: none; }

/* ----- AUCTION COUNTDOWN CHIP ---------------------------------------
 *  Figma "Vehicle Card (Mobile)":
 *    • position: absolute, 12 px from top + left of the image
 *    • background #FEAE00, text #000, H Medium 12
 *    • padding 5 v / 8 h, gap 4, border-radius 4
 *    • hugs content (≈100 × 24 for "1d: 4h: 35m")
 * ------------------------------------------------------------------ */
.VehicleCardRow_timerChip__wdzpc {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 138px;                         /* Figma spec — fixed 138 × 32 */
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: #FEAE00CC;                /* #FEAE00 @ 80 % opacity (Figma) */
  color: #000000;
  border-radius: 0;                     /* square corners (user spec) */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  box-sizing: border-box;
}
.VehicleCardRow_timerChip__wdzpc svg,
.VehicleCardRow_timerChip__wdzpc img { flex: 0 0 auto; width: 18px; height: 18px; display: block; }


/* =========================================================================
 *  Adaptive scaling — narrow card containers (MacBook 13"/14")
 *  -----------------------------------------------------------------------
 *  Fluid typography above already handles 1280–1920 nicely.  We keep two
 *  light @container fall-backs ONLY for the row gap and right-column width
 *  to guarantee no overflow when specs + price column compete for space.
 *  Image width and aspect-ratio are NOT touched — image keeps its Figma
 *  shape on all desktops.  Mobile (<1024 px) is intentionally out of scope.
 * ===================================================================== */
@container vcrcard (max-width: 1000px) {
  .VehicleCardRow_dataRow__3i0rJ  { gap: clamp(16px, 4cqw, 100px); }
  .VehicleCardRow_rightCol__ZrhBz { width: clamp(200px, 27.09cqw, 327px); }
}

@container vcrcard (max-width: 820px) {
  .VehicleCardRow_dataRow__3i0rJ  { gap: clamp(12px, 2.5cqw, 100px); }
  .VehicleCardRow_rightCol__ZrhBz { width: clamp(180px, 27.09cqw, 327px); }
}

/* =========================================================================
 *  BG (Bulgarian) adaptive overrides — labels in cyrillic ("Пробег",
 *  "Двигател", "Задвижване") are 30–50% wider than the English ones, so
 *  the specBlock grid + the dataRow gap need to shrink. EN baseline is
 *  preserved verbatim.
 * ======================================================================= */
html[lang="bg"] .VehicleCardRow_dataRow__3i0rJ {
  gap: clamp(12px, 2cqw, 48px);
}
html[lang="bg"] .VehicleCardRow_specBlock__exTZD {
  column-gap: clamp(8px, 2cqw, 32px);
  row-gap: clamp(8px, 1.16cqw, 14px);
}
html[lang="bg"] .VehicleCardRow_priceBlock__MU4rg {
  column-gap: clamp(10px, 1.16cqw, 18px);
}
html[lang="bg"] .VehicleCardRow_specLabel__KIiwC,
html[lang="bg"] .VehicleCardRow_specValue__PWdyX,
html[lang="bg"] .VehicleCardRow_priceLabel__5rVFf {
  font-size: clamp(11px, 1.04cqw, 13px);
}

/* =========================================================================
 *  MOBILE LAYOUT (≤ 640 px viewport) — Figma "Catalog Mobile" reference.
 *  -----------------------------------------------------------------------
 *  Card 336 × 684 (image 336 × 240, fills card width).
 *  Action icons (compare, favourite) overlay the image at top-right
 *  (24 × 24, gap 12).  Share icon hidden on mobile per Figma.
 *  Title H SemiBold 20.  LOT/VIN H Regular 12, copy icon 14 × 14.
 *  Gray separator (#3A3A3A) between identifiers and specs.
 *  Specs: 2-col × 4-row grid (Mileage|Engine, Drive|Damage, Condition|Auction,
 *  Auction Date|Current Rate).  Each cell = label (H Regular 14, gray) on top
 *  + value (H Medium 14 yellow) below, gap 6 px.  Current Rate is H Medium 24.
 *  CTA full-width below, H Medium 14, height ~45.
 * ===================================================================== */
@media (max-width: 640px) {
  .VehicleCardRow_card__PfFYL {
    position: relative;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #1A1B19;
    border-radius: 8px;
    overflow: hidden;
    align-items: stretch;
  }
  .VehicleCardRow_card__PfFYL:hover { outline-color: transparent; }

  /* IMAGE — full card width, aspect 336:240 (≈ 1.4) */
  .VehicleCardRow_imageWrap__eQ9SL {
    width: 100%;
    aspect-ratio: 336 / 240;
    align-self: auto;
    border-radius: 0;                       /* square inner image (user spec) */
  }
  .VehicleCardRow_image__ILflj { object-fit: cover; }

  /* ACTION ICONS — overlay top-right of the image, 24×24 each, gap 12.
   *  We re-parent visually via absolute positioning so the JSX order stays
   *  desktop-compatible.  Share is hidden on mobile (Figma shows only the
   *  compare + favourite glyphs). */
  .VehicleCardRow_actionIcons__LMuij {
    position: absolute;
    top: 12px;
    right: 12px;
    gap: 12px;
    z-index: 2;
  }
  .VehicleCardRow_actionBtn__OA8Q6 { width: 24px; height: 24px; background: rgba(0, 0, 0, 0.0); }
  .VehicleCardRow_actionIcon__m0nBM { width: 24px; height: 24px; }
  /* SHARE button is now ALWAYS visible on mobile catalog cards too —
   *  user spec session 36: share must appear alongside compare + favourite
   *  on every card variant (Welcome top-deals, Catalog, SingleCarPage). */

  /* INFO column — full width, padding 12 horizontal as per spec.
   *  Stretching off; we use natural content flow now. */
  .VehicleCardRow_info__ZHlgo {
    align-self: auto;
    padding: 16px 12px 16px 12px;
    gap: 16px;
  }

  /* TITLE — Mazzard H SemiBold 20 */
  .VehicleCardRow_topRow__\+IsoZ { gap: 0; }
  .VehicleCardRow_title__RyoOy {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    text-transform: capitalize;
  }

  /* IDENTIFIERS (LOT, VIN) — H Regular 12, copy 14×14 */
  .VehicleCardRow_identifiers__YDdZ3 {
    margin-top: 16px;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #B0B0B0;
  }
  .VehicleCardRow_idLine__Grpr0 .VehicleCardRow_copy__AKiB7 img { width: 14px; height: 14px; }

  /* Gray separator under identifiers, 16 px above & below */
  .VehicleCardRow_topGroup__nVPdX {
    padding-bottom: 16px;
    border-bottom: 1px solid #3A3A3A;
  }

  /* DATA ROW — single 2-col grid, .specItem becomes a flex column.
   *  `.specBlock` & `.rightCol` & `.priceBlock` all become `display:contents`
   *  so their `.specItem` children flow directly into the grid. */
  .VehicleCardRow_dataRow__3i0rJ {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 12px;
    column-gap: 12px;
    grid-row-gap: 16px;
    row-gap: 16px;
    align-items: start;
    padding-top: 0;
  }
  .VehicleCardRow_specBlock__exTZD,
  .VehicleCardRow_rightCol__ZrhBz,
  .VehicleCardRow_priceBlock__MU4rg { display: contents; }

  .VehicleCardRow_specItem__rHMeC {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  /* Swap the price/date columns to match Figma:
   *   Row 4:  Auction Date  |  Current Rate
   * (JSX order keeps Current Rate first to preserve desktop layout.)
   * Use explicit grid-column placement instead of `order` — works
   * reliably regardless of CSS-modules class-name flushing. */
  .VehicleCardRow_priceItem__TwPBu { grid-column: 2; }
  .VehicleCardRow_dateItem__RvqtK  { grid-column: 1; grid-row: 4; }

  /* Labels & values — H Regular 14 grey / H Medium 14 yellow */
  .VehicleCardRow_specLabel__KIiwC,
  .VehicleCardRow_priceLabel__5rVFf {
    font-size: 14px;
    font-weight: 400;
    color: #B0B0B0;
    text-transform: capitalize;
    white-space: nowrap;
  }
  .VehicleCardRow_specValue__PWdyX {
    font-size: 14px;
    font-weight: 500;
    color: #FEAE00;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .VehicleCardRow_dateValue__-IEr1 {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
  }
  /* Current Rate / Sold Price — H Medium 24, yellow */
  .VehicleCardRow_priceValue__QrLP6 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
  }

  /* CTA — full card width (= image width - inner padding ≈ 312 px); below
   *  the spec grid; height 45, H Medium 14, yellow.  Spans both grid columns. */
  .VehicleCardRow_cta__lmpTE {
    grid-column: 1 / -1;
    width: 100%;
    height: 45px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
  }
}

/* =========================================================================
 *  SortDropdown — Figma 1:1 (catalog SORT ± menu).
 *
 *  Per Figma annotation (user's screenshot):
 *    • menu starts 8 px below the toggle button
 *    • inner padding 12 px all around
 *    • row vertical padding 12 px (text-line gap of 12)
 *    • 1 px separator between groups, padding 12 px around separator
 *    • checkmark size 12 × 12, gap 8 px to label
 *    • selected color  #D6D6D6, unselected #949494, checkmark #FEAE00
 *    • menu width auto-sized to widest item ("Greatest mileage")
 *  ====================================================================== */

.SortDropdown_root__qJ655 {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

/* SORT ± toggle button — same typography as before, never moves */
.SortDropdown_toggle__gLBRs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  color: #FEAE00;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 120ms ease;
}
.SortDropdown_toggle__gLBRs:hover { opacity: .85; }
.SortDropdown_toggle__gLBRs[aria-expanded="true"] { opacity: 1; }

/* Floating menu panel */
.SortDropdown_menu__VhQoo {
  position: absolute;
  top: calc(100% + 8px);                /* 8 px below toggle */
  right: 0;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 12px;                        /* inner padding 12 (Figma) */
  background: #18191A;
  border: 1px solid #2A2B2C;
  border-radius: 8px;                   /* Figma: corner radius 8 */
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  min-width: 240px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  animation: SortDropdown_sortFade__FfniO 140ms ease;
  display: flex;
  flex-direction: column;
  gap: 12px;                            /* 12 px между КАЖДОЙ строкой/линией (Figma) */
}

@keyframes SortDropdown_sortFade__FfniO {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Each row — БЕЗ собственного padding, чтобы gap:12 на родителе
   давал ровно 12 px между всеми элементами вертикально. */
.SortDropdown_item__uq-e7 {
  display: flex;
  align-items: center;
  gap: 8px;                             /* checkmark ↔ text = 8 (Figma) */
  padding: 0;
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: #949494;                       /* unselected = grey */
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: color 120ms ease;
}
.SortDropdown_item__uq-e7:hover            { color: #D6D6D6; }
.SortDropdown_itemSelected__dnntU          { color: #D6D6D6; font-weight: 500; }

.SortDropdown_check__B-yCe {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FEAE00;                       /* checkmark yellow */
}

.SortDropdown_label__cx96l { white-space: nowrap; }

/* Group separator — 1 px grey, без собственного margin: 12 px gap
   задаёт родительский ul. */
.SortDropdown_divider__8LUO4 {
  height: 1px;
  background: #3A3A3A;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* CatalogSearchBar — Figma 1:1.
 *   459 × 40, radius 8, 1 px border #2C2D2A, focus border #FEAE00,
 *   magnifier 24 × 24 at 9 px from left edge,
 *   Mazzard H Regular 14, placeholder #5E5E5E.
 */

.CatalogSearchBar_root__CS1mB {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 459px;
  height: 40px;
  padding: 0 16px 0 9px;                /* 9 px от левого края до лупы */
  background: transparent;
  border: 1px solid #2C2D2A;
  border-radius: 8px;                   /* Figma */
  box-sizing: border-box;
  transition: border-color 120ms ease;
  z-index: 5;
}
.CatalogSearchBar_root__CS1mB:focus-within { border-color: #FEAE00; }

.CatalogSearchBar_icon__YE4yV {
  width: 24px;                          /* Figma 24×24 */
  height: 24px;
  flex-shrink: 0;
  margin-right: 9px;                    /* lупа ↔ input */
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.CatalogSearchBar_input__FQfqp {
  flex: 1 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                     /* Figma: Regular */
  font-size: 14px;                      /* Figma: 14 */
  color: #FFFFFF;
  padding: 0;
}
.CatalogSearchBar_input__FQfqp::placeholder { color: #5E5E5E; } /* Figma grey */

/* Mobile (≤ 768 px) — full width × 36, icon 20×20 per spec. */
@media (max-width: 768px) {
  .CatalogSearchBar_root__CS1mB {
    width: 100%;
    height: 36px;
    border-radius: 4px;
    padding: 0 12px 0 12px;
  }
  .CatalogSearchBar_icon__YE4yV { width: 20px; height: 20px; margin-right: 8px; }
  .CatalogSearchBar_input__FQfqp { font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────
 *  CatalogConsultationBlock — Figma 1:1 spec.
 *  Block size  : 1920 × 1788 px (fixed height)
 *  Padding-top : 172 px (top of block to first heading)
 *  Padding-bot : 161 px (contact card bottom to block bottom)
 *  H2 → H3 gap : 32 px
 *  H3 → form   : 128 px
 *  Form → card : 128 px
 *  Form width  : 372 px (centered)
 *  Contact     : 566 × 333 px, 1 px yellow border
 * ────────────────────────────────────────────────────────────── */
.CatalogConsultationBlock_section__\+47KZ {
  background: #1A1B19;
  width: 100%;
  /* Figma fixes the block at 1920 × 1788 px.  min-height locks the minimum
   * dimension so the block always reaches the Figma height, even if the form
   * content is slightly shorter than the design assumes. */
  min-height: 1788px;
  padding: 172px 0 161px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
}

/* ─── Headings ─────────────────────────────────────────────────────── */
.CatalogConsultationBlock_titleYellow__H\+0ZC,
.CatalogConsultationBlock_titleWhite__xNUX3 {
  font-weight: 700;             /* H Bold */
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  text-align: center;
}
.CatalogConsultationBlock_titleYellow__H\+0ZC {
  color: #FEAE00;
  text-transform: uppercase;
}
.CatalogConsultationBlock_titleWhite__xNUX3 {
  color: #FFFFFF;
  margin-top: 32px;             /* 32 px gap title ↔ title */
}

/* ─── Form ────────────────────────────────────────────────────────── */
.CatalogConsultationBlock_form__qVvu\+ {
  width: 372px;
  margin-top: 128px;            /* 128 px from "Free consultation" */
  display: flex;
  flex-direction: column;
  gap: 32px;                    /* 32 px between rows (Figma) */
}
.CatalogConsultationBlock_field__08Z9j {
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* Figma spec: 16 px between label and input */
}
.CatalogConsultationBlock_label__q1i7f {
  font-weight: 500;             /* H Medium */
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF;
}
.CatalogConsultationBlock_req__4u5wI { color: #FEAE00; }

/* Inputs */
.CatalogConsultationBlock_input__fJJNd {
  width: 100%;
  height: 45px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #4F4F4F;
  border-radius: 4px;
  padding: 0 16px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF;
  outline: none;
  transition: border-color 120ms ease;
}
.CatalogConsultationBlock_input__fJJNd::placeholder { color: #5E5E5E; }
.CatalogConsultationBlock_input__fJJNd:hover { border-color: #6B6B6B; }
.CatalogConsultationBlock_input__fJJNd:focus { border-color: #FEAE00; }
.CatalogConsultationBlock_inputError__vfkWD { border-color: #DC2626; }
.CatalogConsultationBlock_inputError__vfkWD:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.CatalogConsultationBlock_textarea__n-7gU {
  height: 160px;                /* taller textarea — completes form to Figma block height */
  padding: 12px 16px;
  resize: none;
  line-height: 1.3;
}

/* Inputs with a left icon (flag / €) */
.CatalogConsultationBlock_inputWithIcon__g9Man {
  position: relative;
}
.CatalogConsultationBlock_icon__QNCh2 {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.CatalogConsultationBlock_inputPadIcon__tt-XC {
  padding-left: 46px;
}

/* Per-field error message */
.CatalogConsultationBlock_fieldError__ERLgR {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: #F87171;
}

/* Submit button — 372 × 45 */
.CatalogConsultationBlock_submit__U9MBv {
  width: 372px;
  height: 45px;
  background: #FEAE00;
  color: #18181B;
  border: 0;
  border-radius: 4px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
  outline: none;
  margin-top: 8px;
}
.CatalogConsultationBlock_submit__U9MBv:hover         { background: #FFC23A; }
.CatalogConsultationBlock_submit__U9MBv:focus-visible { background: #FFC23A; }
.CatalogConsultationBlock_submit__U9MBv:disabled      { opacity: 0.6; cursor: not-allowed; }

/* ─── Contact card ─────────────────────────────────────────── */
.CatalogConsultationBlock_contactCard__F5Uly {
  width: 566px;
  height: 333px;
  /* margin-top: auto pushes contact card to the bottom of the flex container,
   * locking the 161 px padding-bottom = visual gap to the section's lower edge
   * for the strict Figma 1788 px block.  Form-to-contact gap is at least 128 px
   * but expands when the form is shorter than the Figma design. */
  margin-top: auto;
  border: 1px solid #FEAE00;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  box-sizing: border-box;
  padding: 40px;
}
.CatalogConsultationBlock_contactQuestion__uJNhl,
.CatalogConsultationBlock_contactUs__4Nl3W {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0;
}
.CatalogConsultationBlock_contactUs__4Nl3W { margin-bottom: 16px; }
.CatalogConsultationBlock_phone__Lr4wh {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: #FEAE00;
  text-decoration: none;
  transition: color 120ms ease;
}
.CatalogConsultationBlock_phone__Lr4wh:hover         { color: #FFC23A; }
.CatalogConsultationBlock_phone__Lr4wh:focus-visible { outline: none; color: #FFC23A; }

/* ─── Success modal (brand style, no gradients) ─── */
.CatalogConsultationBlock_modalBackdrop__vK5MT {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: CatalogConsultationBlock_fadeIn__tjws\+ 0.18s ease-out both;
}
@keyframes CatalogConsultationBlock_fadeIn__tjws\+ {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes CatalogConsultationBlock_slideIn__-wBzr {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.CatalogConsultationBlock_modalCard__nLj0P {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #0F0F11;
  border: 1px solid #FEAE00;
  border-radius: 12px;
  padding: 48px 40px 40px;
  color: #FFFFFF;
  text-align: center;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  animation: CatalogConsultationBlock_slideIn__-wBzr 0.24s ease-out both;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.CatalogConsultationBlock_modalClose__OiQV3 {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid #2A2A2D;
  background: transparent;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.CatalogConsultationBlock_modalClose__OiQV3:hover {
  background: rgba(254, 174, 0, 0.10);
  border-color: #FEAE00;
  color: #FEAE00;
}
.CatalogConsultationBlock_modalIcon__9Qt39 {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(254, 174, 0, 0.10);
  border: 2px solid #FEAE00;
  color: #FEAE00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.CatalogConsultationBlock_modalTitle__2l51n {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: #FEAE00;
}
.CatalogConsultationBlock_modalText__Z6rFk {
  margin: 0 0 28px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: #D4D4D6;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.CatalogConsultationBlock_modalBtn__aIj6v {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  min-width: 200px;
  padding: 0 24px;
  background: #FEAE00;
  color: #18181B;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease;
  margin-top: 8px;
}
.CatalogConsultationBlock_modalBtn__aIj6v:hover { background: #FFC23A; }
.CatalogConsultationBlock_modalBtn__aIj6v:focus-visible { outline: none; background: #FFC23A; }

/* ═════════════════════════════════════════════════════════════════════
 *  MOBILE LAYOUT (≤ 768 px viewport) — Figma "Form mobile".
 *  ───────────────────────────────────────────────────────────────────
 *  Total block ≈ 360 × 1214 px.
 *  Spacings (per Figma annotation):
 *    • L/R padding ............. 12 px
 *    • Show More CTA → DON'T... 128 px (handled by .section padding-top)
 *    • DON'T → Free consult ....  24 px
 *    • Free → Full Name ........  64 px (form margin-top)
 *    • Field ↔ Field ...........  24 px (form gap)
 *    • Send → Have a question ..  64 px (contactCard margin-top)
 *    • Have card → Footer ......  72 px (handled by .section padding-bottom)
 *  Typography:
 *    • DON'T / Free consultation : H Bold  32 px
 *    • Labels                    : H Medium 14 px
 *    • Inputs / placeholders     : H Regular 14 px
 *    • Send Request              : H Medium 14 px
 *    • Have a question? Contact us: H Bold 24 px
 *    • Phone number              : H Medium 16 px
 *  Element sizes:
 *    • Send Request button: 336 × 45 px (full width minus 2 × 12 px padding)
 *    • Contact card:        336 × auto, 1 px yellow border
 *  ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .CatalogConsultationBlock_section__\+47KZ {
    min-height: 0;
    /* 128 px above the gray section is now provided by the page-level
     * `catalog-consultation-spacer`.  Internal padding remains for the
     * "DON'T POSTPONE" title breathing room (64 px) and 72 px to footer. */
    padding: 64px 12px 72px;
    align-items: stretch;
  }

  .CatalogConsultationBlock_titleYellow__H\+0ZC,
  .CatalogConsultationBlock_titleWhite__xNUX3 {
    font-size: 32px;                   /* Figma H Bold 32 */
    line-height: 1.1;
  }
  .CatalogConsultationBlock_titleWhite__xNUX3 {
    margin-top: 24px;                  /* 24 px between titles */
  }

  .CatalogConsultationBlock_form__qVvu\+ {
    width: 100%;                       /* full container width */
    margin-top: 64px;                  /* 64 px from "Free consultation" */
    gap: 24px;                         /* 24 px between fields */
  }
  .CatalogConsultationBlock_field__08Z9j { gap: 8px; }
  .CatalogConsultationBlock_label__q1i7f { font-size: 14px; }          /* H Medium 14 stays */

  .CatalogConsultationBlock_input__fJJNd {
    font-size: 14px;                   /* H Regular 14 */
    font-weight: 400;
  }
  .CatalogConsultationBlock_textarea__n-7gU { height: 120px; }

  .CatalogConsultationBlock_submit__U9MBv {
    width: 100%;                       /* full = 336 px after 2×12 padding */
    height: 45px;
    font-size: 14px;
    font-weight: 500;                  /* H Medium */
    margin-top: 8px;
  }

  .CatalogConsultationBlock_contactCard__F5Uly {
    width: 100%;                       /* 336 px after padding */
    height: auto;
    margin-top: 64px;                  /* 64 px Send → Have a question */
    padding: 32px 20px;
    gap: 8px;
  }
  .CatalogConsultationBlock_contactQuestion__uJNhl,
  .CatalogConsultationBlock_contactUs__4Nl3W {
    font-size: 24px;                   /* H Bold 24 */
    line-height: 1.15;
  }
  .CatalogConsultationBlock_contactUs__4Nl3W { margin-bottom: 12px; }
  .CatalogConsultationBlock_phone__Lr4wh {
    font-size: 16px;                   /* H Medium 16 */
    font-weight: 500;
    line-height: 1.4;
  }
}

/* =============================================================================
 * NavigationHeader \u2014 pixel spec (May 2026)
 *
 *   \u2022 padding-top    : 52  (gap from header bottom \u2192 breadcrumb top)
 *   \u2022 padding-left   : 100
 *   \u2022 padding-right  : 100
 *   \u2022 padding-bottom : 150 (icon row bottom \u2192 next image-grid block top)
 *   \u2022 breadcrumb \u2192 title gap : 72
 *   \u2022 title font     : 80px Mazzard
 *   \u2022 right-side icons : 24\u00d724, gap 24, right anchor = padding-right (100)
 * ====================================================================== */
/*
 * STRICT pixel spec (May 2026 Figma reference) at desktop (≥ 1280 px):
 *
 *   Vertical (measured from main public header bottom):
 *     • header_bottom → breadcrumb_top     : 52 px   (padding-top)
 *     • breadcrumb height (20px font, 99.9% line-height) ≈ 20 px
 *     • breadcrumb_bottom → title_top      : 76 px   (gap)
 *           → header_bottom → title_top    : 148 px  ✔ (52 + 20 + 76)
 *     • title height (80px font, 99.9% line-height) ≈ 80 px
 *     • title_bottom → ImageGrid_top       : 142 px  (padding-bottom)
 *           → header_bottom → ImageGrid_top: 370 px  ✔ (148 + 80 + 142)
 *
 *   Horizontal:
 *     • padding-left  : 100 px
 *     • padding-right : 100 px
 *
 *   Typography (Mazzard H family):
 *     • Breadcrumb (HOME / CATALOG / Car name) : 20 px H SemiBold (600)
 *     • Page title (H1)                        : 80 px H Bold     (700)
 *
 *   Icons (top-right of title row, compare + favorite):
 *     • 40 × 40 px each, 24 px gap between them.
 */
.NavigationHeader_navigationHeader__5Lt9W {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 52px 100px 142px;        /* top | sides | bottom — strict px */
  box-sizing: border-box;
  text-align: left;
  font-family: var(--font-mazzard);
  color: var(--color-dimgray-100);
}
.NavigationHeader_headerInner__jQLPZ {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 76px;                         /* breadcrumb → title — strict */
  width: 100%;
}

/* breadcrumb — H SemiBold 20 px (per spec) */
.NavigationHeader_breadcrumb__Jm8NQ {
  margin: 0;
  font-size: 20px;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 600;                  /* Mazzard H SemiBold */
  font-family: inherit;
  color: var(--color-dimgray-100);   /* #5E5E5E — HOME / CATALOG */
}
.NavigationHeader_span__6i5n- { color: var(--color-black); }
.NavigationHeader_lucidMotorsAir__USvZN { color: var(--color-orange-100); }   /* #FEAE00 — car name */

/* Breadcrumb links — HOME / CATALOG are now react-router <Link>.
 * Strip the default <a> chrome (blue + underline) and inherit
 * the breadcrumb typography. Add a subtle hover/focus affordance. */
.NavigationHeader_crumbLink__DZ90U {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.NavigationHeader_crumbLink__DZ90U:hover,
.NavigationHeader_crumbLink__DZ90U:focus-visible {
  color: var(--color-orange-100);   /* #FEAE00 on hover */
  outline: none;
}
.NavigationHeader_crumbLink__DZ90U:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.NavigationHeader_crumbSep__XGXgy {
  color: inherit;                   /* same #5E5E5E as breadcrumb */
  -webkit-user-select: none;
          user-select: none;
}

/* title row — H1 + right-side action icons */
.NavigationHeader_titleRow__r5BGn {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
}
.NavigationHeader_title__kcxlk {
  margin: 0;
  font-size: 80px;
  line-height: 99.9%;
  font-weight: 700;                  /* Mazzard H Bold */
  font-family: var(--font-mazzard);
  color: var(--color-white);
  display: inline-block;
  flex: 0 1 auto;
}

/* icons — strict 40×40, gap 24 */
.NavigationHeader_iconRow__z-4DF {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.NavigationHeader_iconBtn__iTwG\+ {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.NavigationHeader_iconBtn__iTwG\+:hover { opacity: 0.85; }
.NavigationHeader_iconBtn__iTwG\+:disabled { opacity: 0.55; cursor: default; }
/* Active state — when a car is in the user's Favorites or Compare list,
 * the corresponding header button gets a subtle orange-tinted background
 * inside the existing 40 × 40 frame so it reads as "ON" without changing
 * the SVG itself (the icons are visual-design owned). */
.NavigationHeader_iconBtnActive__cG6Q9 {
  background-color: rgba(254, 174, 0, 0.18);
}
.NavigationHeader_iconBtnActive__cG6Q9:hover { background-color: rgba(254, 174, 0, 0.26); opacity: 1; }
.NavigationHeader_iconImg__2p5LI {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Responsive fallback ──────────────────────────────────────────────
 * Single breakpoint for tablets & smaller (< 1280 px). Proportional
 * scaling via clamp so spacing/typography degrades gracefully but the
 * desktop layout stays strictly pixel-precise above 1280 px.
 */
@media screen and (max-width: 1279px) {
  .NavigationHeader_navigationHeader__5Lt9W {
    padding:
      clamp(24px, 4.06vw, 52px)
      clamp(16px, 7.81vw, 100px)
      clamp(48px, 11.09vw, 142px);
  }
  .NavigationHeader_headerInner__jQLPZ   { gap: clamp(24px, 5.93vw, 76px); }
  .NavigationHeader_breadcrumb__Jm8NQ    { font-size: clamp(14px, 1.56vw, 20px); }
  .NavigationHeader_title__kcxlk         { font-size: clamp(32px, 6.25vw, 80px); }
  .NavigationHeader_iconRow__z-4DF       { gap: clamp(12px, 1.87vw, 24px); }
  .NavigationHeader_iconBtn__iTwG\+       { width: clamp(24px, 3.13vw, 40px); height: clamp(24px, 3.13vw, 40px); }
}
@media screen and (max-width: 450px) {
  /* Mobile portrait — only override title to single small size. */
  .NavigationHeader_navigationHeader__5Lt9W { padding: 16px 16px 48px; }
  .NavigationHeader_headerInner__jQLPZ { gap: 18px; }
  .NavigationHeader_title__kcxlk { font-size: 24px; }
  .NavigationHeader_breadcrumb__Jm8NQ { font-size: 12px; }
  .NavigationHeader_iconBtn__iTwG\+ { width: 24px; height: 24px; }
  .NavigationHeader_iconRow__z-4DF { gap: 12px; }
}

/* =============================================================================
 * Single Car page CTA — yellow primary button.
 *
 * STRICT pixel spec (May 2026 Figma):
 *   • Button frame  : 327 × 45 px
 *   • Border-radius : 6 px
 *   • Padding       : 14 px (vert) / 32 px (horiz)
 *   • Text frame    : 263 × 17 px  (= 327 - 64 horizontal padding)
 *   • Typography    : Mazzard H Medium (500), 14 px, line-height ≈ 17 px
 *   • Surface       : #FEAE00 (--color-orange-100), hover → chocolate
 *   • Text color    : #000 (--color-black)
 *
 * The 14-px text natural line-height (~17 px) fills the 263 × 17 inner
 * frame exactly when the padding is 14 / 32. The component is reused on
 * the public site (card1 / card2 / etc.), so the size can still be
 * overridden via the `bUTTONWidth` inline prop; defaults stay locked.
 * ====================================================================== */
.Button1_button__ay36Z,
.Button1_contactUs__JLZ4V {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Button1_button__ay36Z {
  cursor: pointer;
  border: 0;
  padding: 14px 32px;
  background-color: var(--color-orange-100);
  width: 327px;
  height: 45px;
  border-radius: 6px;
  box-sizing: border-box;
  transition: background-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.Button1_button__ay36Z:hover { background-color: var(--color-chocolate-100); }
.Button1_button__ay36Z:active { transform: translateY(1px); }
.Button1_contactUs__JLZ4V {
  height: 17px;
  width: 263px;
  flex: 0 0 auto;
  position: relative;
  font-size: 14px;
  line-height: 17px;
  font-family: var(--font-mazzard);
  font-weight: 500;          /* Medium */
  color: var(--color-black);
  text-align: center;
  white-space: nowrap;
}

/* =============================================================================
 * ImageGrid (FrameComponent3) \u2014 pixel spec (May 2026)
 *
 *   \u2022 Wrapper       : sides 100, no top padding (sits 150 px below icon row)
 *   \u2022 Hero image    : 848\u00d7636
 *   \u2022 Sub thumbs    : 8 cards in 2 rows \u00d7 4 cols, each 203\u00d7152, gap 12
 *   \u2022 Image column  : 848\u00d7964 total (636 + 12 + 152 + 12 + 152)
 *   \u2022 Info card     : 848\u00d7964 (matches image column)
 *
 * Typography (Mazzard H family):
 *   \u2022 TRADED button text  : 156\u00d734 button, 14 SemiBold (600)
 *   \u2022 Section titles      : 18 SemiBold (600)
 *   \u2022 Field labels        : 14 Medium  (500) white
 *   \u2022 Field values        : 14 Bold    (700) orange
 *   \u2022 Description body    : 14 Regular (400) gray #949494
 *   \u2022 CTA button          : 327\u00d745, 14 Medium (500)
 * ====================================================================== */
.ImageGrid_imageGridWrapper__FOGgc {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /*
   * STRICT pixel spec at desktop (≥ 1280 px):
   *   • padding-left   : 100 px
   *   • padding-right  : 100 px
   *   • padding-bottom : 128 px (until next section)
   *   • padding-top    : 0     (370 px from header bottom is owned by
   *                              NavigationHeader's padding-bottom of 142)
   */
  padding: 0 100px 128px;
  box-sizing: border-box;
}
@media screen and (max-width: 1279px) {
  .ImageGrid_imageGridWrapper__FOGgc {
    padding: 0 clamp(16px, 7.81vw, 100px) clamp(48px, 10vw, 128px);
  }
}
.ImageGrid_imageGrid__ruVn2 {
  align-self: stretch;
  width: 100%;
  max-width: 1720px;          /* 848 + 24 gap + 848 = exact Figma layout cap */
  margin: 0 auto;
  /*
   * CSS Grid guarantees BOTH columns are equal width (1fr each) AND equal
   * height (align-items: stretch). Combined with .imageColumn's
   * aspect-ratio 848/964, the height of BOTH blocks is driven by their
   * (equal) width — so the two cards are always perfect twins.
   */
  display: grid;
  grid-template-columns: minmax(0, 848px) minmax(0, 848px);
  justify-content: center;
  align-items: stretch;
  grid-gap: clamp(12px, 1.25vw, 24px);
  gap: clamp(12px, 1.25vw, 24px);
}

/* ---------- LEFT \u2014 photos column locked to 848:964 aspect ratio ----- */
.ImageGrid_imageColumn__kK2nO {
  width: 100%;
  min-width: 0;
  max-width: 848px;
  aspect-ratio: 848 / 964;             /* width-driven height \u2192 width \u00d7 1.1368 */
  display: grid;
  grid-template-rows: 636fr 152fr 152fr;
  grid-gap: 12px;
  gap: 12px;
}
.ImageGrid_image15Icon__Gceyu {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.ImageGrid_thumbRow__5PPrN {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  grid-gap: 12px;
  gap: 12px;
}
.ImageGrid_image16Icon__W0Hz4 {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  display: block;
}
/* ── ALL IMAGES tile (last cell of row 2) ─────────────────────────────────
 * Figma spec (May 2026):
 *   • Tile size           : 203 × 152 (matches a thumb cell, fills the grid)
 *   • Dark gray surface   : #16161A (same as info card / public theme)
 *   • Icon block          : 76 × 48 PNG asset that already contains the
 *                            stacked photo glyph + "ALL IMAGES" caption
 *                            (/single-car/all-images-icon.png).
 *   • Dynamic count       : Mazzard 12 Medium #707070, sits to the right
 *                            of the PNG to complete the "ALL IMAGES (30)"
 *                            phrase. Real count comes from `imageCount`
 *                            (backend `image_count`, otherwise images.length).
 *   • Interaction         : click → opens full-screen lightbox over ALL photos
 */
.ImageGrid_allImagesCard__IZbeU {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #9A9A95;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ImageGrid_allImagesCard__IZbeU:hover {
  background-color: #1E1E22;
  color: #FEAE00;
  transform: translateY(-1px);
}
/* Stacked layout — picture icon on TOP, "ALL IMAGES (N)" label BELOW.
 * Both elements are horizontally centred inside the 203×152 tile and the
 * whole composition is vertically centred via the parent's flex centering.
 * The icon is rendered as inline SVG (uses currentColor) so it stays sharp
 * at any density and inherits the hover-tint colour.
 */
.ImageGrid_allImagesInner__RYqIZ {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.ImageGrid_allImagesIcon__nZDPM {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
  color: currentColor;
  transition: opacity 0.18s ease;
}
.ImageGrid_allImagesCount__LhCAm {
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--font-mazzard);
  color: currentColor;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

/* ---------- RIGHT — info card: stretches to MATCH photo column height -- */
.ImageGrid_infoCard__GFbvU {
  width: 100%;
  min-width: 0;
  max-width: 848px;
  /* Grid container has align-items: stretch → height auto-matches
     photo column (aspect-ratio driven). The explicit `align-self: stretch`
     + `height: 100%` are defensive in case some viewport/round-off causes
     the implicit stretch to leave a sub-pixel gap (which is exactly the
     "right card looks slightly shorter" issue we hit at certain widths). */
  align-self: stretch;
  height: 100%;
  background-color: var(--color-gray-500);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 32px;                       /* strict spec */
  box-sizing: border-box;
}
.ImageGrid_infoCardInner__8mQ9e {
  flex: 1 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 56px;                            /* description bottom → CTA top */
}
.ImageGrid_infoBlocks__acvBO {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;                            /* Vehicle Info / Auction Details / Description */
}
.ImageGrid_tradedRow__fxXmi {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.ImageGrid_tradedButton__CcaDg {
  cursor: pointer;
  border: 1px solid var(--color-orange-100);
  padding: 8px 10px;
  background-color: transparent;
  width: 154px;
  height: 34px;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ImageGrid_tradedButton__CcaDg:hover {
  background-color: var(--color-chocolate-200);
}
.ImageGrid_tradedText__TRMWV {
  font-size: 16px;
  line-height: 99.9%;
  text-transform: uppercase;
  font-family: var(--font-mazzard);
  font-weight: 600;          /* SemiBold */
  color: var(--color-orange-100);
}

.ImageGrid_section__5HcOy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;                            /* divider line → content (Description title → body 32 px) */
}
.ImageGrid_sectionHeader__CA-lR {
  align-self: stretch;
  border-bottom: 1px solid var(--color-dimgray-200);
  display: flex;
  align-items: center;
  padding: 0 0 12px;
}
.ImageGrid_sectionTitle__e0TW6 {
  font-size: 18px;                      /* H SemiBold 18 px per spec */
  line-height: 99.9%;
  text-transform: uppercase;
  font-family: var(--font-mazzard);
  font-weight: 600;          /* SemiBold */
  color: var(--color-white);
  margin: 0;
}
.ImageGrid_detailsGrid__U75aQ {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.67vw, 32px);
}
.ImageGrid_detailsCol__NAQwx {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 1.4vw, 26px);    /* row gap between Brand/Model/Year/... — a touch more air */
  min-width: 0;
}
.ImageGrid_detailRow__836We {
  align-self: stretch;
  display: flex;
  align-items: center;
  /* user spec: at least 14 px between label and value at every viewport */
  gap: clamp(14px, 1.25vw, 22px);
  flex-wrap: nowrap;
}
.ImageGrid_detailLabel__Fi-st {
  /* Wider label slot so single-word labels like
   * "Transmission" / "Engine volume" / "Body type" / "Drive type"
   * comfortably fit on ONE line at every viewport.
   * Longer multi-word labels (e.g. "Estimated total price") gracefully
   * wrap to 2 lines only when the value next to them is short — see
   * `.detailRowWide` modifier for the special "Estimated total price"
   * row that gets a wider label slot so even that one fits on one line
   * when the viewport allows it. */
  width: clamp(110px, 9.5vw, 165px);
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
  font-family: var(--font-mazzard);
  font-weight: 500;          /* Medium */
  color: var(--color-white);
}
.ImageGrid_detailValue__GxKjV {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  font-family: var(--font-mazzard);
  font-weight: 700;          /* Bold */
  color: var(--color-orange-100);
  word-break: break-word;
}
.ImageGrid_detailValueLg__RZFgi {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  font-family: var(--font-mazzard);
  font-weight: 700;          /* Bold */
  color: var(--color-orange-100);
  margin: 0;
  word-break: break-word;
}

/* ── DESCRIPTION ───────────────────────────────────────────────────────────
 * Figma spec (May 2026):
 *   • Frame           : 784 × 64 px (fits up to 2 lines comfortably)
 *   • Body font       : 14 px Mazzard H Regular (400)
 *   • Body color      : #949494
 *   • Line-height     : 24 px (loose, allows 2-line wrap inside 64 px frame)
 *   • Layout          : natural word-wrap up to 2 lines; the short copy
 *                       produced by `buildDescription()` typically fits on
 *                       a SINGLE line, but the 64-px frame keeps the card
 *                       balance intact if a longer auction record leaks in.
 */
.ImageGrid_description__OnGkF {
  align-self: stretch;
  /* Width follows parent (info card content area = 784 at desktop spec). */
  max-width: 784px;
  min-height: 64px;
  font-size: 14px;
  line-height: 24px;
  font-family: var(--font-mazzard);
  font-weight: 400;          /* Regular */
  color: var(--color-gray-100);   /* #949494 */
  /* Allow up to 2 lines (line-clamp); the short copy fits in one line on
   * the 784-px frame. No nowrap / ellipsis — text must be readable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
}

/* CTA button slot — single yellow button (327×45) horizontally centered.
 * No secondary link per Figma spec. */
.ImageGrid_ctaSlot__rGGJ1 {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ── Photo gallery: button resets + interactivity ─────────────────────── */
.ImageGrid_heroButton__dYUmd,
.ImageGrid_thumbButton__rjMVx {
  -webkit-appearance: none;
          appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.ImageGrid_heroButton__dYUmd:hover,
.ImageGrid_thumbButton__rjMVx:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.ImageGrid_heroButton__dYUmd:hover .ImageGrid_image15Icon__Gceyu,
.ImageGrid_thumbButton__rjMVx:hover .ImageGrid_image16Icon__W0Hz4 { opacity: 0.92; }

/* ── Lightbox (full-screen photo gallery) ─────────────────────────────── */
.ImageGrid_lightbox__jR55n {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.ImageGrid_lightboxImg__RniXB {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  border-radius: 0;
}
.ImageGrid_lightboxNav__2IyGF {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mazzard);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Close button — user feedback: circle+border look bad because the X
   glyph doesn't visually centre inside the small round frame. We drop
   the circle entirely and keep just the glyph. */
.ImageGrid_lightboxClose__-ZC8R {
  position: absolute;
  top: 24px; right: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mazzard);
  font-size: 34px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}
.ImageGrid_lightboxNav__2IyGF {
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
}
.ImageGrid_lightboxPrev__-kUaF { left: 24px; }
.ImageGrid_lightboxNext__CUuCn { right: 24px; }
.ImageGrid_lightboxClose__-ZC8R:hover { color: #FEAE00; transform: scale(1.12); background: transparent; border: 0; }
.ImageGrid_lightboxNav__2IyGF:hover { background: rgba(254,174,0,0.18); border-color: rgba(254,174,0,0.5); color: #FEAE00; }
.ImageGrid_lightboxCount__RolrD {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: #c8c8c8;
  font-family: var(--font-mazzard);
  font-size: 13px;
  background: rgba(0,0,0,0.5);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}


/* ── Mobile carousel (visible ≤ 768 px, hidden on desktop) ────────── */
.ImageGrid_mobileGallery__Jle7b { display: none; }
.ImageGrid_mobileInfoCard__k97Cm { display: none; }
.ImageGrid_mobileScroller__1BUNE {}
.ImageGrid_mobileSlide__1yr76 {}
.ImageGrid_mobileSlideImg__DHv0A {}
.ImageGrid_mobileDots__rMed8 {}
.ImageGrid_mobileDot__wfLZj {}
.ImageGrid_mobileDotActive__MO4Us {}
.ImageGrid_mobileInfoInner__d9Mfr {}
.ImageGrid_mobileTradedRow__d5wuD {}
.ImageGrid_mobileTradedBtn__aoSmT {}
.ImageGrid_mobileSection__IuMYL {}
.ImageGrid_mobileSectionHeader__CznJy {}
.ImageGrid_mobileSectionTitle__NSAUA {}
.ImageGrid_mobileVehicleGrid__CtP\+i {}
.ImageGrid_mobRow__Ex5VM {}
.ImageGrid_mobRowSpan__75FVO {}
.ImageGrid_mobRowLarge__jocsi {}
.ImageGrid_mobLabel__alEe1 {}
.ImageGrid_mobValue__zmSwm {}
.ImageGrid_mobileDescription__yVgDA {}
.ImageGrid_mobileCta__2GRMQ {}

/* ── Responsive ─────────────────────────────────────────────────────────
 * Desktop / laptop scaling is fully handled by clamp() above — no fixed
 * breakpoints, just smooth proportional sizing from ~860 px to 1920+ px.
 * Below 860 px we switch to a stacked single-column layout for tablets/
 * phones (mobile spec to be revisited separately).
 * ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 860px) {
  .ImageGrid_imageGridWrapper__FOGgc { padding: 0 24px 64px; }
  .ImageGrid_imageGrid__ruVn2 {
    grid-template-columns: 1fr;       /* single column stack */
    gap: 16px;
  }
  .ImageGrid_imageColumn__kK2nO {
    max-width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .ImageGrid_heroButton__dYUmd, .ImageGrid_thumbButton__rjMVx { height: auto; }
  .ImageGrid_heroButton__dYUmd { aspect-ratio: 848 / 636; }
  .ImageGrid_thumbButton__rjMVx { aspect-ratio: 203 / 152; }
  .ImageGrid_thumbRow__5PPrN {
    display: flex;
    flex-wrap: wrap;
    height: auto;
  }
  .ImageGrid_image16Icon__W0Hz4,
  .ImageGrid_allImagesCard__IZbeU,
  .ImageGrid_thumbButton__rjMVx {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc((100% - 36px) / 4);
    max-width: none;
  }
  .ImageGrid_allImagesCard__IZbeU { aspect-ratio: 203 / 152; height: auto; }
  .ImageGrid_infoCard__GFbvU { max-width: 100%; padding: 24px; }
  .ImageGrid_detailsGrid__U75aQ { gap: 24px; flex-wrap: wrap; }
  .ImageGrid_detailsCol__NAQwx { flex: 1 1 100%; gap: 20px; }
  .ImageGrid_detailLabel__Fi-st { width: 105px; font-size: 14px; }
  .ImageGrid_detailValue__GxKjV, .ImageGrid_detailValueLg__RZFgi { font-size: 14px; }
  .ImageGrid_infoBlocks__acvBO { gap: 32px; }
}

/* ============================================================================
 * MOBILE PIXEL-PERFECT SPEC (≤ 768 px, reference viewport 360 px)
 *
 *   Black page background hosts:
 *     • Image carousel  — 336 × 240 cards (12 L / 12 R), horizontal snap
 *     • Pagination dots — MAX 8 dots, active orange 10 px, inactive 8 px
 *                         (windowed mapping when photo count > 8)
 *
 *   Then a 360 × 935 gray card (#1D1D1B) sits flush to the edges with
 *   12 L / 12 R inner padding and stacks:
 *     • TRADED chip (top right, 4 px radius)
 *     • Vehicle Information section
 *     • Auction Details section
 *     • Description section
 *     • EXACT COST IN BULGARIA CTA (solid orange, 4 px radius)
 *
 *   Typography:
 *     • Section title    : Mazzard H Bold, 18 px, white, uppercase
 *     • Field label      : Mazzard H Regular, 14 px, #949494, Title Case
 *     • Field value      : Mazzard H Bold, 16 px, #FEAE00, uppercase
 *     • Bid price value  : Mazzard H Bold, 24 px, #FEAE00
 *     • Description body : Mazzard H Regular, 14 px, #949494, 1.4 line height
 *     • TRADED text      : Mazzard H Bold, 14 px, #FEAE00, uppercase
 *     • CTA text         : Mazzard H SemiBold, 14 px, #000, uppercase
 *
 *   Vehicle Info / Auction Details use a 2-col grid (1fr 1fr, gap 16 16).
 *   Location row spans both columns. Labels sit above values, 6 px gap.
 * ========================================================================= */
@media screen and (max-width: 768px) {
  /* Section wrapper — kill side paddings so the gray card is full-bleed. */
  .ImageGrid_imageGridWrapper__FOGgc {
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    background-color: #000;
  }

  /* Hide the desktop photo column entirely on mobile. */
  .ImageGrid_imageColumn__kK2nO { display: none !important; }
  /* Hide the desktop info card — the mobile version below replaces it. */
  .ImageGrid_infoCard__GFbvU { display: none !important; }

  /* Stacked single-column container — switch to flex (avoids grid track
   * min-content blowup when an item's natural width > viewport). */
  .ImageGrid_imageGrid__ruVn2 {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    max-width: 100vw;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /* ── MOBILE GALLERY — horizontally-scrollable carousel ────────────────
   * Carousel area sits on BLACK background with 12 px L/R outer padding so
   * the image cards are 336 px wide (360 − 24). 240 px tall per Figma. */
  .ImageGrid_mobileGallery__Jle7b {
    display: block;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    padding: 0 12px;
    background-color: #000;
    overflow: hidden;
    box-sizing: border-box;
  }
  .ImageGrid_mobileScroller__1BUNE {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 240px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    border-radius: 0;                 /* strict spec — sharp corners on mobile */
  }
  .ImageGrid_mobileScroller__1BUNE::-webkit-scrollbar { display: none; }
  .ImageGrid_mobileSlide__1yr76 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: 240px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-appearance: none;
            appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: var(--color-gray-500);
    cursor: pointer;
    display: block;
    box-sizing: border-box;
  }
  .ImageGrid_mobileSlideImg__DHv0A {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── PAGINATION DOTS — max 8, active orange (10 px), inactive #5A5A5A ── */
  .ImageGrid_mobileDots__rMed8 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 16px 0 16px 0;
    padding: 0 12px;
    flex-wrap: nowrap;
    background-color: #000;
    min-height: 12px;
  }
  .ImageGrid_mobileDot__wfLZj {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5A5A5A;        /* muted gray visible on black */
    border: 0;
    flex-shrink: 0;
    transition: background-color 0.18s ease, transform 0.18s ease, width 0.18s ease, height 0.18s ease;
  }
  .ImageGrid_mobileDotActive__MO4Us {
    width: 10px;
    height: 10px;
    background-color: var(--color-orange-100);   /* #FEAE00 */
  }

  /* ── MOBILE INFO CARD — gray (#1D1D1B), 12 L / 12 R inside, 32 bottom ── */
  .ImageGrid_mobileInfoCard__k97Cm {
    display: block;
    width: 100%;
    max-width: 100vw;
    background-color: #1D1D1B;
    box-sizing: border-box;
    padding: 16px 12px 32px;
  }
  .ImageGrid_mobileInfoInner__d9Mfr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* TRADED chip — right aligned, 4 px radius, orange ring */
  .ImageGrid_mobileTradedRow__d5wuD {
    display: flex;
    justify-content: flex-end;
  }
  .ImageGrid_mobileTradedBtn__aoSmT {
    cursor: pointer;
    border: 1px solid #FEAE00;
    background: transparent;
    color: #FEAE00;
    font-family: var(--font-mazzard);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 4px;
    height: 34px;
    box-sizing: border-box;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
  }
  .ImageGrid_mobileTradedBtn__aoSmT:hover { background-color: rgba(254, 174, 0, 0.08); }

  /* Section block — header (with 1 px divider) + 16 px gap → content. */
  .ImageGrid_mobileSection__IuMYL {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;                       /* divider line → content (default) */
  }
  /* Description override: line → text gap is 24 px per spec. */
  .ImageGrid_mobileSectionDescription__YUBoe { gap: 24px; }

  .ImageGrid_mobileSectionHeader__CznJy {
    border-bottom: 1px solid #555452;  /* divider — 1 px, color per spec */
    padding-bottom: 8px;               /* title text → divider line */
  }
  .ImageGrid_mobileSectionTitle__NSAUA {
    margin: 0;
    font-family: var(--font-mazzard);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  /* 2-col paired grid: Brand|Model, Year|Mileage, etc. */
  .ImageGrid_mobileVehicleGrid__CtP\+i {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
    column-gap: 16px;
    grid-row-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }
  .ImageGrid_mobRow__Ex5VM {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
  }
  .ImageGrid_mobRowSpan__75FVO { grid-column: 1 / -1; }
  .ImageGrid_mobLabel__alEe1 {
    color: #949494;
    font-family: var(--font-mazzard);
    font-weight: 400;                /* H Regular */
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
  }
  .ImageGrid_mobValue__zmSwm {
    color: #FEAE00;
    font-family: var(--font-mazzard);
    font-size: 14px;
    line-height: 1.1;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100%;
  }
  /* Value weight variants per spec:                                       */
  /*  • Vehicle Info field values (Year=2025, AIR, SEDAN, etc.) → H Medium */
  /*  • Auction Details standard values (LOT/VIN/COPART/Updated) → H Reg.  */
  /*  • Location value                                            → H Bold */
  .ImageGrid_mobValueRegular__IyTgv { font-weight: 400; }
  .ImageGrid_mobValueMedium__zycu7  { font-weight: 500; }
  .ImageGrid_mobValueBold__OxtVM    { font-weight: 700; }

  /* Bid Price / Estimated Total — H Medium 20 px per spec. */
  .ImageGrid_mobRowLarge__jocsi .ImageGrid_mobValue__zmSwm {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.05;
  }

  /* Description body */
  .ImageGrid_mobileDescription__yVgDA {
    color: #C8C8C8;
    font-family: var(--font-mazzard);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* CTA — full-width filled orange button, 4 px radius. 32 px above per
   * spec: section→CTA gap is 32, the default infoInner gap is 24, so we
   * add 8 px margin-top on the button itself (24 + 8 = 32). */
  .ImageGrid_mobileCta__2GRMQ {
    width: 100%;
    height: 45px;
    background-color: #FEAE00;
    color: #000;
    font-family: var(--font-mazzard);
    font-weight: 500;                /* H Medium */
    font-size: 14px;
    text-transform: uppercase;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background-color 0.15s ease;
    margin-top: 8px;
  }
  .ImageGrid_mobileCta__2GRMQ:hover { background-color: #FFBF2D; }
}

/* ── Earlier responsive — clamp-based desktop-to-tablet scaling ───────── */

/* =============================================================================
 * CostCalculator (FrameComponent4) — "Cost calculator for this car"
 *
 * STRICT pixel spec (May 2026 Figma) at desktop (≥ 1280 px):
 *
 *   Outer placement (matches the two upper blocks):
 *     • page padding-left  : 100 px
 *     • page padding-right : 100 px
 *     • inner card frame   : 1720 × 1356 (hug, content-driven)
 *
 *   Card frame:
 *     • inner padding             : 72 px (all sides)
 *     • card vertical block-gap   : 72 px (header → columns)
 *
 *   Two-column layout (Pre-filled from auction | Cost estimate):
 *     • column gap                : 72 px
 *     • inside each column:
 *         - heading → first row   : 56 px
 *         - row-to-row gap        : 24 px
 *
 *   Typography (Mazzard H family):
 *     • Title  "Cost calculator for this car" : 40 px H Bold (700)
 *     • Sub-headers PRE-FILLED / COST ESTIMATE : 18 px H SemiBold (600)
 *     • Pre-filled row labels   (left col)     : 14 px H Regular (400) white
 *     • Pre-filled row values   (left col)     : 14 px H Bold (700) orange #FEAE00
 *     • Cost-estimate row labels (right col)   : 14 px H Medium (500) white
 *     • Cost-estimate row values (right col)   : 14 px H Medium (500) white
 *     • Subtotal block label  (CAR & AUCTION,
 *       LOGISTICS, CUSTOMS & FINAL FEES)       : 14 px H Medium (500) #949494 (grey)
 *     • Subtotal block value                   : 14 px H Medium (500) white
 *     • TOTAL APPROXIMATE COST + value         : 18 px H SemiBold (600) orange
 *     • Aux note (top-right)                   : 14 px H Regular (400) grey
 *     • CTA "I want a complete calculation"    : 14 px H Medium, 327 × 45,
 *                                                radius 6 (component default).
 * ====================================================================== */

/* ── Outer wrapper: full width, 100 px page padding L/R ─────────────────── */
.CostCalculator_calculatorContainerWrapper__w-fyN {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* L/R 100 strict; B padding tuned so GO BACK TO CATALOG below lands
   * exactly 2962 px below the public header bottom (Figma spec). */
  padding: 0 100px 53px;
  box-sizing: border-box;
  text-align: left;
  color: var(--color-white);
  font-family: var(--font-mazzard);
  max-width: 100%;
}

/* ── Dark card frame: 1720-cap wide, 72 px inner padding ────────────────── */
.CostCalculator_calculatorContainer__HEXEz {
  align-self: stretch;
  width: 100%;
  max-width: 1720px;               /* hug per Figma 1720 × 1356 spec */
  background-color: var(--color-gray-500);   /* #1D1D1B */
  /* User spec: unify card radius across the site to 8 px (matches
   * Similar cars, Catalog, Top-deals, Blog cards, Have-a-question). */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 72px;                   /* strict spec */
  box-sizing: border-box;
  gap: 72px;                       /* header → 2-col content */
}

/* ── Header row: title + key-parameters note (right) ────────────────────── */
.CostCalculator_calculatorHeader__Pq\+T8 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
}
.CostCalculator_costCalculatorForContainer__AB0lY {
  margin: 0;
  font-size: 40px;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 700;                /* H Bold */
  font-family: var(--font-mazzard);
  color: var(--color-white);
  letter-spacing: -0.005em;
  display: inline-block;
  max-width: 720px;
}
.CostCalculator_calculator__kt5dQ { color: var(--color-orange-100); }   /* word "calculator" → #FEAE00 */
.CostCalculator_allKeyParameters__nU7Vx {
  width: 371px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;                /* H Regular */
  font-family: var(--font-mazzard);
  color: var(--color-gray-100);    /* #949494 */
  text-align: right;
  flex-shrink: 0;
  max-width: 40%;
}

/* ── Two-column layout (Pre-filled | Cost estimate) ─────────────────────── */
.CostCalculator_auctionParameters__ic2IE {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 72px;                       /* column gap */
  flex-wrap: wrap;
}

/* Left column */
.CostCalculator_frameParent__McCMA {
  flex: 1 1;
  min-width: 489px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 56px;                       /* heading → first row */
}

/* Right column */
.CostCalculator_estimationHeaderParent__HmgMB {
  flex: 1 1;
  min-width: 489px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 56px;                       /* heading → cost breakdown */
}

/* Section header (PRE-FILLED FROM AUCTION / COST ESTIMATE) */
.CostCalculator_preFilledFromAuctionWrapper__8NMRP {
  align-self: stretch;
  border-bottom: 1px solid var(--color-dimgray-200);
  display: flex;
  align-items: center;
  padding: 0 0 12px;
}
.CostCalculator_preFilledFromAuction__09GnL {
  margin: 0;
  font-size: 18px;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 600;                /* H SemiBold */
  font-family: var(--font-mazzard);
  color: var(--color-white);
}

/* ── Left column: pre-filled rows (Auction, Car, Fuel type, Mileage) ───── */
.CostCalculator_frameGroup__7MiuG {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;                       /* row-to-row gap */
}
.CostCalculator_auctionParent__3Fc13 {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* No per-row border in the new spec — the cleaner look matches Figma. */
}
.CostCalculator_auction__mnGBe {
  position: relative;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;                /* H Regular */
  font-family: var(--font-mazzard);
  color: var(--color-white);
}
.CostCalculator_copart__uTaZ4 {
  position: relative;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 700;                /* H Bold */
  font-family: var(--font-mazzard);
  color: var(--color-orange-100);
  text-align: right;
}

/* ── Right column: cost breakdown ─────────────────────────────────────── */
.CostCalculator_costBreakdown__tgf9h {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 56px;                       /* between subtotal-blocks (CAR & AUCTION → LOGISTICS → CUSTOMS) */
}

/* One sub-block (e.g. CAR & AUCTION group, LOGISTICS group, CUSTOMS group) */
.CostCalculator_frameContainer__mXOf\+ {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;                       /* row-to-row gap within sub-block */
}

/* Vehicle purchase price label + input */
.CostCalculator_vehiclePurchasePriceParent__RVPSz {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.CostCalculator_vehiclePurchasePriceContainer__ryHWV {
  align-self: stretch;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;                /* H Medium */
  font-family: var(--font-mazzard);
  color: var(--color-white);
}
.CostCalculator_priceEntry__WB71k {
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid var(--color-dimgray-200);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  height: 44px;
  box-sizing: border-box;
}
.CostCalculator_priceCurrency__nHzkD {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  /* PNG asset is the official € glyph from the design system. */
}
.CostCalculator_fillTheSumm__SOAo8 {
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-mazzard);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
  text-align: left;
  min-width: 0;
  padding: 0;
}
.CostCalculator_fillTheSumm__SOAo8::placeholder { color: var(--color-gray-100); }

/* Simple row: "label ............. value" (between subtotal blocks) */
.CostCalculator_portLoadingHandlingUsaParent__uCuLW,
.CostCalculator_auctionFeeWrapper__vWsat {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.CostCalculator_frameWrapper__Q4Kmi { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; }
.CostCalculator_auctionFee__WLvS4 {
  font-size: 14px;
  line-height: 1;
  font-weight: 500;                /* H Medium */
  font-family: var(--font-mazzard);
  color: var(--color-white);
}
.CostCalculator_lineValue__5VFV0 {
  font-size: 14px;
  line-height: 1;
  font-weight: 500;                /* H Medium */
  font-family: var(--font-mazzard);
  color: var(--color-white);
  white-space: nowrap;
  text-align: right;
}

/* Subtotal row: top-border + grey label + white value (CAR & AUCTION etc.) */
.CostCalculator_frameDiv__div0b,
.CostCalculator_frameParent4__2cJ90 {
  align-self: stretch;
  border-top: 1px solid var(--color-dimgray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  gap: 20px;
}
.CostCalculator_carAuctionWrapper__XWQdo,
.CostCalculator_logisticsToBulgariaWrapper__sY3bf,
.CostCalculator_customsFinalFeesWrapper__0bGC\+ {
  flex: 1 1;
  display: flex;
  align-items: center;
}
.CostCalculator_carAuctionWrapper__XWQdo .CostCalculator_auctionFee__WLvS4,
.CostCalculator_logisticsToBulgariaWrapper__sY3bf .CostCalculator_auctionFee__WLvS4,
.CostCalculator_customsFinalFeesWrapper__0bGC\+ .CostCalculator_auctionFee__WLvS4 {
  color: var(--color-gray-100);    /* subtotal label = grey */
}
.CostCalculator_subTotal__Q0mv3 {
  position: relative;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;                /* H Medium */
  font-family: var(--font-mazzard);
  color: var(--color-white);
  white-space: nowrap;
}

/* ── TOTAL APPROXIMATE COST row + disclaimer (sits below cost-breakdown) ── */
.CostCalculator_totalCost__tR8uE {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
}
.CostCalculator_totalApproximateCost__QtzcK {
  margin: 0;
  font-size: 20px;                 /* spec: H Bold 20 px */
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 700;                /* H Bold */
  font-family: var(--font-mazzard);
  color: var(--color-orange-100);
}
/* ── Approximate-estimate disclaimer card ────────────────────────────────
 * STRICT Figma spec (Frame 1707479465):
 *   • Width            : Fill (max 752 px)
 *   • Height           : Hug (~ 66 px @ single-line content)
 *   • Background       : #2C2418   (dark brown)
 *   • Left border      : 3 px solid #644310 (golden-brown)
 *   • Padding          : 16 px (all sides)
 *   • Inner gap        : 10 px
 *   • Body font        : 14 px H Regular (400) #949494
 *   • "Approximate estimate" prefix : 14 px H SemiBold (600), same grey shade
 *     (it's slightly heavier than the body — that's the only differentiator).
 */
.CostCalculator_estimateDisclaimer__4xz5n {
  align-self: stretch;
  max-width: 752px;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #2C2418;
  border-left: 3px solid #644310;
  padding: 16px;
  gap: 10px;
  margin-top: 16px;
  box-sizing: border-box;
  color: var(--color-gray-100);
}
.CostCalculator_approximateEstimateFinalContainer__2jC82 {
  flex: 1 1;
  position: relative;
  font-size: 14px;
  line-height: 17px;               /* 2 lines + 32 px padding = 66 px hug height per Figma */
  font-weight: 400;                /* body = Regular (400) */
  font-family: var(--font-mazzard);
}
.CostCalculator_approximateEstimateFinalCo__GHlRn { line-height: 17px; font-weight: 400; }
.CostCalculator_approximateEstimate__pmoBq {
  /* Only the lead phrase "Approximate estimate" is heavier than the body. */
  font-family: var(--font-mazzard);
  font-weight: 600;                /* H SemiBold */
  color: var(--color-gray-100);    /* same grey as body */
}

/* ── CTA button row (centred under the right column) ───────────────────── */
.CostCalculator_ctaRow__dzlxx {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 56px;                /* spec: text → button = 56 */
}

/* ── Responsive fallback ──────────────────────────────────────────────────
 * Below 1280 px (tablets / small laptops) → proportional clamps.
 * Below 925 px → 1-column layout.
 */
@media screen and (max-width: 1279px) {
  .CostCalculator_calculatorContainerWrapper__w-fyN { padding: 0 clamp(16px, 7.81vw, 100px) clamp(40px, 7.81vw, 100px); }
  .CostCalculator_calculatorContainer__HEXEz       { padding: clamp(28px, 5.63vw, 72px); gap: clamp(32px, 5.63vw, 72px); }
  .CostCalculator_auctionParameters__ic2IE         { gap: clamp(28px, 5.63vw, 72px); }
  .CostCalculator_frameParent__McCMA,
  .CostCalculator_estimationHeaderParent__HmgMB    { gap: clamp(24px, 4.37vw, 56px); }
  .CostCalculator_costBreakdown__tgf9h             { gap: clamp(24px, 4.37vw, 56px); }
  .CostCalculator_costCalculatorForContainer__AB0lY { font-size: clamp(28px, 3.13vw, 40px); }
}
@media screen and (max-width: 925px) {
  .CostCalculator_auctionParameters__ic2IE { gap: 36px; }
  .CostCalculator_frameParent__McCMA, .CostCalculator_estimationHeaderParent__HmgMB { min-width: 100%; gap: 28px; }
  .CostCalculator_costBreakdown__tgf9h { gap: 28px; }
  .CostCalculator_calculatorHeader__Pq\+T8 { flex-wrap: wrap; }
  .CostCalculator_allKeyParameters__nU7Vx { width: 100%; max-width: 100%; text-align: left; }
}

/* ============================================================================
 * MOBILE PIXEL-PERFECT (≤ 768 px) — strict spec per May 2026 reference
 *
 *   Wrapper   : transparent (black page bg shows through), full-bleed,
 *               padding 32 top / 0 sides / 0 bottom — section title sits
 *               on the black bg with 12 L/R inner padding via own rule.
 *   Title     : "Cost calculator for this car" — Mazzard H Bold 24 px,
 *               white with "calculator" in #FEAE00, uppercase
 *   Subtitle  : "All key parameters..." — Mazzard H Regular 12 px, #949494
 *   Spacing   : 32 from previous block → title
 *               16 between title and subtitle
 *               32 from subtitle → next section (PRE-FILLED FROM AUCTION)
 *
 *   PRE-FILLED FROM AUCTION block (360 × ~203 gray card):
 *     • Background       : #1D1D1B
 *     • Inner padding    : 32 top / 32 bottom, 12 L / 12 R
 *     • Title→divider    : 16 px gap, divider 1 px #555452
 *     • Divider→grid     : 16 px
 *     • 2-col paired grid: Auction | Car, Fuel Type | Mileage
 *     • Row gap          : 16 px, col gap : 16 px
 *     • Label → value    : 6 px gap (column stack)
 *     • Label            : H Regular 14, #949494
 *     • Value            : H Medium 14, #FEAE00, uppercase
 * ========================================================================= */
@media screen and (max-width: 768px) {
  .CostCalculator_calculatorContainerWrapper__w-fyN {
    padding: 32px 0 0;             /* 32 top; 0 sides; sections handle own L/R */
    background-color: transparent;
  }
  .CostCalculator_calculatorContainer__HEXEz {
    background-color: transparent;  /* no inner gray bg on mobile */
    padding: 0;
    gap: 32px;                      /* header (with subtitle) → auction params */
  }
  .CostCalculator_calculatorHeader__Pq\+T8 {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;                      /* title → subtitle = 16 strict */
    padding: 0 12px;                /* 12 L/R per spec */
  }
  .CostCalculator_costCalculatorForContainer__AB0lY {
    font-size: 24px;                /* H Bold 24 per spec */
    line-height: 1.1;
    font-weight: 700;
    max-width: 100%;
    letter-spacing: 0;
  }
  .CostCalculator_allKeyParameters__nU7Vx {
    font-size: 12px;                /* H Regular 12 per spec */
    font-weight: 400;
    line-height: 1.4;
    color: #949494;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  /* ── Auction params row → stack two cards vertically with gap 32. ── */
  .CostCalculator_auctionParameters__ic2IE {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;                       /* PRE-FILLED card → COST ESTIMATE card */
  }

  /* ── PRE-FILLED FROM AUCTION — gray card 360 × ~203 ─────────────────── */
  .CostCalculator_frameParent__McCMA {
    min-width: 100%;
    width: 100%;
    background-color: #1D1D1B;
    box-sizing: border-box;
    padding: 32px 12px;             /* 32 top/bottom; 12 L/R */
    gap: 16px;                      /* title block → grid = 16 */
  }
  .CostCalculator_frameParent__McCMA .CostCalculator_preFilledFromAuctionWrapper__8NMRP {
    border-bottom: 1px solid #555452;
    padding: 0 0 16px;              /* title text → divider line = 16 */
    margin: 0;
  }
  .CostCalculator_frameParent__McCMA .CostCalculator_preFilledFromAuction__09GnL {
    font-size: 18px;                /* H Bold 18 — matches Vehicle Info title */
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .CostCalculator_frameParent__McCMA .CostCalculator_frameGroup__7MiuG {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
    column-gap: 16px;
    grid-row-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }
  /* Pair: label above value, 6 px gap. */
  .CostCalculator_frameParent__McCMA .CostCalculator_auctionParent__3Fc13 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
    flex-wrap: nowrap;
  }
  .CostCalculator_frameParent__McCMA .CostCalculator_auction__mnGBe {
    color: #949494;                 /* H Regular 14, gray */
    font-family: var(--font-mazzard);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
  }
  .CostCalculator_frameParent__McCMA .CostCalculator_copart__uTaZ4 {
    color: #FEAE00;                 /* H Medium 14, orange uppercase */
    font-family: var(--font-mazzard);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100%;
  }

  /* ════════════════════════════════════════════════════════════════════
   *   COST ESTIMATE — gray card 360 × ~1014 (Hug) per Figma reference
   *
   *   Outer:
   *     • Background #1D1D1B, 12 L/R inner padding
   *     • 32 px top to "COST ESTIMATE" title, 32 px bottom (after button)
   *
   *   Internal spacing chain (top → bottom):
   *     COST ESTIMATE                            ←  ↑ 32 from card top
   *       ↓ 8                                       (title → divider)
   *     ─── divider 1 px #555452 ───
   *       ↓ 28
   *     Vehicle purchase price *
   *       ↓ 12
   *     [input box]
   *       ↓ 16
   *     Auction fee
   *       ↓ 16
   *     ─── divider ───  CAR & AUCTION  ........  €4,868
   *       ↓ 40
   *     Port loading & handling (USA)
   *       ↓ 16
   *     Ocean freight (vessel)
   *       ↓ 16
   *     Marine insurance
   *       ↓ 16
   *     Port handling in Bulgaria
   *       ↓ 16
   *     ─── divider ───  LOGISTICS TO BULGARIA ... €3,549
   *       ↓ 40
   *     Customs duty (import tax)
   *       ↓ 16  …  Technotest (BG registration)
   *       ↓ 16
   *     ─── divider ───  CUSTOMS & FINAL FEES … €1,127
   *       ↓ 32
   *     TOTAL APPROXIMATE COST €9,544
   *       ↓ 32
   *     [Approximate estimate box — 16 px inner padding]
   *       ↓ 32
   *     [I WANT A COMPLETE CALCULATION button — 336 × 45]
   *       ↓ 32                                  (button → card bottom)
   *
   *   Typography (Mazzard H):
   *     • COST ESTIMATE title              : H Medium 16, white
   *     • Vehicle purchase price label     : H Medium 14, white
   *     • Body line labels (Auction fee,
   *       Port loading, Ocean, Marine,
   *       Port handling, Customs duty, etc): H Regular 14, white
   *     • Subtotal label (CAR & AUCTION,
   *       LOGISTICS, CUSTOMS & FINAL FEES) : H Medium 14, #949494
   *     • Subtotal value (€4,868 etc.)     : H Medium 14, white
   *     • TOTAL APPROXIMATE COST + value   : H Medium 16, orange
   *     • Approximate estimate lead phrase : H Bold 14, #949494
   *     • Approximate estimate body        : H SemiBold 14, #949494
   *     • Button label                     : H Medium 14, black
   * ════════════════════════════════════════════════════════════════════ */
  .CostCalculator_estimationHeaderParent__HmgMB {
    min-width: 100%;
    width: 100%;
    background-color: #1D1D1B;
    box-sizing: border-box;
    padding: 32px 12px 32px;        /* 32 top — handles "card top → COST ESTIMATE" */
    display: flex;
    flex-direction: column;
    gap: 0;                          /* internal spacings managed per-element */
  }

  /* COST ESTIMATE title block */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_preFilledFromAuctionWrapper__8NMRP {
    border-bottom: 1px solid #555452;
    padding: 0 0 8px;                /* title → divider = 8 */
    margin: 0;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_preFilledFromAuction__09GnL {
    font-size: 16px;                 /* H Medium 16 per spec */
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  /* Breakdown root — divider → first frame = 28 px */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_costBreakdown__tgf9h {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 28px;
  }

  /* Each section block (frameContainer) */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_frameContainer__mXOf\+ {
    display: flex;
    flex-direction: column;
    gap: 16px;                       /* row → row = 16 px */
    margin-bottom: 40px;             /* subtotal → next section header = 40 */
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_frameContainer__mXOf\+:last-of-type {
    margin-bottom: 32px;             /* last block → TOTAL APPROXIMATE COST = 32 */
  }

  /* Vehicle purchase price label + input */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_vehiclePurchasePriceParent__RVPSz {
    gap: 12px;                       /* label → input = 12 */
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_vehiclePurchasePriceContainer__ryHWV {
    font-size: 14px;
    font-weight: 500;                /* H Medium */
    color: #FFFFFF;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_priceEntry__WB71k {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: #555452;
  }

  /* Body line label (Auction fee, Port loading, etc.) — H Regular 14 white */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_auctionFee__WLvS4 {
    font-size: 14px;
    font-weight: 400;                /* H Regular */
    color: #FFFFFF;
    line-height: 1.1;
  }
  /* Body line value — H Regular 14 white right-aligned */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_lineValue__5VFV0 {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.1;
  }

  /* Subtotal rows — border-top is the divider line */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_frameDiv__div0b,
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_frameParent4__2cJ90 {
    border-top: 1px solid #555452;
    padding-top: 8px;                /* line → text = 8 */
    margin-top: 0;                   /* spacing above handled by section/gap (16) */
    gap: 20px;
  }
  /* Subtotal label color override — gray per spec */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_carAuctionWrapper__XWQdo .CostCalculator_auctionFee__WLvS4,
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_logisticsToBulgariaWrapper__sY3bf .CostCalculator_auctionFee__WLvS4,
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_customsFinalFeesWrapper__0bGC\+ .CostCalculator_auctionFee__WLvS4 {
    color: #949494;
    font-weight: 500;                /* H Medium */
  }
  /* Subtotal value (white, H Medium 14) */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_subTotal__Q0mv3 {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
  }

  /* TOTAL APPROXIMATE COST row */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_totalCost__tR8uE {
    margin-top: 0;                   /* gap already handled by frameContainer margin-bottom 32 */
    margin-bottom: 32px;             /* total → disclaimer = 32 */
    gap: 12px;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_totalApproximateCost__QtzcK {
    font-size: 16px;                 /* H Medium 16 per spec */
    font-weight: 500;
    color: #FEAE00;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  /* Approximate estimate disclaimer card */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_estimateDisclaimer__4xz5n {
    max-width: 100%;
    min-height: 0;
    padding: 16px;                   /* 16 all sides per spec */
    margin-top: 0;                   /* gap above provided by totalCost margin-bottom 32 */
    margin-bottom: 32px;             /* disclaimer → button = 32 */
    background-color: #2C2418;
    border-left: 3px solid #644310;
    gap: 10px;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_approximateEstimateFinalContainer__2jC82 {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;                /* body = H SemiBold per spec */
    color: #949494;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_approximateEstimateFinalCo__GHlRn {
    font-weight: 600;
    line-height: 1.4;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_approximateEstimate__pmoBq {
    font-weight: 700;                /* H Bold lead phrase */
    color: #949494;
  }

  /* CTA row — STRICT 336 × 45 yellow button per Figma spec, H Medium 14,
   * 4 px radius. Centred horizontally inside the card on any mobile width
   * (so it does NOT stretch on 390/414/428 px viewports). */
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_ctaRow__dzlxx {
    margin-top: 0;                   /* gap above from disclaimer margin-bottom 32 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_ctaRow__dzlxx button {
    width: 336px !important;
    max-width: 100% !important;
    height: 45px !important;
    border-radius: 4px !important;
    background-color: #FEAE00;
  }
  .CostCalculator_estimationHeaderParent__HmgMB .CostCalculator_ctaRow__dzlxx button > * {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000 !important;
    text-transform: uppercase !important;
  }
}

@media screen and (max-width: 450px) {
  .CostCalculator_calculatorContainer__HEXEz { padding: 0; gap: 32px; }
  .CostCalculator_auctionParent__3Fc13, .CostCalculator_frameDiv__div0b, .CostCalculator_frameParent4__2cJ90, .CostCalculator_auctionFeeWrapper__vWsat, .CostCalculator_portLoadingHandlingUsaParent__uCuLW {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .CostCalculator_totalApproximateCost__QtzcK { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * SingleCarPage / NavigationFooter
 *   Block 1 — "GO BACK TO CATALOG" link
 *   Block 2 — "Have a question? Contact us" contact card
 *
 * STRICT Figma spec (desktop ≥ 1280 px). Reference viewport: 1920 px.
 *
 *   Public-header bottom is the vertical anchor for both blocks.
 *   ┌─────────────────────────────────────────────────────────────┐
 *   │  GO BACK TO CATALOG   top: 2962  size: 185 × 90  centered   │
 *   │   ↕ 73 px                                                   │
 *   │  Contact card         top: 3125  size: 566 × 333            │
 *   │                       left 677 / right 677 (centered)       │
 *   │                       padding: 70 × 153                     │
 *   │                       heading: Mazzard H Bold 32            │
 *   │                       phones : Mazzard H Medium 24          │
 *   │                       heading → phones gap: 32              │
 *   └─────────────────────────────────────────────────────────────┘
 *
 * Mobile / tablet fallbacks below the desktop block use clamp() so the
 * card never breaks at narrow viewports.
 * ───────────────────────────────────────────────────────────────────────── */

.NavigationFooter_navigationContainer__eWnyW,
.NavigationFooter_navigationFooter__3SzGF {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.NavigationFooter_navigationFooter__3SzGF {
  justify-content: center;
  padding: 0 100px 152px;
  box-sizing: border-box;
  text-align: left;
  font-size: 16px;
  color: var(--color-orange-100);
  font-family: var(--font-mazzard);
}
.NavigationFooter_navigationContainer__eWnyW {
  flex-direction: column;
  gap: 73px;             /* 2962 + 90 + 73 = 3125 → contact card top */
  width: 100%;
  align-items: center;   /* horizontal centering of fixed-width children */
}

/* ── "GO BACK TO CATALOG" link ───────────────────────────────────────── */
.NavigationFooter_navigationLinks__nf1QX {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}
.NavigationFooter_goBackTo__6dc6o {
  width: 185px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: underline;
  line-height: 99.9%;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;            /* Mazzard H Medium */
  font-family: var(--font-mazzard);
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.NavigationFooter_goBackTo__6dc6o:hover { color: var(--color-chocolate-100); }

/* ── "Have a question? Contact us" card ───────────────────────────────── */
.NavigationFooter_contactQuestion__Z7\+Cw {
  width: 566px;
  height: 333px;
  box-sizing: border-box;
  padding: 70px 153px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;                                      /* heading → phones */
  border-radius: 8px;
  border: 1px solid var(--color-orange-100);
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-mazzard);
}

/* Heading block: "Have a question?" + "Contact us" stacked */
.NavigationFooter_navigation__Jb0kG {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 0;
}
.NavigationFooter_haveAQuestion__URu\+- {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: 32px;             /* Mazzard H Bold 32 */
  font-weight: 700;
  line-height: 1.1;
  font-family: inherit;
  color: inherit;
  text-align: center;
}

/* Phones block */
.NavigationFooter_navigation2__bbrfb {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 17px;
  color: var(--color-orange-100);
}
.NavigationFooter_h3__XMoFZ {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: 24px;             /* Mazzard H Medium 24 */
  font-weight: 500;
  line-height: 1.1;
  font-family: inherit;
  text-align: center;
}
.NavigationFooter_phoneLink__4hJq9 {
  color: inherit;
  text-decoration: none;
}
.NavigationFooter_phoneLink__4hJq9:hover { color: var(--color-chocolate-100); }

/* ── Responsive fallbacks ────────────────────────────────────────────── */
@media screen and (max-width: 1279px) {
  .NavigationFooter_navigationContainer__eWnyW { gap: clamp(40px, 5vw, 73px); }
  .NavigationFooter_contactQuestion__Z7\+Cw {
    width: clamp(320px, 50vw, 566px);
    height: auto;
    min-height: clamp(260px, 24vw, 333px);
    padding: clamp(40px, 5vw, 70px) clamp(40px, 12vw, 153px);
  }
  .NavigationFooter_haveAQuestion__URu\+- { font-size: clamp(22px, 2.4vw, 32px); }
  .NavigationFooter_h3__XMoFZ { font-size: clamp(18px, 1.8vw, 24px); }
}
@media screen and (max-width: 925px) {
  .NavigationFooter_navigationFooter__3SzGF { padding-bottom: 99px; box-sizing: border-box; }
  .NavigationFooter_navigationContainer__eWnyW { gap: 56px; }
}

/* ============================================================================
 * MOBILE PIXEL-PERFECT (≤ 768 px)
 *
 *   Vertical spacing chain:
 *     • End of COST ESTIMATE card  ↓ 128 px  → GO BACK TO CATALOG link
 *     • GO BACK TO CATALOG          ↓ 128 px  → Have a question? card
 *
 *   GO BACK TO CATALOG link:
 *     • H Medium 16 px, orange, underlined, centered
 *
 *   Contact card (336 × Hug, 12 L/R from page edges):
 *     • 1 px orange ring, sharp corners (radius 0)
 *     • Inner padding 32 top / 32 bottom, 16 L / 16 R
 *     • "Have a question?"      → H Bold 24, white, line-height 1.1
 *     • 12 px gap
 *     • "Contact us"            → H Bold 24, white
 *     • 32 px gap
 *     • Phone #1                → H Medium 16, orange
 *     • 16 px gap
 *     • Phone #2                → H Medium 16, orange
 * ========================================================================= */
@media screen and (max-width: 768px) {
  .NavigationFooter_navigationFooter__3SzGF {
    padding: 128px 12px 0;            /* 128 above GO BACK; 12 L/R; bottom handled by container */
    box-sizing: border-box;
  }
  .NavigationFooter_navigationContainer__eWnyW {
    gap: 128px;                       /* GO BACK → contact card = 128 */
    align-items: stretch;
  }
  .NavigationFooter_navigationLinks__nf1QX { width: 100%; padding: 0; }
  .NavigationFooter_goBackTo__6dc6o {
    width: auto;
    height: auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
  }
  .NavigationFooter_contactQuestion__Z7\+Cw {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 32px 16px;               /* 32 top/bottom; 16 L/R */
    gap: 32px;                        /* heading block → phones = 32 */
    border: 1px solid var(--color-orange-100);
    border-radius: 0;                 /* sharp corners per Figma */
    box-sizing: border-box;
  }
  .NavigationFooter_navigation__Jb0kG {
    gap: 12px;                        /* Have a question? → Contact us = 12 */
  }
  .NavigationFooter_haveAQuestion__URu\+- {
    font-size: 24px;                  /* H Bold 24 */
    font-weight: 700;
    line-height: 1.1;
  }
  .NavigationFooter_navigation2__bbrfb {
    gap: 16px;                        /* between phone rows = 16 */
  }
  .NavigationFooter_h3__XMoFZ {
    font-size: 16px;                  /* H Medium 16 */
    font-weight: 500;
    line-height: 1.1;
  }
}

@media screen and (max-width: 450px) {
  /* All mobile-specific rules are owned by the @media (max-width: 768px)
   * block above per the May 2026 Figma reference. Intentionally empty to
   * avoid regressions from older overrides. */
}

.CarCard_card__bk29J,
.CarCard_buttonParent__hnUXn {
  height: var(--height-764);
  width: var(--width-560);
  border-radius: 0;                 /* square outer + right panel (user spec) */
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

/* Similar Cars variant: outer card keeps the 8 px rounding (catalog parity). */
.CarCard_cardSimilar__mzhL9,
.CarCard_buttonParentSimilar__57PlO {
  border-radius: 8px;
}
.CarCard_card__bk29J {
  background-color: var(--color-dimgray-100);
  text-align: left;
  font-size: var(--fs-13);
  color: var(--color-black);
  font-family: var(--font-mazzard);
}
.CarCard_buttonParent__hnUXn {
  background-color: var(--color-gray-500);
  overflow: hidden;
  flex-direction: column;
  /* 26 top / 26 horizontal / 40 bottom — Figma spec: bottom (footer → card
     edge) must read 40 px, the other sides stay at 26.  Card height stays
     the same (height: var(--height-764)); the .body flexes to absorb the
     extra 14 px of bottom padding so the footer is pushed UP, not the card. */
  padding: 26px 26px 40px 26px;
  box-sizing: border-box;
  gap: var(--gap-24);
}

/* ── IMAGE ───────────────────────────────────────────────────────────────────── */
.CarCard_imageWrapper__FCveg {
  width: 100%;
  height: 388px;
  position: relative;
  border-radius: 0;                 /* square main image (user spec) */
  overflow: hidden;
  flex-shrink: 0;
}
.CarCard_imageInner__3TJJF {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.CarCard_image15Icon__RTJdM {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.CarCard_tradingDetails__MI2LU {
  position: absolute;
  left: 17px;
  top: 17px;
  height: var(--height-32);
  width: auto;
  min-width: var(--width-189);
  background-color: rgba(255, 255, 255, 0.7);   /* white 70 % per Figma */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--padding-14);
  box-sizing: border-box;
  border-radius: 0;                              /* square corners (user spec) */
}
.CarCard_tradingDate__vb-4K {
  position: relative;
  font-size: var(--fs-13);
  color: var(--color-black);
  font-weight: 500;
  line-height: 99.9%;
  text-transform: capitalize;
}

/* ── BODY ─────────────────────────────────────────────────────────────────────── */
.CarCard_body__tbxWj {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  flex: 1 1;
}

.CarCard_timerRow__Du485 {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  z-index: 2;
  pointer-events: none;                         /* let .iconoirclockParent + .frameIcons re-enable */
}
.CarCard_timerRow__Du485 > * { pointer-events: auto; }
.CarCard_iconoirclockParent__gTCHT {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 138px;                                  /* Figma spec — fixed 138 × 32 */
  height: 32px;
  background-color: #FEAE00CC;                   /* #FEAE00 @ 80 % opacity (Figma) */
  padding: 0 12px;
  border-radius: 0;                              /* square corners (user spec) */
  box-sizing: border-box;
}
.CarCard_iconoirclock__VvScJ {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}
.CarCard_d4h35m__CpHjt {
  position: relative;
  font-size: 14px;
  color: var(--color-black);
  line-height: 99.9%;
  font-weight: 500;
  white-space: nowrap;
}
.CarCard_frameIcons__zvLP9 {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
}
.CarCard_frameIcon__XH0Ey {
  height: var(--height-32);
  width: var(--width-32);
  display: block;
}

/* ── Action icon buttons (share / compare / favorite) ────────────────
 * These wrap each 32 × 32 icon image inside the body's .frameIcons row
 * (and the .mobileActionIcons overlay on mobile). They are real
 * <button>s — clickable independently from the parent <Link>. */
.CarCard_iconBtn__x8Ywp,
.CarCard_mobileIconBtn__b5kVp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform 0.12s ease, filter 0.12s ease;
  flex-shrink: 0;
}
.CarCard_iconBtn__x8Ywp:hover,
.CarCard_mobileIconBtn__b5kVp:hover {
  transform: scale(1.05);
}
.CarCard_iconBtn__x8Ywp:active,
.CarCard_mobileIconBtn__b5kVp:active {
  transform: scale(0.95);
}
.CarCard_iconBtn__x8Ywp:disabled,
.CarCard_mobileIconBtn__b5kVp:disabled {
  cursor: wait;
  opacity: 0.6;
}
/* Active state — applied when compare/favorite is toggled ON. Adds a
 * subtle orange glow so the user gets immediate feedback that the toggle
 * succeeded, without overriding the icon glyph itself. */
.CarCard_iconBtn__x8Ywp.CarCard_iconBtnActive__hy7W3,
.CarCard_mobileIconBtn__b5kVp.CarCard_iconBtnActive__hy7W3 {
  filter: drop-shadow(0 0 4px rgba(254, 174, 0, 0.6));
}

/* ── TITLE ───────────────────────────────────────────────────────────────────── */
.CarCard_titleBlock__VL6qH {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: var(--fs-24);
  color: var(--color-white);
}
.CarCard_lucidMotorsAir__MdRFa {
  margin: 0;
  font-size: 24px;                  /* Mazzard H Bold 24 (Figma) */
  font-weight: 700;
  line-height: 1.15;
  font-family: inherit;
  text-transform: capitalize;
  color: #FFFFFF;
}
.CarCard_detailsBlock__iVwka {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-14);
  color: var(--color-whitesmoke);
  margin-top: 21.5px;                            /* Figma: title → Purchase price box = 21.5 px */
}
.CarCard_row1__Lwlug {
  display: flex;
  align-items: stretch;
  gap: 66px;                                     /* Figma: Purchase Price box → Mileage = ~66 px */
}
.CarCard_purchasePriceParent__9Lf5B {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
/* Black "Purchase Price" box — fixed 242 × 100, label + value INSIDE. */
.CarCard_priceSquaresParent__tR14Q {
  position: relative;
  width: 242px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  box-sizing: border-box;
  color: var(--color-orange-100);
  z-index: 1;
  border-radius: 8px;
  background-color: #000000;
}
.CarCard_priceSquares__8gnNv { display: none; }                 /* legacy bg layer no longer needed */
.CarCard_purchasePrice__25YaM {
  position: relative;
  font-size: 14px;                              /* Mazzard H Medium 14 (Figma) */
  font-weight: 500;
  color: #FFFFFF;
  line-height: 99.9%;
  text-transform: capitalize;
}
.CarCard_h3__Lo6Ri {
  margin: 0;
  position: relative;
  font-size: 20px;                              /* H Bold 20 (Figma) */
  font-weight: 700;
  line-height: 99.9%;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--color-orange-100);
  z-index: 1;
  white-space: nowrap;
}
.CarCard_mileageEngineBlock__W0JbP {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Each Mileage / Engine / Drive line — label left (white H Medium 14),
   value right (yellow H Bold 14).  Single-row grid keeps them aligned
   no matter how long the value is. */
.CarCard_specRow__-qibG {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  grid-column-gap: 16px;
  column-gap: 16px;
  font-size: 14px;
  line-height: 99.9%;
  white-space: nowrap;
}
.CarCard_specLabel__frOLy {
  font-weight: 500;                            /* Mazzard H Medium */
  color: #FFFFFF;
  text-transform: capitalize;
}
.CarCard_specValue__baa2J {
  justify-self: end;
  font-weight: 700;                            /* Mazzard H Bold */
  color: var(--color-orange-100);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* legacy classes kept as fallbacks (no longer rendered on desktop) */
.CarCard_labelsCol__yETBl,
.CarCard_valuesCol__JWw4B {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.CarCard_valuesCol__JWw4B { color: var(--color-orange-100); }
.CarCard_mileage__3mXEU,
.CarCard_engine__TEN7p,
.CarCard_km__vJwvo,
.CarCard_lPetrol__Q1KvY {
  position: relative;
  line-height: 99.9%;
  text-transform: capitalize;
  white-space: nowrap;
}
.CarCard_km__vJwvo,
.CarCard_lPetrol__Q1KvY { text-transform: uppercase; }
.CarCard_row2__Itu\+7 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.CarCard_driveParent__IcTqx {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-44);
}
.CarCard_drive__2TgpK {
  position: relative;
  line-height: 99.9%;
  text-transform: capitalize;
  color: var(--color-white);
}
.CarCard_allWheel__iQphs {
  position: relative;
  line-height: 99.9%;
  text-transform: uppercase;
  color: var(--color-orange-100);
}

/* ── FOOTER ────────────────────────────────────────────────────────────────── */
.CarCard_footerRow__gpHeD {
  display: flex;
  align-items: flex-start;                      /* button top aligns to label top (Figma) */
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--fs-14);
  color: var(--color-whitesmoke);
}
.CarCard_estimatedFinalCostToBulgarParent__iSYg4 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.CarCard_estimatedFinalCost__y3j-L {
  position: relative;
  font-size: 14px;                              /* H Medium 14 (Figma) */
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.2;
}
.CarCard_divFinalCost__Ldk3N {
  position: relative;
  font-size: 16px;                              /* H Bold 16 (Figma) */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-orange-100);
  line-height: 1.1;
  white-space: nowrap;
}

/* ── Mobile-only overlay elements (hidden on desktop by default). ──────── */
.CarCard_mobileImageOverlay__jR6wt { display: none; }
.CarCard_mobileTimerChip__uSPtD {}
.CarCard_mobileTimerClock__JBrbU {}
.CarCard_mobileTimerText__gbsfj {}
.CarCard_mobileActionIcons__gv4X\+ {}
.CarCard_mobileActionIcon__qvjeM {}

/* ============================================================================
 * MOBILE PIXEL-PERFECT (≤ 768 px) — Similar Cars carousel card per Figma
 *
 *   Per the May 2026 screenshot, the layout is:
 *
 *     ┌───────────────────────────────────────────┐
 *     │  ▣ 1d:4h:35m              ⛶  ♡           │  ← image, full-bleed
 *     │       [ car photo — 336 × 240 ]          │     timer chip top-LEFT
 *     │                                          │     action icons top-RIGHT
 *     └───────────────────────────────────────────┘
 *      2025 Lucid Motors Air Pure                    ← title, H SemiBold ~26
 *     ┌──────────────────┐  Mileage   65,900 KM     │
 *     │  Purchase Price  │  Engine    4.6 L / …     │ ← info row, 2 cols
 *     │  €20 000-30 000  │  Drive     ALL-WHEEL     │
 *     └──────────────────┘                          │
 *      Estimated final cost     ┌──────────────────┐
 *      to Bulgaria:             │  MORE DETAILS    │ ← footer row
 *      €50 000-70 000           └──────────────────┘
 *
 *   • Card: full width of section (336 px @ 360 viewport), no rounded
 *     corners, no border, dark gray background only behind the info area
 *   • Image: 336 × 240, edge-to-edge, no padding
 *   • Timer chip: yellow filled #FEAE00, black text H Medium 14,
 *     clock icon 14 × 14, 12 px from top-left of image, 4 px radius
 *   • Action icons: 32 × 32 circular orange rings, 12 px gap, top-right of
 *     image, 12 px from top-right
 *   • Title: H SemiBold ≈ 24, white, 16 px below image, 0 padding L/R
 *     (sits flush at 0 inside card — visual matches screenshot)
 *   • Purchase Price box: padding 24 16, background #000 (dark inset),
 *     label H Regular 18 white, value H Medium 16 orange uppercase
 *   • Mileage / Engine / Drive: 3 stacked rows, label (#949494) left,
 *     value (mileage orange, engine/drive orange) right
 *   • MORE DETAILS button: 172 × 48, #FEAE00 filled, 4 px radius, H Medium
 *     14 black uppercase
 *   • Pagination: arrows in 40 × 40 orange filled CIRCLES, 24 px gap from
 *     "01/10" label (H Medium 14 white)
 * ========================================================================= */
@media screen and (max-width: 768px) {
  /* ── Card outer ───────────────────────────────────────────────────── */
  .CarCard_card__bk29J,
  .CarCard_buttonParent__hnUXn {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    flex-shrink: 0;
  }
  .CarCard_buttonParent__hnUXn {
    padding: 0;
    gap: 0;                          /* control spacing per-section explicitly */
    background-color: #1D1D1B;       /* unified gray surface under the image */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── Image — full bleed 336 × 240 ─────────────────────────────────── */
  .CarCard_imageWrapper__FCveg {
    width: 100%;
    height: 240px;
    border-radius: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: block;
  }
  .CarCard_imageInner__3TJJF { inset: 0; }
  .CarCard_image15Icon__RTJdM { object-fit: cover; }

  /* Hide the old desktop "Trading date" pill on mobile. */
  .CarCard_tradingDetails__MI2LU { display: none !important; }

  /* ── MOBILE OVERLAYS (timer chip + action icons over the image) ───── */
  .CarCard_mobileImageOverlay__jR6wt {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .CarCard_mobileTimerChip__uSPtD {
    position: absolute;
    bottom: 12px;                                /* per Figma: chip at BOTTOM-left of image */
    left: 12px;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 138px;                                /* Figma spec — 138 × 32 fixed */
    height: 32px;
    padding: 0 12px;
    background-color: #FEAE00CC;                 /* #FEAE00 @ 80 % opacity */
    color: #000;
    border-radius: 0;                            /* square corners */
    pointer-events: auto;
    box-sizing: border-box;
  }
  .CarCard_mobileTimerClock__JBrbU {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .CarCard_mobileTimerText__gbsfj {
    font-family: var(--font-mazzard);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #000;
    white-space: nowrap;
  }
  .CarCard_mobileActionIcons__gv4X\+ {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
  }
  .CarCard_mobileActionIcon__qvjeM {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* ── Hide the old in-body timer row (now in image overlay). ───────── */
  .CarCard_timerRow__Du485 { display: none !important; }

  /* ── Body — single gray-bg container under the image ──────────────── */
  .CarCard_body__tbxWj {
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    background-color: #1D1D1B;
  }

  /* ── Title block — sits cleanly on the gray surface BELOW the image
   *    (16 px top padding so it doesn't kiss the image). ──────────── */
  .CarCard_titleBlock__VL6qH {
    padding: 16px 16px 0;
    gap: 0;
    background-color: #1D1D1B;
  }
  .CarCard_lucidMotorsAir__MdRFa {
    margin: 0;
    padding: 0;
    font-size: 20px;                 /* H SemiBold 20 per spec */
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    border: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* ── Details block — 2 col grid (Purchase Price box | M/E/D) ─────── */
  .CarCard_detailsBlock__iVwka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    grid-column-gap: 16px;
    column-gap: 16px;
    grid-row-gap: 12px;
    row-gap: 12px;
    align-items: stretch;
    padding: 16px;
    margin: 16px 0 0;                /* 16 px gap from title block above */
    background-color: #1D1D1B;
    box-sizing: border-box;
  }
  .CarCard_row1__Lwlug { display: contents; }
  .CarCard_row2__Itu\+7 { display: contents; }

  .CarCard_purchasePriceParent__9Lf5B {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 121px;                    /* strict 121 × 78 per spec */
    max-width: 121px;
    height: 78px;
    background-color: #000000;
    padding: 8px 6px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    box-sizing: border-box;
    justify-self: start;
    align-self: center;
  }
  .CarCard_purchasePrice__25YaM {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }
  .CarCard_priceSquaresParent__tR14Q {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .CarCard_priceSquares__8gnNv { display: none; }
  .CarCard_h3__Lo6Ri {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-orange-100);
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
  }

  .CarCard_mileageEngineBlock__W0JbP {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding-top: 0;
    width: 100%;
  }
  .CarCard_driveParent__IcTqx {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  .CarCard_labelsCol__yETBl, .CarCard_valuesCol__JWw4B {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .CarCard_labelsCol__yETBl { align-items: flex-start; }
  .CarCard_valuesCol__JWw4B { align-items: flex-end; text-align: right; }
  .CarCard_mileage__3mXEU, .CarCard_engine__TEN7p {
    font-size: 12px !important;      /* H Regular 12 per spec */
    font-weight: 400 !important;
    color: #949494 !important;
    line-height: 1.2;
  }
  .CarCard_km__vJwvo {
    font-size: 12px !important;      /* H Medium 12 per spec */
    font-weight: 500 !important;
    color: var(--color-orange-100) !important;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .CarCard_lPetrol__Q1KvY {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-orange-100) !important;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .CarCard_drive__2TgpK {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #949494 !important;
    line-height: 1.2;
  }
  .CarCard_allWheel__iQphs {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-orange-100) !important;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* ── Footer — Estimated cost (left) + MORE DETAILS button (right) ── */
  .CarCard_footerRow__gpHeD {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-top: 1px solid #555452;   /* divider between info and footer */
    padding: 16px;
    margin: 16px 0 0;
    background-color: #1D1D1B;
    box-sizing: border-box;
  }
  .CarCard_estimatedFinalCostToBulgarParent__iSYg4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .CarCard_estimatedFinalCost__y3j-L {
    font-size: 12px;                 /* H Regular 12 per spec */
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.3;
  }
  .CarCard_divFinalCost__Ldk3N {
    font-size: 12px;                 /* H Medium 12 per spec */
    font-weight: 500;
    color: var(--color-orange-100);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* MORE DETAILS button — strict 172 × 48 px, H Medium 12 px, radius 4 */
  .CarCard_footerRow__gpHeD button {
    width: 172px !important;
    max-width: 172px !important;
    min-width: 0 !important;
    height: 48px !important;
    border-radius: 4px !important;
    flex-shrink: 0;
    padding: 0 !important;
    background-color: var(--color-orange-100) !important;
  }
  .CarCard_footerRow__gpHeD button > * {
    width: auto !important;
    max-width: 100% !important;
    font-size: 12px !important;      /* H Medium 12 per spec */
    font-weight: 500 !important;
    color: #000 !important;
    text-transform: uppercase !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * SingleCarPage / SimilarCars
 *
 * STRICT Figma spec (desktop ≥ 1280 px, reference viewport 1920 px).
 *
 *   ┌─ width: 1720 ──────────────────────────────────────────────────────┐
 *   │ SIMILAR CARS              (Mazzard H Bold 40, “SIMILAR” white,    │
 *   │                            “CARS” #FEAE00, uppercase, left 100)   │
 *   │   ↕ 72 px                                                          │
 *   │ ┌─ card 560×764 ─┐ 20 ┌─ 560×764 ─┐ 20 ┌─ 560×764 ─┐                │
 *   │ │  …             │    │  …        │    │  …        │  → scroll     │
 *   │ └────────────────┘    └───────────┘    └───────────┘                │
 *   │   ↕ 72 px                                                          │
 *   │                              ← 24  01/10  24 →   (right padding 100)
 *   └────────────────────────────────────────────────────────────────────┘
 *
 *   Cards top from public-header bottom : 3781 px
 *   Total block height (title → pag.)   : ≈ 995 px
 *   Page side padding                   : 100 px L / 100 px R
 *
 *   Single car card: 560 × 764  (defined in CarCard.module.css)
 *   Pagination arrows: 40 × 40 circle icons
 *   Pagination text: Mazzard H Medium 14, white
 * ───────────────────────────────────────────────────────────────────────── */

.SimilarCars_similarCarsContainerWrapper__y2Lkb {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* top padding lands the cards row at top = 3781 from the public-header bottom */
  /* bottom padding = 128 → public footer top sits at 4785 (pag bottom 4656 + 128 + 1 sub-pixel) */
  padding: 59px 100px 128px 100px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  color: var(--color-white);
  font-family: var(--font-mazzard);
}
.SimilarCars_similarCarsContainer__\+ddRR {
  width: 1720px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 72px;
}

/* ── Title row ──────────────────────────────────────────────────────────── */
.SimilarCars_similarCars__Q8NJ7 {
  margin: 0;
  font-size: 40px;
  line-height: 99.9%;
  text-transform: uppercase;
  font-weight: 700;          /* Mazzard H Bold */
  font-family: inherit;
  letter-spacing: 0;
  color: var(--color-white);
}
.SimilarCars_cars__XfOFn { color: var(--color-orange-100); }

/* ── Cards row ──────────────────────────────────────────────────────────── */
.SimilarCars_carCards__k7mUk {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 20px;
  /* On wider-than-page-padding viewports the row that exceeds 1720
   * scrolls horizontally — but the active page slice is always 3 cards
   * so visually the row is fixed and the carousel is driven by the
   * pagination controls below. */
  overflow-x: visible;
  scroll-snap-type: x mandatory;
}

/* ── Pagination row ─────────────────────────────────────────────────────── */
.SimilarCars_pagination__I4W-x {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;                 /* arrow ↔ pageNum ↔ arrow */
  font-size: 14px;
  font-weight: 500;          /* Mazzard H Medium 14 */
  line-height: 99.9%;
  color: var(--color-white);
}
.SimilarCars_pageBtn__TmM2Q {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.SimilarCars_pageBtn__TmM2Q:hover { background-color: rgba(254, 174, 0, 0.08); }
/* The SVG itself draws the disabled (grey) state; we no longer fade the
 * button via opacity because that made the chevron near-invisible on the
 * dark page background. */
.SimilarCars_pageBtn__TmM2Q:disabled { cursor: not-allowed; }
.SimilarCars_pageBtn__TmM2Q:disabled:hover { background-color: transparent; }
/* The "filled" arrow gets its orange fill from the SVG <circle fill>, but
 * the button wrapper should not show its own hover ring on top — it would
 * outline the already-orange filled circle. Suppress the hover bg when
 * the filled state is active. */
.SimilarCars_pageBtn__TmM2Q.SimilarCars_pageBtnFilled__H60zE:hover { background-color: transparent; }
.SimilarCars_lsiconleftFilled__UIgf-,
.SimilarCars_lsiconrightFilled__R4\+GG {
  width: 40px;
  height: 40px;
  display: block;
}
/* Inner chevron glyph natively 5.7 × 9.3 px inside the 40 × 40 viewBox — see
 * /single-car/lsicon-left-filled.svg (outlined) and lsicon-right-filled.svg
 * (filled orange CTA variant). No transform-scale used so the chevron stays
 * pixel-accurate. */
.SimilarCars_pageNum__izuHk {
  position: relative;
  line-height: 99.9%;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  min-width: 36px;           /* "01/10" comfortable width */
  color: var(--color-white);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Responsive fallbacks ──────────────────────────────────────────────── */
@media screen and (max-width: 1875px) {
  /* Below 1720 px page content width we let the cards row become a
   * horizontal scroll instead of forcing wrap (carousel behaviour).
   * Pagination still controls the slice, but a fallback drag/scroll
   * also keeps the layout usable on slightly-cropped widths. */
  .SimilarCars_carCards__k7mUk {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(254, 174, 0, 0.4) transparent;
  }
  .SimilarCars_carCards__k7mUk::-webkit-scrollbar { height: 6px; }
  .SimilarCars_carCards__k7mUk::-webkit-scrollbar-track { background: transparent; }
  .SimilarCars_carCards__k7mUk::-webkit-scrollbar-thumb {
    background: rgba(254, 174, 0, 0.4);
    border-radius: 3px;
  }
}
@media screen and (max-width: 1400px) {
  .SimilarCars_similarCarsContainerWrapper__y2Lkb { padding-bottom: 49px; box-sizing: border-box; }
}
@media screen and (max-width: 925px) {
  .SimilarCars_similarCarsContainerWrapper__y2Lkb {
    padding: 40px 32px 32px;
    box-sizing: border-box;
  }
  .SimilarCars_similarCarsContainer__\+ddRR { gap: 36px; }
  .SimilarCars_similarCars__Q8NJ7 { font-size: 32px; line-height: 99.9%; }
}

/* ============================================================================
 * MOBILE PIXEL-PERFECT (≤ 768 px) — May 2026 Figma spec
 *
 *   • 128 px gap from previous block (Have a question?) → SIMILAR CARS title
 *   • 32 px gap from SIMILAR CARS title → first card
 *   • Card: 336 wide (12 L/R page padding inside the section)
 *   • Pagination: arrows + "01/10" centered, 24 px gap on each side of
 *     the number; 128 px gap from pagination → public footer
 *
 *   Typography:
 *     • SIMILAR (white) + CARS (orange) → H Bold 24
 *     • Pagination "01/10"             → H Medium 14
 * ========================================================================= */
@media screen and (max-width: 768px) {
  .SimilarCars_similarCarsContainerWrapper__y2Lkb {
    padding: 128px 0 128px;          /* 128 above title; 128 below pagination */
    box-sizing: border-box;
  }
  .SimilarCars_similarCarsContainer__\+ddRR {
    width: 100%;
    max-width: 100%;
    gap: 32px;                       /* SIMILAR CARS title → first card = 32 */
    padding: 0 12px;                 /* 12 L/R applies to title + pagination */
    box-sizing: border-box;
  }
  .SimilarCars_similarCars__Q8NJ7 {
    font-size: 24px;                 /* H Bold 24 per spec */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }
  .SimilarCars_carCards__k7mUk {
    /* Horizontal scroll-snap slider — one card per viewport.
     * The scroller sits flush inside the container which already provides
     * the 12 L/R page padding, so each card naturally has 12 L/R margins
     * from the screen edges.
     * scroll-snap-type mandatory + scroll-snap-stop always = snap on swipe
     * after the browser default ~50–60 % visibility threshold. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .SimilarCars_carCards__k7mUk::-webkit-scrollbar { display: none; }
  .SimilarCars_carCards__k7mUk > * {
    flex: 0 0 100%;                  /* exactly one card per slide */
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Pagination — uses inline SVG (ArrowLeftCircle / ArrowRightCircle), the
   * same components as BlogArticlePage so the visual matches the rest of
   * the platform pixel-for-pixel. Each SVG already draws its 40 × 40 circle
   * with the chevron centered inside — the wrapping <button> simply provides
   * a click target and disabled fade. */
  .SimilarCars_pagination__I4W-x {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: nowrap;
    width: 100%;
  }
  .SimilarCars_pageNum__izuHk {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    min-width: 0;
    color: #FFFFFF;
    line-height: 1;
  }
  .SimilarCars_pageBtn__TmM2Q {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
  }
  .SimilarCars_pageBtn__TmM2Q:disabled { cursor: not-allowed; }
  .SimilarCars_pageBtn__TmM2Q svg { display: block; width: 40px; height: 40px; }
  /* Remove every visual override on prev/next — disabled state is rendered
   * by the SVG itself (grey stroke), not by CSS opacity. */
  .SimilarCars_pageBtnPrev__zVbPH,
  .SimilarCars_pageBtnNext__koqRg {
    background: transparent;
    border: 0;
  }
}

@media screen and (max-width: 450px) {
  /* No additional overrides — all rules live in the 768 px block above. */
}

/* ── Skeleton placeholders while /api/public/featured is loading ────────── */
.SimilarCars_skeletonCard__cxeVc {
  width: 560px;
  height: 764px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
.SimilarCars_skeletonImage__Bf90u {
  width: 100%;
  height: 388px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: SimilarCars_simskel-shimmer__rOC6W 1.4s linear infinite;
  border-radius: 8px;
}
.SimilarCars_skeletonLines__Wui2F {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.SimilarCars_skeletonLine__Ematl {
  height: 14px;
  width: 80%;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: SimilarCars_simskel-shimmer__rOC6W 1.4s linear infinite;
  border-radius: 4px;
}
@keyframes SimilarCars_simskel-shimmer__rOC6W {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* =========================================================================
 * Single Car (Figma 'BIBICARS (Origine)') — design tokens.
 *
 * Imported once from SingleCarPage.jsx. These CSS custom properties match the
 * values from `app/global.css` in the original Anima/Figma export so the
 * `single-car1.module.css`-style class names that reference `var(--gap-72)`,
 * `var(--fs-80)`, etc. resolve correctly in our React app.
 *
 * Scoped to `.singleCarRoot` to avoid clashing with any other token system
 * already defined globally (figma_home tokens, shadcn, etc.).
 * ====================================================================== */

.singleCarRoot {
  /* ── Color ───────────────────────────────────────────────────────────── */
  --color-black: #000;
  --color-chocolate-100: #cc7a00;
  --color-chocolate-200: rgba(204, 122, 0, 0.09);
  --color-dimgray-100: #5e5e5e;
  --color-dimgray-200: #555452;
  --color-gainsboro-100: #e8e8e8;
  --color-gainsboro-200: #d9d9d9;
  --color-gray-100: #949494;
  --color-gray-200: #282826;
  --color-gray-300: #2c2418;
  --color-gray-400: #222220;
  --color-gray-500: #1d1d1b;
  --color-gray-600: rgba(255, 255, 255, 0.7);
  --color-orange-100: #feae00;
  --color-orange-200: rgba(254, 174, 0, 0.8);
  --color-saddlebrown: #644310;
  --color-white: #fff;
  --color-whitesmoke: #efefef;

  /* ── Gap ─────────────────────────────────────────────────────────────── */
  --gap-0: 0px;
  --gap-3: 3px;
  --gap-5: 5px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-14: 14px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-22: 22px;
  --gap-24: 24px;
  --gap-26: 26px;
  --gap-28: 28px;
  --gap-32: 32px;
  --gap-36: 36px;
  --gap-44: 44px;
  --gap-48: 48px;
  --gap-56: 56px;
  --gap-64: 64px;
  --gap-68: 68px;
  --gap-72: 72px;
  --gap-107: 107px;
  --gap-255: 255px;
  --gap-274: 274px;
  --gap-10_8: 10.8px;
  --gap-120_3: 120.3px;
  --gap-4_5: 4.5px;
  --gap-8_5: 8.5px;

  /* ── Padding ─────────────────────────────────────────────────────────── */
  --padding-0: 0px;
  --padding-01: 0;
  --padding-1: 1px;
  --padding-2: 2px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-7: 7px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-11: 11px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-15: 15px;
  --padding-16: 16px;
  --padding-17: 17px;
  --padding-19: 19px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-26: 26px;
  --padding-28: 28px;
  --padding-32: 32px;
  --padding-36: 36px;
  --padding-44: 44px;
  --padding-60: 60px;
  --padding-72: 72px;
  --padding-76: 76px;
  --padding-100: 100px;
  --padding-11_5: 11.5px;
  --padding-17_5: 17.5px;
  --padding-22_5: 22.5px;
  --padding-3_2: 3.2px;
  --padding-40_5: 40.5px;

  /* ── Border Radius ───────────────────────────────────────────────────── */
  --br-4: 4px;
  --br-6: 6px;
  --br-8: 8px;

  /* ── Font ────────────────────────────────────────────────────────────── */
  --font-helvetica-now-display: 'Helvetica Now Display', system-ui, sans-serif;
  --font-mazzard: 'Mazzard H', 'Mazzard', system-ui, -apple-system, sans-serif;

  /* ── Font Size ───────────────────────────────────────────────────────── */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-80: 80px;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border-1: 1px solid var(--color-dimgray-100);
  --border-2: 1px solid var(--color-dimgray-100);
  --border-11: 1px solid var(--color-dimgray-200);

  /* ── Width / Height tokens ───────────────────────────────────────────── */
  --height-12: 12px;
  --height-13: 13px;
  --height-15: 15px;
  --height-17: 17px;
  --height-18: 18px;
  --height-19: 19px;
  --height-21: 21px;
  --height-22: 22px;
  --height-24: 24px;
  --height-28: 28px;
  --height-30: 30px;
  --height-32: 32px;
  --height-40: 40px;
  --height-41: 41px;
  --height-45: 45px;
  --height-50: 50px;
  --height-60: 60px;
  --height-64: 64px;
  --height-83: 83px;
  --height-100: 100px;
  --height-152: 152px;
  --height-764: 764px;
  --height-1089_5: 1089.5px;
  --height-160_5: 160.5px;
  --height-373_5: 373.5px;
  --height-49_5: 49.5px;
  --height-61_5: 61.5px;
  --min-w-100: 100px;
  --min-w-213: 213px;
  --width-16: 16px;
  --width-18: 18px;
  --width-24: 24px;
  --width-27: 27px;
  --width-32: 32px;
  --width-36: 36px;
  --width-40: 40px;
  --width-47: 47px;
  --width-54: 54px;
  --width-71: 71px;
  --width-75: 75px;
  --width-81: 81px;
  --width-98: 98px;
  --width-100: 100px;
  --width-125: 125px;
  --width-138: 138px;
  --width-142: 142px;
  --width-156: 156px;
  --width-158: 158px;
  --width-161: 161px;
  --width-171: 171px;
  --width-172: 172px;
  --width-175: 175px;
  --width-178: 178px;
  --width-189: 189px;
  --width-203: 203px;
  --width-204: 204px;
  --width-209: 209px;
  --width-217: 217px;
  --width-242: 242px;
  --width-305: 305px;
  --width-327: 327px;
  --width-443: 443px;
  --width-458: 458px;
  --width-460: 460px;
  --width-473: 473px;
  --width-475: 475px;
  --width-488: 488px;
  --width-517: 517px;
  --width-560: 560px;
  --width-564: 564px;
  --width-848: 848px;
  --width-508_3: 508.3px;
  --width-511_5: 511.5px;

  /* ── Line Heights ────────────────────────────────────────────────────── */
  --lh-14: 14px;
  --lh-16: 16px;
  --lh-19: 19px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-32: 32px;
  --lh-48: 48px;
}

/* =========================================================================
 * SingleCarPage-scoped public-footer override — REMOVED.
 *
 * Previously this file applied `margin-top: -110px` to the inner public
 * footer (`[class*="footer1_footer"]`) only when `body:has(.singleCarRoot)`
 * was active. The intent was to compensate for SimilarCars' 128 px
 * padding-bottom + the footer's intrinsic 110 px top padding-equivalent and
 * land the BIBI logo at the Figma-spec `y = 4785`.
 *
 * The hack worked visually for the inner section but BROKE the layout
 * downstream: the public footer is rendered through `<ScaledChrome>`, whose
 * outer wrapper computes its height from the inner section's natural height
 * (via ResizeObserver). The wrapper sits in normal flow at its natural
 * position; the inner section was pulled up 110 px by the negative margin
 * but the wrapper's height stayed at 1017 px. The net effect was a 110 px
 * band of empty black space between the visible "ALL RIGHT RESERVED" row
 * and the end of the document on every `/cars/:slug` page — the exact
 * "пустота под футером" the user kept reporting.
 *
 * The welcome (`/`) page never had this rule and renders correctly. The
 * fix is therefore to drop the rule entirely; the natural stack
 * (SimilarCars padding-bottom = 128 → footer at its native position) now
 * matches the welcome page behaviour with zero dead space below the legal
 * bar.
 * ====================================================================== */

/* SingleCarPage root — layout container. Each child section manages its
 * own padding so we can hit pixel-precise vertical offsets. No global
 * vertical gap between sections.
 */
.SingleCarPage_singleCar__jMckm {
  width: 100%;
  position: relative;
  background-color: var(--color-black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* No root-level bottom padding. The trailing block (SimilarCars) controls
   * its own 128 px gap to the public footer via its padding-bottom. */
  padding: 0;
  box-sizing: border-box;
  gap: 0;
  line-height: normal;
  letter-spacing: normal;
  color: var(--color-white);
}
@media screen and (max-width: 925px) {
  .SingleCarPage_singleCar__jMckm { padding-bottom: 0; }
}

/* ── Loading / error / not-found state boxes ─────────────────────────── */

/* Phase B2 — Freshness row sits between the header breadcrumb and the
 * ImageGrid, right-aligned on desktop. Solid background — never
 * transparent. */
.SingleCarPage_freshnessRow__DIYTv {
  display: flex;
  justify-content: flex-end;
  padding: 12px 64px 0 64px;
  background: var(--color-black);
}
@media screen and (max-width: 925px) {
  .SingleCarPage_freshnessRow__DIYTv {
    padding: 8px 16px 0 16px;
    justify-content: flex-start;
  }
}
.SingleCarPage_stateBox__TnR8c {
  align-self: center;
  width: 100%;
  max-width: 720px;
  margin: 80px 24px;
  padding: 48px 32px;
  border: 1px solid rgba(254, 174, 0, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--color-white);
}
.SingleCarPage_stateTitle__q8Ecs {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.SingleCarPage_stateText__lay3v {
  font-size: 15px;
  color: #b8b8b8;
  line-height: 1.55;
  max-width: 540px;
}
.SingleCarPage_stateText__lay3v code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(254, 174, 0, 0.1);
  color: #FEAE00;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}
.SingleCarPage_stateBtn__skJXU {
  margin-top: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  background: #FEAE00;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s ease;
}
.SingleCarPage_stateBtn__skJXU:hover { background: #FFBF2D; }

.SingleCarPage_spinner__imlso {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(254, 174, 0, 0.25);
  border-top-color: #FEAE00;
  border-radius: 50%;
  animation: SingleCarPage_scp-spin__M52Hz 0.8s linear infinite;
}
@keyframes SingleCarPage_scp-spin__M52Hz { to { transform: rotate(360deg); } }

/* =============================================================================
 * BIBI Cars — About Us page (V7 — only page-specific styles)
 *
 * NOTE: Header / Footer / Buttons / Breadcrumb / Container / :root vars
 *       are all shared and live in BibiPublicLayout.css.
 *       This file ONLY contains About-page-specific styles:
 *         - Hero tagline (yellow huge text)
 *         - Frame 1 (image + text + image)
 *         - Frame 2 (text + image + text + image)
 *         - CTA section (form + quick-call card)
 *         - Mobile breakpoints for the above
 *
 * Точные координаты с canvas Figma (1920×5031):
 *   FRAME 1 (y=858–1333)
 *     • IMG-0463 (big landscape) :  x=108  y=858   634×475
 *     • TEXT  "Our company..."   :  x≈978  y≈858    ~830×~120
 *     • IMG-0450 (small portrait):  x=1215 y=1030   214×303
 *
 *   FRAME 2 (y=1480–2311)
 *     • HEADLINE "We combine..." :  x≈275  y≈1480  1126×141
 *     • image-84 (small portrait):  x=307  y=1699   236×314
 *     • TEXT "We'll help..."     :  x≈960  y≈1820   ~860×120
 *     • IMG-8461 (big landscape) :  x=928  y=1903   725×408
 *
 *   CTA / Quick Call card        :  x=678  y=3534   564×268
 *
 * Mobile (≤768px) — Figma 360×3671:
 *   • Hero centered, title 36px, tagline 24px yellow
 *   • Frame 1 IMG-0463 wide 70% (252/360), portrait 44% (158/360)
 *   • Frame 2 portrait 44%, IMG-8461 92% full-width
 *   • CTA form full-width, button yellow 100%
 * ========================================================================== */

.bibi-about__main { display: block; }

/* ── About-only tagline-section override ─────────────────────────────────
 * The page now uses the shared <PageHero /> at the very top, and the big
 * yellow tagline ("We are your reliable partner…") follows in its own
 * compact section. We override the global .bibi-hero padding here so the
 * tagline doesn't get the 87 px top breadcrumb-gap (PageHero already
 * provided that). 
 */
.bibi-about-tagline-section {
  padding: 0 0 clamp(60px, 6.6vw, 127px) !important;
}

.bibi-hero__tagline {
  /* Figma: tagline x=344, y=623, font 100, line-height 99.9%.
   * Top margin = PageHero title-bottom → tagline distance (≈ 125 px). */
  margin: clamp(48px, 6.5vw, 125px) 0 0;
  padding-left: clamp(0px, 12.7vw, 244px);
  max-width: 1500px;
  font-size: clamp(34px, 5.2vw, 100px);
  line-height: 1;
  font-weight: 700;
  color: var(--bibi-yellow);
}

/* =============================================================================
 *  FRAME 1 — pixel-perfect at desktop
 *  Canvas y=858–1333  (height 475)
 * ========================================================================== */

.bibi-section { background: var(--bibi-black); }

.bibi-frame-1 {
  position: relative;
  width: 100%;
  /* gap 858 - hero_bottom; padding included via hero */
  padding-top: 0;
  padding-bottom: clamp(60px, 7vw, 130px);
}

.bibi-frame-1__canvas {
  position: relative;
  max-width: var(--bibi-container);
  margin: 0 auto;
  /* canvas section height = 475 ; width = 1920 → aspect-ratio 1920/475 */
  aspect-ratio: 1920 / 475;
}

/* All frame-1 children positioned absolutely on the 1920×475 canvas */
.bibi-frame-1__photo--big {
  position: absolute;
  /* x=108, y=0, w=634, h=475 */
  left: 5.625%;        /* 108 / 1920 */
  top: 0;
  width: 33.0208%;     /* 634 / 1920 */
  height: 100%;
}
.bibi-frame-1__photo--big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-1__photo--small {
  position: absolute;
  /* x=1215, y=172, w=214, h=303 → on 1920×475 canvas
     y % = 172/475 = 36.21%, h % = 303/475 = 63.79% */
  left: 63.281%;       /* 1215 / 1920 */
  top: 36.21%;         /* 172 / 475 */
  width: 11.146%;      /* 214 / 1920 */
  height: 63.79%;      /* 303 / 475 */
}
.bibi-frame-1__photo--small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-1__text {
  position: absolute;
  /* Text "Our company specializes..." top-right block.
     Approx from Figma render: x≈973, y≈18, width≈830, font-size 24 */
  left: 50.677%;       /* 973 / 1920 */
  top: 3.78%;          /* 18 / 475 */
  width: 43.23%;       /* 830 / 1920 */
  margin: 0;
  /* responsive font scaling: at 1920w ⇒ 24px */
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--bibi-white);
}

/* =============================================================================
 *  FRAME 2 — pixel-perfect at desktop
 *  Canvas: section starts at y=1480 (headline) ends at y=2311.
 *  Total height 831. Use canvas 1920×831.
 * ========================================================================== */

.bibi-frame-2 {
  position: relative;
  width: 100%;
  padding-top: clamp(40px, 5vw, 100px);
  padding-bottom: clamp(80px, 10vw, 180px);
}

.bibi-frame-2__canvas {
  position: relative;
  max-width: var(--bibi-container);
  margin: 0 auto;
  /* canvas height 831 (1480→2311); width 1920 */
  aspect-ratio: 1920 / 831;
}

.bibi-frame-2__headline {
  position: absolute;
  /* Figma: x≈275, y≈0 (relative to canvas top), w≈1126, font 40 */
  left: 14.32%;        /* 275 / 1920 */
  top: 0;
  width: 58.65%;       /* 1126 / 1920 */
  margin: 0;
  font-size: clamp(20px, 2.08vw, 40px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--bibi-white);
}

.bibi-frame-2__photo--small {
  position: absolute;
  /* x=307, y=219, w=236, h=314 → on canvas 1920×831
     y%=219/831=26.36%, h%=314/831=37.79% */
  left: 15.99%;        /* 307 / 1920 */
  top: 26.36%;         /* 219 / 831 */
  width: 12.292%;      /* 236 / 1920 */
  height: 37.79%;      /* 314 / 831 */
}
.bibi-frame-2__photo--small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bibi-frame-2__text {
  position: absolute;
  /* "We'll help..." text — top-right area above big landscape photo.
     Approx: x≈960, y≈339, w≈497, font 24 */
  left: 50%;           /* 960 / 1920 */
  top: 40.79%;         /* 339 / 831 */
  width: 30%;          /* 576 / 1920 - a bit wider for safety */
  margin: 0;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--bibi-white);
}

.bibi-frame-2__photo--big {
  position: absolute;
  /* x=928, y=423, w=725, h=408 → canvas 1920×831
     y%=423/831=50.90%, h%=408/831=49.10% */
  left: 48.333%;       /* 928 / 1920 */
  top: 50.90%;         /* 423 / 831 */
  width: 37.76%;       /* 725 / 1920 */
  height: 49.10%;      /* 408 / 831 */
}
.bibi-frame-2__photo--big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
 *  CTA — "Get free professional advice" + form + Quick call card
 * ========================================================================== */

.bibi-cta {
  background: var(--bibi-bg-dark);
  /* Figma: title at y≈2606, form at y≈2891, quick-call at y≈3534
     Section bg = #1D1D1B, top padding ≈170, bottom padding ≈210 */
  padding: clamp(72px, 9vw, 170px) clamp(20px, 6vw, 120px)
           clamp(96px, 13vw, 210px);
}
.bibi-cta__inner {
  max-width: 1330px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 11vw, 220px);
}
.bibi-cta__title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 18px);
  /* Figma: 60px font */
  font-size: clamp(28px, 3.12vw, 60px);
  line-height: 1;
}
.bibi-cta__title-yellow {
  color: var(--bibi-yellow);
  text-transform: uppercase;
}
.bibi-cta__title-white  { color: var(--bibi-white); }

.bibi-form {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 7vw, 85px);
  width: 372px;
  max-width: 100%;
  margin: 0 auto;
}
.bibi-form__fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.bibi-form__field {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.bibi-form__label {
  font-size: 14px;
  color: var(--bibi-white);
  font-weight: 500;
}
.bibi-form__field input {
  width: 100%;
  height: 45px;
  border: 1px solid var(--bibi-border);
  border-radius: 4px;
  background: transparent;
  outline: none;
  color: var(--bibi-white);
  font-family: var(--bibi-font);
  font-size: 14px;
  padding: 0 15px;
  transition: border-color 0.2s ease;
}
.bibi-form__field input::placeholder { color: var(--bibi-text-mute-2); }
.bibi-form__field input:focus { border-color: var(--bibi-yellow); }
.bibi-form__field--phone input { padding-left: 88px; }
.bibi-form__field--invalid input {
  border-color: #ff6464;
}
.bibi-form__field--invalid input:focus {
  border-color: #ff6464;
}
.bibi-form__phone-prefix {
  /* Centre the flag + "+359" group vertically inside the 45 px input
   * so its baseline aligns with the placeholder / typed value. The
   * prefix block is ~18 px tall (dominated by the 24×18 flag image), so
   * (45 - 18) / 2 = 13.5 px from the input's bottom edge centres it
   * exactly. Anchoring by `bottom` (not `top: 50%`) keeps positioning
   * relative to the input area instead of the whole label that also
   * contains the field caption above. */
  position: absolute;
  bottom: 13.5px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-family: var(--bibi-font);
  font-size: 14px;
  line-height: 1;
  color: var(--bibi-white);
}
.bibi-form__phone-prefix img {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}
.bibi-form__error { color: #ff6464; font-size: 13px; text-align: center; }
.bibi-form__ok {
  color: var(--bibi-yellow);
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}
.bibi-form__submit { width: 100%; height: 45px; }

/* quick-call card — Figma: 564×268, x=678 (centered) */
.bibi-quickcall {
  width: 564px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--bibi-yellow);
  border-radius: 8px;
  padding: 51px 112px 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.bibi-quickcall h3 {
  margin: 0;
  font-size: clamp(22px, 1.66vw, 32px);
  line-height: 1;
  font-weight: 700;
  color: var(--bibi-white);
}
.bibi-quickcall__phones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bibi-quickcall a {
  font-family: var(--bibi-font-helv);
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--bibi-yellow);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.bibi-quickcall a:hover { text-decoration: underline; }

/* =============================================================================
 *  RESPONSIVE BREAKPOINTS — only About-page-specific (Frame 1, Frame 2, CTA)
 *  Header/footer responsive lives in BibiPublicLayout.css
 * ========================================================================== */

/* ≤ 1024px — TABLET: switch to flex layout (no more absolute positioning) */
@media (max-width: 1024px) {
  .bibi-frame-1__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 var(--bibi-container-pad);
  }
  .bibi-frame-1__photo--big,
  .bibi-frame-1__photo--small,
  .bibi-frame-1__text {
    position: static;
    width: 100%;
    height: auto;
  }
  .bibi-frame-1__photo--big { aspect-ratio: 634/475; }
  .bibi-frame-1__photo--small {
    aspect-ratio: 214/303;
    width: 50%;
    max-width: 280px;
    align-self: flex-end;
  }
  .bibi-frame-1__text { font-size: 22px; }

  .bibi-frame-2__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 var(--bibi-container-pad);
  }
  .bibi-frame-2__headline,
  .bibi-frame-2__photo--small,
  .bibi-frame-2__text,
  .bibi-frame-2__photo--big {
    position: static;
    width: 100%;
    height: auto;
  }
  .bibi-frame-2__headline { font-size: clamp(22px, 3vw, 32px); }
  .bibi-frame-2__photo--small {
    aspect-ratio: 236/314;
    width: 45%; max-width: 280px;
  }
  .bibi-frame-2__text { font-size: 22px; }
  .bibi-frame-2__photo--big {
    aspect-ratio: 725/408;
    width: 100%;
  }
}

/* =============================================================================
 * ≤ 768px — MOBILE (точно по дизайн-макету Figma 360×3671)
 *
 * Эталонные позиции из SVG (mobile 360px):
 *   Header              : 360×80 px (черный)
 *   Hero (breadcrumb+title+tagline) : центрировано, до y≈340
 *   Photo IMG-0463 wide : x=54  y=356  w=252  h=189  →  70% ширины, 15% pad
 *   Text 1 (white+yellow)
 *   Photo IMG-0450 portr: x=101 y=699  w=158  h=224  →  44% ширины, 28% pad
 *   Text 2 (white+yellow)
 *   Photo image-84 portr: x=101 y=1171 w=158  h=210  →  44% ширины, 28% pad
 *   Text 3 (white)
 *   Photo IMG-8461 wide : x=16  y=1552 w=328  h=184  →  91% ширины, 4.5% pad
 *   CTA section #1D1D1B
 *     Title "Get free professional advice on choosing a car"
 *     Inputs full-width 327×44, button 328×45 yellow
 *   Footer
 * ========================================================================== */
@media (max-width: 768px) {
  :root { --bibi-container-pad: 20px; }

  /* ── Hero: всё центрировано, breadcrumb mute / yellow ─────────────────── */
  .bibi-about .bibi-hero {
    padding: 24px 16px 24px;
    text-align: center;
  }
  .bibi-about .bibi-breadcrumb {
    font-size: 13px;
    text-align: left;
  }
  .bibi-about .bibi-hero__title {
    margin-top: 24px;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    color: var(--bibi-white);
  }
  .bibi-about .bibi-hero__tagline {
    margin: 28px 0 0;
    padding: 0 16px;
    font-size: 24px;
    line-height: 1.05;
    text-align: center;
    color: var(--bibi-yellow);
  }

  /* ── Frame 1 — photo (wide) above, text below, photo (portrait) below ── */
  .bibi-about .bibi-frame-1 { padding: 0 0 32px; }
  .bibi-about .bibi-frame-1__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
  }
  .bibi-about .bibi-frame-1__photo--big,
  .bibi-about .bibi-frame-1__photo--small,
  .bibi-about .bibi-frame-1__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  /* IMG-0463 wide: 70% width, centered */
  .bibi-about .bibi-frame-1__photo--big {
    width: 70%;
    aspect-ratio: 252 / 189;
  }
  /* Text "Our company..." — white with yellow accent, centered */
  .bibi-about .bibi-frame-1__text {
    width: calc(100% - 32px);
    margin: 0 16px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
    color: var(--bibi-white);
  }
  /* IMG-0450 portrait: 44% width, centered */
  .bibi-about .bibi-frame-1__photo--small {
    width: 44%;
    aspect-ratio: 158 / 224;
    align-self: center;
    max-width: none;
  }

  /* ── Frame 2 — headline, portrait photo, text, big wide photo ─────────── */
  .bibi-about .bibi-frame-2 { padding: 0 0 48px; }
  .bibi-about .bibi-frame-2__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
  }
  .bibi-about .bibi-frame-2__headline,
  .bibi-about .bibi-frame-2__photo--small,
  .bibi-about .bibi-frame-2__text,
  .bibi-about .bibi-frame-2__photo--big {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
  }
  .bibi-about .bibi-frame-2__headline {
    width: calc(100% - 32px);
    margin: 0 16px;
    font-size: 22px;
    line-height: 1.1;
    text-align: center;
    color: var(--bibi-white);
  }
  /* image-84 portrait: 44% centered */
  .bibi-about .bibi-frame-2__photo--small {
    width: 44%;
    aspect-ratio: 158 / 210;
    align-self: center;
    max-width: none;
  }
  .bibi-about .bibi-frame-2__text {
    width: calc(100% - 32px);
    margin: 0 16px;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
    color: var(--bibi-white);
  }
  /* IMG-8461 wide: full width minus 16px each side */
  .bibi-about .bibi-frame-2__photo--big {
    width: calc(100% - 32px);
    margin: 0 16px;
    aspect-ratio: 328 / 184;
  }

  /* ── CTA — form full-width, yellow submit ─────────────────────────────── */
  .bibi-about .bibi-cta {
    padding: 48px 16px 48px;
  }
  .bibi-about .bibi-cta__inner {
    gap: 48px;
  }
  .bibi-about .bibi-cta__title {
    font-size: 28px;
    gap: 6px;
  }
  .bibi-about .bibi-form {
    width: 100%;
    gap: 32px;
  }
  .bibi-about .bibi-form__fields { gap: 24px; }
  .bibi-about .bibi-form__field input {
    height: 44px;
    font-size: 14px;
  }
  .bibi-about .bibi-form__submit {
    height: 45px;
    font-size: 14px;
    font-weight: 700;
  }
  /* Quick-call card — narrower mobile padding, yellow border, centered */
  .bibi-about .bibi-quickcall {
    width: 100%;
    padding: 24px 16px;
    gap: 18px;
    border-radius: 8px;
  }
  .bibi-about .bibi-quickcall h3 { font-size: 20px; }
  .bibi-about .bibi-quickcall a { font-size: 18px; letter-spacing: 0.2px; }
}

@media (max-width: 480px) {
  .bibi-about .bibi-hero__title { font-size: 32px; }
  .bibi-about .bibi-hero__tagline { font-size: 22px; padding: 0 8px; }
  .bibi-about .bibi-frame-1__text { font-size: 17px; }
  .bibi-about .bibi-frame-2__headline { font-size: 20px; }
  .bibi-about .bibi-frame-2__text { font-size: 15px; }
  .bibi-about .bibi-cta__title { font-size: 26px; }
  .bibi-about .bibi-quickcall { padding: 20px 12px; gap: 14px; }
  .bibi-about .bibi-quickcall h3 { font-size: 18px; }
  .bibi-about .bibi-quickcall a { font-size: 17px; }
}

/* =============================================================================
 * BIBI Cars — Real Google Maps wrapper (V3 — repositioned, no overlap)
 * - Tabs moved to TOP-RIGHT (Google's auto info panel sits in TOP-LEFT)
 * - CTA moved to BOTTOM-LEFT (Google's "show satellite" sits BOTTOM-LEFT
 *   only as a tiny image; we cover that area)
 * - Compact pill style, translucent background
 * ========================================================================== */

.bibi-office-map {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ─── Tabs (TOP-RIGHT) ──────────────────────────────────────────────────── */

.bibi-office-map__tabs {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(29, 29, 27, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  width: auto;
  max-width: calc(100% - 20px);
}

.bibi-office-map__tab {
  -webkit-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  color: #d6d6d6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.bibi-office-map__tab:hover {
  color: #feae00;
}

.bibi-office-map__tab[data-active="true"] {
  background: #feae00;
  color: #0f0f0f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.bibi-office-map__tab:focus-visible {
  outline: 2px solid #feae00;
  outline-offset: 2px;
}

/* ─── Iframe ──────────────────────────────────────────────────────────── */

.bibi-office-map__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #e5e3df;
}

/* ─── CTA (BOTTOM-LEFT) ────────────────────────────────────────────────── */

.bibi-office-map__cta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  background: rgba(254, 174, 0, 0.95);
  color: #0f0f0f;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  letter-spacing: 0.2px;
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.bibi-office-map__cta:hover {
  background: #ffc23a;
  transform: translateY(-1px);
}

.bibi-office-map__cta:active {
  transform: translateY(0);
}

/* ─── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .bibi-office-map__tabs {
    top: 8px;
    right: 8px;
  }
  .bibi-office-map__tab {
    font-size: 10px;
    padding: 4px 9px;
  }
  .bibi-office-map__cta {
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    padding: 4px 9px;
  }
}

/* =============================================================================
 * BIBI Cars — Contacts page (V5 — EXACT Figma port)
 *
 * Source of truth: /tmp/contacts2/app/contacts.tsx + /tmp/contacts2/public/weui-location-filled.svg
 *
 * EXACT Figma values (1920px viewport):
 *   Pin SVG       : 583.6 × 583.6
 *   Tagline       : 460 × 94 px, font 40 / 99.9% / 700
 *   Pin head outer: ~389 px (66.6% of pin)
 *   Hollow ring center: (291.8, 243.18) → (50%, 41.6%) of pin
 *
 * Derived ratios (preserved across responsive scaling):
 *   Tagline width  / Pin width = 460  / 583.6 = 78.82%
 *   Font size      / Pin width =  40  / 583.6 =  6.85% (= 2.083vw of 1920)
 *   Tagline vert   / Pin height = 41.6% (hollow ring center)
 *
 * Overflow check at 583.6 pin:
 *   tagline 460 vs pin head 389 → (460-389)/2 = 35.5 px per side
 *   at font 40, char width ≈ 18-20 px → 35.5 / 18 ≈ 1.97 → ~2 letters per side ✓
 * ========================================================================== */

/* ─── Hero ─────────────────────────────────────────────────────────────── *
 * NOTE: The breadcrumb + title block is now rendered by the shared
 * <PageHero /> component which has its own padding-top (52 px desktop).
 * We keep this class as a hook for downstream positioning (the pin/map
 * block below the hero), but do NOT add padding here — PageHero handles
 * it. */
.bibi-contacts-hero {
  padding-bottom: 0;
  position: relative;
}

/* ─── Body ─────────────────────────────────────────────────────────────── */

.bibi-contacts {
  background: transparent;
  position: relative;
  padding: 0 0 clamp(60px, 8vw, 150px);
  margin-top: 0;
  z-index: 0;
}

/* ─── PIN BLOCK ─────────────────────────────────────────────────────────
 * Outer .bibi-contacts__pin-block — flex container, centers inner on page.
 * Inner .bibi-contacts__pin-inner  — square box (583.6×583.6 max).
 *      • <img.bibi-contacts__pin>      — fills box behind text (z=0)
 *      • <h2.bibi-contacts__tagline>   — abs centered on hollow ring (z=2)
 * ────────────────────────────────────────────────────────────────────── */

.bibi-contacts__pin-block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Figma reference geometry:
     • h1 ↔ pin section gap = 188.3, pin extends 226.3 above section
       → pin head top = h1_bottom - 38 (small overlap)
     • pin extends 263.3 below section, photo section gap = 263.2
       → pin tip ≈ photo top
     User feedback: "lower the marker, it's too high".
     Compromise: zero overlap with h1 (pin starts cleanly below title). */
  margin: 0 0 0;
  overflow: visible;
}

.bibi-contacts__pin-inner {
  position: relative;
  /* MASTER dimension — pin SVG width.
     At 1920: 30.4vw = 583.7 ≈ 583.6 (Figma exact)
     Compact responsive scaling preserves Figma proportions. */
  width: clamp(380px, 30.4vw, 583.6px);
  aspect-ratio: 583.6 / 583.6;
  overflow: visible;
}

.bibi-contacts__pin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.bibi-contacts__tagline {
  position: absolute;

  /* Width = EXACT Figma ratio 460 / 583.6 = 78.82% */
  width: 78.82%;

  /* Center horizontally + align vertically on hollow ring center */
  left: 50%;
  top: 41.6%;
  transform: translate(-50%, -50%);

  margin: 0;
  text-align: center;

  /* Font = EXACT Figma ratio 40 / 583.6 = 6.85% of pin width
     2.083vw of 1920px = 40px; floor 22, ceil 40 */
  font-size: clamp(22px, 2.083vw, 40px);
  line-height: 0.999;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bibi-yellow);
  text-transform: none;

  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* ─── Map + info row ───────────────────────────────────────────────────── */

.bibi-contacts__row {
  /* Figma: pin tip touches photo top (visual gap ≈ 22px in 1226-px render
     i.e. ≈ 35px at 1920). Use small positive margin so the row sits
     just below the pin tip, not glued to it. */
  margin-top: clamp(20px, 1.8vw, 35px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 3.95vw, 76px);
}

/* Photo — fixed width per Figma (570×381), no flex grow so row stays centered */
.bibi-contacts__photo {
  flex: 0 1 auto;
  margin: 0;
  width: clamp(360px, 36vw, 570px);
  aspect-ratio: 570 / 381;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.bibi-contacts__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info column — fixed Figma width (564px), no flex grow */
.bibi-contacts__info {
  flex: 0 1 auto;
  width: clamp(360px, 36vw, 564px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.08vw, 40px);
  padding-top: clamp(0px, 0.1vw, 1px);
}

.bibi-contacts__info-block {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.25vw, 24px);
}

.bibi-contacts__label {
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 500;
  color: var(--bibi-white);
  text-transform: capitalize;
  line-height: 0.999;
  letter-spacing: 0;
}

.bibi-contacts__addr {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--bibi-yellow);
  text-transform: capitalize;
  letter-spacing: 0;
}

.bibi-contacts__hours {
  font-size: clamp(13px, 0.94vw, 18px);
  color: var(--bibi-text-mute-2);
  line-height: 0.999;
  letter-spacing: 0;
}

.bibi-contacts__phones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bibi-contacts__phones a {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 500;
  color: var(--bibi-yellow);
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1.25;
  transition: opacity .15s ease;
}
.bibi-contacts__phones a:hover { opacity: .85; }

.bibi-contacts__email {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 500;
  color: var(--bibi-yellow);
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0;
  line-height: 1.25;
  word-break: break-all;
  transition: opacity .15s ease;
}
.bibi-contacts__email:hover { opacity: .85; }

/* =============================================================================
 *  RESPONSIVE
 * ========================================================================== */

/* Tablet */
@media (max-width: 1023px) {
  .bibi-contacts {
    padding: 30px 0 80px;
  }
  .bibi-contacts__pin-block {
    margin: clamp(-40px, -2vw, -10px) 0 clamp(20px, 4vw, 50px);
  }
  .bibi-contacts__pin-inner {
    width: min(440px, 60vw);
  }
  .bibi-contacts__tagline {
    /* Keep proportional 78.82% width, font scales to 6.85% of pin */
    font-size: clamp(20px, 4.16vw, 30px);
  }
  .bibi-contacts__row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .bibi-contacts-hero {
    padding: 24px 16px 0;
    text-align: center;
  }
  .bibi-contacts-hero .bibi-breadcrumb {
    text-align: left;
    font-size: 13px;
  }
  .bibi-contacts-hero .bibi-hero__title {
    text-align: center;
    margin-top: 24px;
    font-size: 36px;
  }

  .bibi-contacts {
    padding: 24px 16px 56px;
  }
  /* Pin block — centered, smaller per mobile design */
  .bibi-contacts__pin-block {
    margin: 8px 0 12px;
  }
  .bibi-contacts__pin-inner {
    width: min(280px, 78vw);
  }
  .bibi-contacts__tagline {
    font-size: clamp(18px, 5.6vw, 22px);
    line-height: 1.05;
  }

  /* Map + info: stacked, full-width, info centered */
  .bibi-contacts__row {
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .bibi-contacts__photo {
    width: 100%;
    max-width: none;
    aspect-ratio: 328 / 220;
    border-radius: 8px;
  }
  .bibi-contacts__info {
    width: 100%;
    max-width: none;
    text-align: left;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
  }
  .bibi-contacts__info-block {
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }
  .bibi-contacts__label {
    font-size: 13px;
    color: var(--bibi-white);
  }
  .bibi-contacts__addr {
    font-size: 18px;
    line-height: 1.25;
  }
  .bibi-contacts__hours {
    font-size: 14px;
  }
  .bibi-contacts__phones {
    align-items: flex-start;
  }
  .bibi-contacts__phones a,
  .bibi-contacts__email {
    font-size: 18px;
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .bibi-contacts__pin-inner { width: min(240px, 80vw); }
  .bibi-contacts__tagline {
    font-size: clamp(16px, 5.2vw, 20px);
  }
  .bibi-contacts-hero .bibi-hero__title { font-size: 32px; }
  .bibi-contacts__photo { aspect-ratio: 328 / 200; }
}

/* ── Contact-us CTA (sits below the map + info block) ──────────────
 *
 * A centered yellow pill button + a single short hint line above it.
 * Clicking the button opens the global GetInTouch modal so visitors
 * have a second, obvious path to reach the team straight from the
 * Contacts page without scrolling back up to the header.
 */
.bibi-contacts-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  /* Strict 120 px from the contacts info row → top of the CTA block,
   * exactly as annotated on the Figma. The previous clamp() let it
   * collapse on narrow viewports; we lock the desktop value here and
   * override on the responsive media query below. */
  margin: 120px auto 0;
  padding: 0 20px;
  text-align: center;
  max-width: 720px;
}
.bibi-contacts-cta__hint {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: var(--bibi-font, 'Mazzard H', system-ui, sans-serif);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: #B7B7B5;
  color: var(--bibi-text-mute, #B7B7B5);
}
.bibi-contacts-cta__btn {
  -webkit-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  height: 56px;
  padding: 0 36px;
  /* Match the "Get in touch" CTA radius (6 px = --br-6 from
   * figma-global.css) — these two buttons should read as the same
   * design language across the public site, not a rounded pill vs a
   * gentle-corner rectangle. */
  border-radius: 6px;
  background: #FEAE00;
  color: #0A0A0A;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: var(--bibi-font, 'Mazzard H', system-ui, sans-serif);
  /* H Medium 14 px — same typographic weight as "Send request" and
     "Close" on the modal. Bold (700) was reading as too heavy versus
     the other CTAs; H Medium keeps the brand consistency. */
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(254, 174, 0, 0.18);
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bibi-contacts-cta__btn:hover {
  transform: translateY(-2px);
  background: #FFC23D;
  box-shadow: 0 12px 32px rgba(254, 174, 0, 0.28);
}
.bibi-contacts-cta__btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(254, 174, 0, 0.22);
}
.bibi-contacts-cta__btn:focus-visible {
  outline: 2px solid #FEAE00;
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .bibi-contacts-cta { margin-top: clamp(48px, 9vw, 96px); }
  .bibi-contacts-cta__btn { min-width: 240px; height: 52px; font-size: 14px; padding: 0 28px; }
}

/* =========================================================================
 *  BlogPage — "THE IMPORT INSIDER" (Figma May 2026, 1920 reference)
 *
 *  Strict pixel spec (user-provided session 24+25, 1920):
 *    Outer L/R padding ......... 100 px
 *    Header → HOME/BLOG breadcrumb       =  52 px
 *    Header → "THE IMPORT / INSIDER"     = 148 px
 *    Header → description text (right)   = 314 px
 *    Brackets [ ] ........................ #555452, 15 × 82, right gap 100
 *    HOME / BLOG breadcrumb ............. H7 Bold 20  (HOME white, BLOG #FEAE00)
 *    THE / INSIDER ...................... H Bold 64 white
 *    IMPORT ............................. H Bold 64 #FEAE00
 *    Description first sentence (NO WRAP) H Medium 24 #FEAE00
 *    Description tail ................... H Medium 24 #FFFFFF
 *    Filter pills ....................... padding 12 v / 24 h, radius 24
 *                                          H SemiBold 16, color #555452 (gray)
 *                                          active = bg #FEAE00 / text #18181B
 *    "FEATURED THIS WEEK" / "LATEST ARTICLES"
 *                                          H Regular 14 #555452 (gray)
 *    Tag pill ........................... H Regular 12 #FEAE00
 *    Card big title ..................... H Bold 40 white
 *    Card excerpt ....................... H Regular 14 #949494
 *    Date "May 08" ...................... H Regular 20 #949494
 *    READ ARTICLE ....................... H Medium 14 #FEAE00 + arrow 24×24
 *    Featured card image ................ 513 × 424
 *    Featured ↔ side-stack gap .......... 44 px
 *    Card padding ....................... 24 all
 *    Hover .............................. yellow accent
 *
 *  PublicLayout already supplies the shared header + footer.  This file
 *  intentionally renders ONLY the inner page content.
 * ====================================================================== */

.BlogPage_page__3zzJz {
  background: #000;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  width: 100%;
  min-width: 0;
}

.BlogPage_container__BHL1B {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5.21vw, 100px);   /* 100 @1920, fluid below */
  box-sizing: border-box;
}

/* ------------------------ Breadcrumb — 52 px from page top ----------- */
.BlogPage_breadcrumb__gOElQ {
  padding-top: 52px;                       /* header → breadcrumb top = 52 px (user spec) */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: 20px;                         /* H7 Bold 20 */
  line-height: 99.9%;
  text-transform: uppercase;
  color: #FFFFFF;
}
.BlogPage_breadcrumb__gOElQ a,
.BlogPage_breadcrumb__gOElQ a:visited { color: #FFFFFF; text-decoration: none; }
.BlogPage_breadcrumb__gOElQ .BlogPage_sep__axL-l    { color: #FEAE00; padding: 0 4px; }
.BlogPage_breadcrumb__gOElQ .BlogPage_accent__kiick { color: #FEAE00; }

/* ----------------------- HERO -------------------------------------- *
 *  At 24 px H Medium the yellow sentence
 *  "Expert insights on buying cars from USA & Korean auctions." renders
 *  ~1567 px wide — wider than the content area minus the title.  So we
 *  put the title on its own row and the description on the row below,
 *  spanning the FULL content width (1720 @1920).  The description block
 *  itself stays right-aligned so visually it still sits on the right.
 *  Vertical anchors are preserved exactly (user spec):
 *    title  → 148 from header (hero margin-top 76 + breadcrumb 72)
 *    desc   → 314 from header (title bottom 288 + .heroDescCol mt 26)
 *  ------------------------------------------------------------------ */
.BlogPage_hero__1ScA- {
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* title sizes to content, no stretch */
  margin-top: 76px;                /* 52 + 20 + 76 = 148 from header */
  padding-top: 0;
}

.BlogPage_heroTitleCol__HXrl2 {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.62vw, 12px);
  flex: 0 0 auto;
  width: -webkit-max-content;
  width: max-content;             /* size to widest text line, no shrink */
  max-width: 100%;
}
.BlogPage_heroTitleRow__pODPm {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.25vw, 24px);
  flex-wrap: nowrap;             /* never break "THE IMPORT" onto two lines */
  white-space: nowrap;
  width: -webkit-max-content;
  width: max-content;
}
.BlogPage_titleWord__CZlgX {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;                        /* H Bold */
  font-size: clamp(36px, 3.33vw, 64px);    /* 64 @1920 */
  line-height: 99.9%;
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 0;
}
.BlogPage_titleAccent__z0980 { color: #FEAE00; }

/* Right column — description block — top-distance 314 from page top (header bottom).
 * Hero starts at y=148; this padding pushes desc to y = 148 + 166 = 314.
 * `flex: 0 0 auto` + `margin-left: auto` floats the block to the right while
 * letting its width follow content (so the nowrap first sentence fits). */
.BlogPage_heroDescCol__Nm24n {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;     /* bracket block hugs the right edge */
  align-self: stretch;            /* full content-width row */
  margin-top: 26px;              /* title bottom (288) + 26 = 314 from header */
  min-width: 0;
}

/* Brackets + description ---------------------------------------------- */
.BlogPage_bracketWrap__uuo2S {
  display: flex;
  align-items: stretch;                       /* brackets exactly match descText height */
  gap: clamp(12px, 1.04vw, 20px);
  max-width: 100%;
}
/* Brackets are CSS-rendered divs sized to strictly match the description text
 * height.  At 1920 (font 24, line-height 1.14, 3 lines) text = ~82 px, so
 * bracket height = 82 px (user spec 15 × 82).  The bracket height scales
 * down proportionally with the font on narrower viewports so the top/bottom
 * strokes always sit exactly on the top of line 1 and the bottom of line 3. */
.BlogPage_bracket__Is4ZR {
  width: 15px;
  height: clamp(54px, 4.27vw, 82px);          /* 82 @1920 ↔ 54 @1280, scales with font */
  flex: 0 0 auto;
  display: block;
  border: 3px solid #555452;
  border-right: 0;                            /* default = left bracket [ */
  align-self: stretch;                        /* fills the row height = descText height */
  box-sizing: border-box;
}
.BlogPage_bracketRight__\+lVQw {
  border: 3px solid #555452;
  border-left: 0;                             /* right bracket ] */
}

.BlogPage_descText__-ANoc {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                           /* H Medium */
  font-size: clamp(16px, 1.25vw, 24px);       /* 24 @1920 → 16 @1280 */
  /* line-height 1.14 chosen so that 3 lines stack to ≈82 px at 24 px font
   * (3 × 24 × 1.14 ≈ 82) — matches the 82 px tall bracket exactly. */
  line-height: 1.14;
  text-transform: uppercase;
  color: #FFFFFF;                             /* default = white (descFirst overrides to yellow) */
  text-align: left;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  padding: 0;                                 /* no extra vertical padding — brackets meet text edges */
  box-sizing: border-box;
}
.BlogPage_descFirst__pztuw {
  /* Inline element so it sits on the same line-box rhythm as the white
   * lines below — guarantees identical gap between line 1↔2 and line 2↔3. */
  display: inline;
  white-space: nowrap;                        /* yellow always on a single line */
  color: #FEAE00;                             /* first sentence yellow */
}
.BlogPage_descTail__lPqIt {
  /* Legacy class — no longer used after refactor.  Kept as no-op so any
   * leftover references do not break compilation. */
}

/* -------------------------- Filter pills ----------------------------- *
 *  Anchor: header → filters top = 526 px (user spec).
 *  Hero bottom @1920 is ~398 (right col with desc + content), so we add
 *  ~128 px above filters.  Empirically tuned to land at 526.
 *  ------------------------------------------------------------------- */
.BlogPage_filters__lj5DQ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.83vw, 16px);
  margin-top: 132px;
}
.BlogPage_pill__7cPaX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Symmetric padding per user spec — 12 top / 12 bottom / 24 left / 24 right.
   * Text is now centered both vertically and horizontally inside the pill. */
  padding: 12px 24px;
  border-radius: 24px;
  border: 1px solid #272725;                /* subtle border for inactive */
  background: transparent;
  color: #555452;                           /* GRAY per user spec */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;                         /* H SemiBold 16 */
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.BlogPage_pill__7cPaX:hover {
  border-color: #FEAE00;
  color: #FEAE00;
}
.BlogPage_pillActive__Wj8uB {
  background: #FEAE00;
  border-color: #FEAE00;
  color: #18181B;                            /* dark text on yellow */
}
.BlogPage_pillActive__Wj8uB:hover {
  background: #FFC83F;
  border-color: #FFC83F;
  color: #18181B;
}

/* ------------------ Section header ("FEATURED THIS WEEK" / "LATEST") --
 *  Anchor: header → "FEATURED THIS WEEK" label top = 625 px (user spec).
 *  Filters bottom @1920 ≈ 566 (526 + 40 pill height), so margin-top 59. */
.BlogPage_sectionHeader__xodff {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 57px;
}
.BlogPage_sectionLabel__kxeGG {
  flex: 0 0 auto;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                          /* H Regular per user spec */
  font-size: 14px;                           /* H Regular 14 */
  line-height: 99.9%;
  text-transform: uppercase;
  color: #555452;                            /* GRAY per user spec */
  letter-spacing: 0;
  white-space: nowrap;
}
.BlogPage_divider__3dWcn {
  flex: 1 1 auto;
  height: 1px;
  background: #272725;
}

/* --------------------- Featured-row layout --------------------------- *
 *  Strict spec (user, session 27):
 *    Total row size       1724 × 476 px (right-aligned in container)
 *    Main card            1098 × 476  (inside: img 513×424, padding 24, gap 24)
 *    Side stack           606  × 476  (two cards stacked, 20 px between them)
 *    Main ↔ side gap      20 px
 *  Columns shrink proportionally (1098:606 fr-ratio) below 1724 px content
 *  width — image inside main card scales with the column so the info
 *  column never gets squeezed under ~24% of card width.
 * ------------------------------------------------------------------- */
.BlogPage_featuredRow__fDRDe {
  display: grid;
  grid-template-columns: minmax(0, 1098fr) minmax(0, 606fr);
  grid-column-gap: 20px;
  column-gap: 20px;
  margin-top: 35px;
  width: 100%;
  max-width: 1724px;
  margin-left: auto;                          /* right-align inside container */
}

.BlogPage_featuredCard__4OF6R {
  background: #1D1D1B;
  /* Unified card radius across the site = 8 px (matches catalog,
   * top-deals, similar cars, cost calculator, have-a-question). */
  border-radius: 8px;
  padding: 24px;                              /* inner text padding 24 (user spec) */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;                                  /* image ↔ info — 24 (user spec) */
  height: 476px;                              /* fixed card height (user spec) */
  cursor: pointer;
  /* Yellow outline appears ONLY on hover — never permanently (user req). */
  outline: 1px solid transparent;
  transition: outline-color 150ms ease, background-color 150ms ease;
  box-sizing: border-box;
  min-width: 0;
}
.BlogPage_featuredCard__4OF6R:hover { outline-color: #FEAE00; }

/* Image scales with main-card column to keep info column readable on
 * narrow desktops.  Card height is 476 and outer padding is 24 → inner
 * height = 428.  We force image height to fill that inner height so its
 * bottom edge sits exactly at y = card.bottom − 24, which is also where
 * the info-column bottom row (date + READ ARTICLE) lands — therefore
 * date and image-bottom are visually aligned (user spec). */
.BlogPage_featuredImage__oHUFM {
  width: clamp(280px, 26.72vw, 513px);
  height: 428px;                               /* inner card height = align with info bottom */
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
  background: #0F0F0F;
  align-self: flex-start;
}

.BlogPage_featuredInfo__UWhSz {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;                         /* fill the 428px inner height */
  min-width: 0;
  gap: 24px;
  padding: 0;
}
.BlogPage_featuredTop__WVoEi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.BlogPage_tagPill__hvSgE {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 20px;
  background: #2C2418;
  color: #FEAE00;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                          /* H Regular 12 */
  font-size: 12px;
  line-height: 99.9%;
  text-transform: uppercase;
}

.BlogPage_featuredTitle__d5YSs {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;                          /* H Bold 40 */
  font-size: 40px;
  line-height: 110%;
  color: #FFFFFF;
  text-transform: none;
  /* Clamp to 3 visual lines so the title never pushes the date/CTA out. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.BlogPage_featuredExcerpt__A1D0- {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                          /* H Regular 14 */
  font-size: 14px;
  line-height: 130%;
  color: #949494;
}

.BlogPage_featuredBottom__HeeDl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}
.BlogPage_dateRow__XlE8D {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #949494;                           /* user spec: #949494 */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                          /* H Regular */
  font-size: 12px;                           /* user spec: H Regular 12 */
  line-height: 1;
  white-space: nowrap;
}
.BlogPage_dateRow__XlE8D .BlogPage_dot__gzu\+Y     { color: #949494; }
.BlogPage_dateRow__XlE8D .BlogPage_minRead__xbvxt { color: #949494; font-size: 12px; }

.BlogPage_readBtn__S6NdS {
  border: 0;
  background: transparent;
  color: #FEAE00;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                          /* H Medium 14 */
  font-size: 14px;
  line-height: 99.9%;
  text-transform: uppercase;
  transition: color 120ms ease, gap 120ms ease;
}
.BlogPage_readBtn__S6NdS:hover { color: #FFC83F; gap: 12px; }
.BlogPage_readBtnArrow__5Ow0h  { width: 24px; height: 24px; display: inline-block; }

/* Side stack: 2 cards stacked, total height matches featured card (476).
 * (476 - 20 gap) / 2 = 228 each.  20 px gap between them per user spec. */
.BlogPage_featuredSide__2wkxh {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 476px;
}
.BlogPage_sideCard__xmaB6 {
  background: #1D1D1B;
  border-radius: 8px;                         /* unified card radius (user spec) */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1;
  cursor: pointer;
  /* Yellow outline appears ONLY on hover (user req). */
  outline: 1px solid transparent;
  transition: outline-color 150ms ease;
  box-sizing: border-box;
  min-height: 0;
}
.BlogPage_sideCard__xmaB6:hover { outline-color: #FEAE00; }
/* `sideCardActive` is intentionally left as a no-op — the previous design
 * applied a permanent yellow outline to the "highlighted" card which the
 * user explicitly asked to remove.  The class is kept so the JSX does not
 * need to change, but no visual border is drawn. */
.BlogPage_sideCardActive__vJsl4 { /* no visual change */ }
.BlogPage_sideCardHead__aHxWP {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.BlogPage_sideCardTitle__YN1zI {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 110%;
  text-transform: uppercase;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.BlogPage_sideCardExcerpt__BdVmY {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #949494;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------- LATEST ARTICLES grid ------------------------------
 *  Strict spacing spec (user, session 28):
 *    • bottom of featured row  → gray divider line = 60.5 px
 *    • gray divider line       → first grid card   = 60.5 px
 *    • grid card padding (inner)                   = 24 px
 *    • grid inter-card gap (horizontal & vertical) = 20 px
 *    • page L/R padding (already on .container)    = 100 px @1920
 *
 *  Implementation note: sectionHeader = label + divider laid out as a flex
 *  row whose height equals the label's line-box (≈ 14 px).  The divider is
 *  vertically centred → its centre is sectionHeader.top + ~7 px.  We compen-
 *  sate by subtracting that half-height from both margins so the *visual*
 *  distance from the gray line is exactly 60.5 px.
 * --------------------------------------------------------------------- */
.BlogPage_latestRow__OPX2P {
  margin-top: 53.5px;                          /* 60.5 − 7  →  card.bottom → divider line = 60.5 px */
}
.BlogPage_latestRow__OPX2P .BlogPage_sectionHeader__xodff { margin-top: 0; }   /* divider positioned by latestRow margin alone */

.BlogPage_latestGrid__Gv-l1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px 20px;
  gap: 20px 20px;                              /* 20 vertical + 20 horizontal (user spec) */
  margin-top: 53.5px;                          /* 60.5 − 7  →  divider line → first card top = 60.5 px */
}
.BlogPage_gridCard__U6iAy {
  background: #1D1D1B;
  border-radius: 8px;                         /* unified card radius (user spec) */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  /* Yellow outline appears ONLY on hover (user req). */
  outline: 1px solid transparent;
  transition: outline-color 150ms ease;
  height: 476px;                              /* fixed card height per user spec */
  box-sizing: border-box;
  overflow: hidden;
}
.BlogPage_gridCard__U6iAy:hover { outline-color: #FEAE00; }
.BlogPage_gridImg__4kjek {
  width: 100%;
  height: 240px;                              /* leaves ~188px for the text block within 476 */
  object-fit: cover;
  display: block;
  background: #0F0F0F;
  flex: 0 0 240px;
}
.BlogPage_gridMeta__g8Yh4 {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.BlogPage_gridTitle__rBN6k {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 110%;
  text-transform: uppercase;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.BlogPage_gridExcerpt__pRIBA {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #949494;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Loading / empty states inside featured row */
.BlogPage_loadingRow__Yr7Jj, .BlogPage_emptyRow__BeVt- {
  margin-top: 35px;
  padding: 60px 0;
  text-align: center;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 16px;
  color: #555452;
  background: #1D1D1B;
  border-radius: 4px;
  border: 1px dashed #272725;
}

/* ------------------ Show more ----------------------------------------
 *  H Medium 16 px, centered.  The user-spec anchor "2519 px from header
 *  top to button center" is automatically satisfied because every block
 *  above the button is already anchored to that same spec — we only
 *  enforce the consistent visual spacing here (76 px from the last grid
 *  row, matching the gap before "FEATURED THIS WEEK").
 * --------------------------------------------------------------------*/
.BlogPage_showMoreWrap__hChC1 {
  display: flex;
  justify-content: center;
  padding-top: 76px;
}
.BlogPage_showMore__bCjZ6 {
  background: transparent;
  border: 0;
  color: #FEAE00;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                       /* H Medium */
  font-size: 16px;
  line-height: 100%;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease;
}
.BlogPage_showMore__bCjZ6:hover { color: #FFC83F; }
.BlogPage_showMore__bCjZ6:disabled {
  /* When everything in the latest grid is already visible we keep the button
   * rendered (for layout symmetry per user spec) but make it non-interactive
   * while preserving the visual style — color stays yellow, cursor reverts
   * to default. */
  cursor: default;
  opacity: 1;
}
.BlogPage_showMore__bCjZ6:disabled:hover { color: #FEAE00; }

/* ------------ Free consultation block wrapper -----------------------
 *  User spec (revised, session 31):
 *    • SHOW MORE button bottom        → block top                    = 274 px
 *    • Section size                   = 1920 × 1780 (full bleed)
 *    • "Free consultation" (h3) bot.  → form top                     = 128 px
 *    • SEND REQUEST button bottom     → "Have a question?" card top  = 128 px (revised from 680)
 *    • Contact card bottom            → site footer top              = 161 px
 *
 *  We override <CatalogConsultationBlock /> via its public data-testid
 *  selectors so the same component keeps working unchanged on /catalog.
 * -------------------------------------------------------------------*/
.BlogPage_consultWrap__NuXzR {
  margin-top: 274px;                        /* SHOW MORE bottom → block top (user spec) */
}

/* Mobile: 128 px gap from preceding content to consultation block
 * (matches the /catalog mobile spec). */
@media (max-width: 768px) {
  .BlogPage_consultWrap__NuXzR { margin-top: 128px; }
}

/* Desktop-only overrides — on mobile the shared CatalogConsultationBlock
 * mobile @media rules take effect instead (Figma "Form mobile"). */
@media (min-width: 769px) {
  .BlogPage_consultWrap__NuXzR [data-testid="catalog-consultation-section"] {
    height: 1780px !important;                 /* 1920 × 1780 fixed bleed (user spec) */
    min-height: 1780px !important;
    padding-top: 172px !important;
    padding-bottom: 161px !important;          /* contact card → footer */
    box-sizing: border-box;
  }
  .BlogPage_consultWrap__NuXzR [data-testid="catalog-consultation-form"] {
    margin-top: 128px !important;              /* h3 'Free consultation' → form top = 128 (user spec) */
  }
  .BlogPage_consultWrap__NuXzR [data-testid="catalog-consultation-contact"] {
    margin-top: 128px !important;              /* SEND REQUEST → 'Have a question?' = 128 (revised user spec) */
  }
}

/* Legacy single-button consult placeholder retained for non-blog pages
 * that still reference these class names.  Keeping the rules avoids
 * stale-CSS regressions until those callers are migrated. */
.BlogPage_consultBlock__75TqO {
  background: #1D1D1B;
  padding: 172px 0 161px;
  text-align: center;
  margin-top: clamp(80px, 6.25vw, 120px);
}
.BlogPage_consultTitle__VaEL2 {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: 80px;
  line-height: 99.9%;
  text-transform: uppercase;
  color: #FEAE00;
  margin: 0 0 32px;
}
.BlogPage_consultSubtitle__z5zIR {
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 99.9%;
  color: #FFFFFF;
  margin: 0 0 64px;
}
.BlogPage_consultLink__p9Trn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: #FEAE00;
  color: #18181B;
  border-radius: 6px;
  border: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.BlogPage_consultLink__p9Trn:hover { background: #FFC83F; }

/* =========================================================================
 *  Narrow desktop fallbacks — keep gaps reasonable.
 *  The yellow first sentence keeps `nowrap` for the entire desktop range
 *  (≥1000 px viewport).  Below that we explicitly allow it to wrap.
 *  Mobile (<900 px) is out of scope for this initial pass per user request.
 * ===================================================================== */
@media (max-width: 1000px) {
  .BlogPage_descFirst__pztuw        { white-space: normal; } /* allow wrap only on tiny screens */
}
@media (max-width: 1100px) {
  .BlogPage_featuredRow__fDRDe      { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 32px; }
  .BlogPage_featuredCard__4OF6R     { height: auto; min-height: 420px; flex-direction: column; }
  .BlogPage_featuredImage__oHUFM    { width: 100%; max-width: 100%; height: auto; aspect-ratio: 513 / 424; }
  .BlogPage_featuredSide__2wkxh     { height: auto; }
  .BlogPage_latestGrid__Gv-l1       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
 *  MOBILE LAYOUT (≤ 768 px viewport) — Figma "Blog Mobile" frame.
 *  ──────────────────────────────────────────────────────────────────────
 *  Container: 360 wide, L/R padding 12 px, between-blocks 24 px.
 *  Hero block (336 × ~76 hug):
 *    • HOME / BLOG breadcrumb : H SemiBold 12 (BLOG accent yellow)
 *    • "THE IMPORT INSIDER"   : H Bold     24 (IMPORT yellow)
 *    • "EXPERT INSIGHTS …"    : H Medium   16, yellow first sentence,
 *                                            white tail.
 *  Spacings:
 *    • breadcrumb → title       : 24
 *    • title → description      : 24
 *    • description → filters    : 32
 *    • filters → "FEATURED THIS WEEK" : 32
 *    • section label → first card     : 24
 *    • between cards                  : 24
 *    • card inner padding             : 16
 *    • tag → title                    : 16
 *    • title → excerpt                : 12
 *  Card geometries:
 *    • Featured card 336 × auto (image 336 × 224, rounded 8 top corners)
 *    • Sub-cards    336 × 168 (smaller, horizontal layout image+text)
 *    • Latest grid cards: 336 × auto, 1-column stack
 *  Typography (inside cards):
 *    • Tag pill (MARKET ANALYTICS)    : H Regular 10, yellow
 *    • Date  (May 08, 2026)           : H Regular 12, grey
 *    • "9 min read"                   : H Regular 12, grey
 *    • Title  (Best family SUVs to…)  : H Bold    20, white
 *    • Excerpt                        : H Regular 14, grey/white
 *  ====================================================================== */
@media (max-width: 768px) {
  /* ── Container & breadcrumb ──────────────────────────────────────── */
  .BlogPage_container__BHL1B {
    max-width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .BlogPage_breadcrumb__gOElQ {
    padding-top: 24px;
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 600;                /* SemiBold */
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* ── Hero ────────────────────────────────────────────────────────── */
  .BlogPage_hero__1ScA- {
    margin-top: 24px;
    flex-direction: column;
    align-items: stretch;            /* title stays left, desc centers itself */
    gap: 24px;
    padding: 0;
  }
  .BlogPage_heroTitleCol__HXrl2 {
    width: 100%;
    padding: 0;
    align-items: flex-start;         /* "THE IMPORT INSIDER" stays LEFT-aligned */
  }
  .BlogPage_heroTitleRow__pODPm {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;     /* left-aligned title row */
    width: auto;
  }
  .BlogPage_titleWord__CZlgX {
    font-size: 24px;                 /* H Bold 24 */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: left;
  }
  .BlogPage_heroDescCol__Nm24n {
    width: 100%;
    padding: 0;
    justify-content: center;         /* center description block horizontally */
  }
  .BlogPage_bracketWrap__uuo2S {
    gap: 0;
    width: 100%;
    justify-content: center;
  }
  .BlogPage_bracket__Is4ZR, .BlogPage_bracketRight__\+lVQw { display: none; }      /* drop large desktop brackets */
  .BlogPage_descText__-ANoc {
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-size: 16px;                 /* H Medium 16 */
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;              /* description text — CENTERED (user spec) */
    width: 100%;
    max-width: 100%;
  }
  /* Yellow opener flows inline with the rest — `<br />` in JSX handles
   * line-breaks, so no display:block / margin needed. */
  .BlogPage_descFirst__pztuw { color: #FEAE00; }
  .BlogPage_descTail__lPqIt  { color: #FFFFFF; }

  /* ── Category filters: horizontal scroll ─────────────────────────── */
  .BlogPage_filters__lj5DQ {
    margin-top: 32px;                /* 32 from description bottom */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    /* edge-fade for swipe hint */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .BlogPage_filters__lj5DQ::-webkit-scrollbar { display: none; }
  .BlogPage_pill__7cPaX {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;            /* fully rounded pill (Figma) */
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 600;                /* SemiBold */
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ── Featured section ────────────────────────────────────────────── */
  .BlogPage_sectionHeader__xodff {
    margin-top: 32px;                /* 32 from filters to label */
    gap: 12px;
  }
  .BlogPage_sectionLabel__kxeGG {
    font-size: 14px;                 /* compact for mobile */
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  /* The featured row collapses to a single column; featured card + side
   * cards stack vertically with 24 px gap. */
  .BlogPage_featuredRow__fDRDe {
    margin-top: 24px;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
  }

  /* Featured (main) article card ------------------------------------ */
  .BlogPage_featuredCard__4OF6R {
    width: 100%;
    height: auto;
    min-height: 0;
    background: #1A1B19;
    border-radius: 8px;              /* unified card radius (user spec) */
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    outline: 0;
  }
  .BlogPage_featuredImage__oHUFM {
    width: 100%;
    max-width: none;
    height: 224px;                   /* Figma 336 × 224 */
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 8px 8px 0 0;      /* match card top corners */
  }
  .BlogPage_featuredInfo__UWhSz {
    width: 100%;
    padding: 16px;                   /* 16 inner padding */
    gap: 0;
  }
  .BlogPage_featuredTop__WVoEi {
    align-items: center;
    justify-content: space-between;
    gap: 12px;                       /* 12 between MARKET ANALYTICS tag and date */
  }
  .BlogPage_tagPill__hvSgE {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 400;
    font-size: 10px;                 /* Figma: 10 px */
    line-height: 1;
    letter-spacing: 0.04em;
  }
  .BlogPage_dateRow__XlE8D {
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #949494;
  }
  .BlogPage_dateRow__XlE8D .BlogPage_minRead__xbvxt { font-size: 12px; }
  .BlogPage_featuredTitle__d5YSs {
    margin-top: 12px;                /* 12 from tag/date row → title */
    font-size: 20px;                 /* H Bold 20 */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .BlogPage_featuredExcerpt__A1D0- {
    margin-top: 12px;                /* 12 from title → excerpt */
    font-size: 14px;                 /* H Regular 14 */
    font-weight: 400;
    line-height: 1.45;
    color: #C8C8C8;
  }
  .BlogPage_featuredBottom__HeeDl {
    margin-top: 16px;
    align-items: center;
    justify-content: space-between;
  }
  .BlogPage_readBtn__S6NdS { font-size: 12px; font-weight: 500; }
  .BlogPage_readBtnArrow__5Ow0h { width: 20px; height: 20px; }

  /* ── Featured sidebar (the smaller 336 × 168 sub-cards) ─────────── */
  .BlogPage_featuredSide__2wkxh {
    width: 100%;
    height: auto;
    gap: 24px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .BlogPage_sideCard__xmaB6 {
    width: 100%;
    height: 168px;                   /* Figma 336 × 168 */
    background: #1A1B19;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    outline: 0;
  }
  .BlogPage_sideCardHead__aHxWP {
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .BlogPage_sideCardTitle__YN1zI {
    font-size: 16px;                 /* slightly smaller for compact card */
    font-weight: 700;
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }
  .BlogPage_sideCardExcerpt__BdVmY {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #C8C8C8;
    -webkit-line-clamp: 2;
  }

  /* ── Latest articles row (the bigger grid below) ─────────────────── */
  .BlogPage_latestRow__OPX2P { margin-top: 32px; }
  .BlogPage_latestGrid__Gv-l1 {
    margin-top: 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .BlogPage_gridCard__U6iAy {
    background: #1A1B19;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    outline: 0;
  }
  .BlogPage_gridImg__4kjek {
    width: 100%;
    height: 224px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
  }
  .BlogPage_gridMeta__g8Yh4 { padding: 16px; }
  .BlogPage_gridTitle__rBN6k {
    margin-top: 12px;                /* 12 between tag/date and title */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }
  .BlogPage_gridExcerpt__pRIBA {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #C8C8C8;
  }

  /* ── Show More button — spacing per user spec ────────────────────────
   *   • last card bottom        → SHOW MORE top    = 24  px
   *   • SHOW MORE bottom        → consultation top = 128 px  (consultWrap)
   * ------------------------------------------------------------------*/
  .BlogPage_showMoreWrap__hChC1 {
    margin-top: 24px;
    padding-top: 0;                 /* nullifies desktop's 76 px padding */
  }
  .BlogPage_showMore__bCjZ6 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
}

/* =========================================================================
 *  BlogArticlePage — pixel-precise (Figma May 2026, 1920) — Session 30.
 *
 *  USER SPEC (verbatim, vertical anchors measured from the top of the
 *  header bar — NOT from page top — every spec line preserved):
 *
 *    • Page L/R padding ............................ 100 px
 *    • HOME / BLOG breadcrumb (font H Semibold 20).. 52 px from header
 *    • Title (font H Bold 64, color #FFFFFF) ....... 148 px from header
 *    • Category pill (H Regular 14, radius 20)..... 332 px from header
 *      └ gap pill ↔ date (H Regular 14) ........... 24 px
 *      └ gap date ↔ min-read (gray) ............... 24 px
 *    • Cover / body block top ...................... 422 px from header
 *
 *    Body block geometry:
 *      • Container size .......................... 1720 × 950 px (gray) +
 *        cover image 1720 × 640 stacked on top
 *      • Top padding (cover bottom → first text).. 128 px
 *      • Bottom padding (last text → block end)... 128 px
 *      • Body paragraph font ..................... H Regular 20
 *      • Body heading font ....................... H Regular 32
 *
 *    "You may also be interested in":
 *      • Gap heading → cards ...................... 72 px
 *      • Card cell padding ....................... 24 px
 *      • Gap card image → text inside card ........ 24 px
 *      • Gap date → card title ................... 32 px
 *      • Gap subtitle → text ..................... 24 px
 *      • Inter-card gap (horizontal) ............. 24 px
 *      • Left margin .............................. 100 px (matches page)
 *      • Right edge .............................. → scrollable, no right
 *        padding (per spec — "по правой части идет боковой скролл")
 *      • Pagination = arrow buttons + numbered counter (01 / 10).
 * ===================================================================== */

.BlogArticlePage_shell__C9Lzh {
  /* This wrapper supersedes the inherited .container so we can apply the
   * 100 px L/R padding without breaking other pages that use the standard
   * container.  Anchors below are computed relative to this shell. */
  padding: 0 100px;
  box-sizing: border-box;
  width: 100%;
}

.BlogArticlePage_breadcrumb__yatWo {
  margin-top: 52px;                              /* 52 px from header bottom (user spec) */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;                               /* H Semibold */
  font-size: 20px;
  line-height: 100%;
  text-transform: uppercase;
  color: #FFFFFF;
}
/* HOME / BLOG segments stay white; the active TITLE segment is amber.
 * Component output Breadcrumbs uses <a> for linked items + <span> for
 * the trailing active label.  We re-color via descendant selectors so
 * the existing component keeps working. */
.BlogArticlePage_breadcrumb__yatWo a { color: #FFFFFF; }
.BlogArticlePage_breadcrumb__yatWo a:hover { color: #FEAE00; }
.BlogArticlePage_breadcrumb__yatWo span:last-child { color: #FEAE00; }
.BlogArticlePage_breadcrumb__yatWo svg { color: #5E5E5E; }     /* slash separators */

.BlogArticlePage_header__6EJ0o {
  margin-top: 76px;                              /* 76 + breadcrumb(20) + 52 = 148 — title top per spec */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
}
.BlogArticlePage_title__I3HHy {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;                              /* H Bold */
  font-size: 64px;
  line-height: 1.0;
  color: #FFFFFF;
  text-transform: none;
  max-width: 1240px;                             /* line wrap when overflow */
  word-break: break-word;
}
.BlogArticlePage_metaRow__zB6Jw {
  margin-top: 56px;                              /* aimed at 332 px anchor — adjustable per title height */
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.BlogArticlePage_pill__sND9M {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 20px;                           /* user spec: same shape as catalog filters */
  background: rgba(254, 174, 0, 0.10);
  border: 1px solid rgba(254, 174, 0, 0.40);
  color: #FEAE00;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                              /* H Regular 14 */
  font-size: 14px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0;
}
.BlogArticlePage_dateRow__FcmCg {
  display: inline-flex;
  align-items: center;
  gap: 24px;                                     /* 24 between date and min-read */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                              /* H Regular 14 */
  font-size: 14px;
  line-height: 100%;
  color: #FFFFFF;
  white-space: nowrap;
}
.BlogArticlePage_dateRow__FcmCg .BlogArticlePage_dot__M9avt { display: none; }                 /* dot bullets removed per spec — gaps handle separation */
.BlogArticlePage_dateRow__FcmCg .BlogArticlePage_minRead__F7uub { color: #949494; }

/* Cover image — 1720 × 640, top corners rounded 4 px.  Anchor: 422 px
 * from header.  Achieved via header margin (148) + title (~64) +
 * meta-row gap (56) + meta-row height (~30) + cover margin-top below. */
.BlogArticlePage_cover__zRinA {
  margin-top: 60px;                              /* tuned so cover.top = 422 from header bottom */
  width: 100%;
}
.BlogArticlePage_cover__zRinA img {
  display: block;
  width: 100%;
  height: 640px;                                 /* 1720 × 640 fixed */
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #0F0F0F;
}

/* Body wrapper — gray 1720 × 950 (extends if content longer) attached
 * to cover (no gap → both share visual block).  Inner padding 128/128. */
.BlogArticlePage_bodyWrap__fAXxC {
  background: #1D1D1B;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 128px 0;                              /* 128 top + 128 bottom (user spec) */
  min-height: 950px;
  box-sizing: border-box;
}
.BlogArticlePage_bodyContent__tJpz1 {
  width: 1140px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 20px;                               /* H Regular 20 */
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.BlogArticlePage_bodyContent__tJpz1 p { margin: 0; line-height: 1.5; color: #D6D6D6; font-size: 20px; }
.BlogArticlePage_bodyContent__tJpz1 h1,
.BlogArticlePage_bodyContent__tJpz1 h2,
.BlogArticlePage_bodyContent__tJpz1 h3,
.BlogArticlePage_bodyContent__tJpz1 h4 {
  margin: 24px 0 0;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                              /* H Regular per user spec for body headings */
  line-height: 1.1;
}
.BlogArticlePage_bodyContent__tJpz1 h1 { font-size: 40px; }
.BlogArticlePage_bodyContent__tJpz1 h2 { font-size: 32px; }             /* H Regular 32 user spec */
.BlogArticlePage_bodyContent__tJpz1 h3 { font-size: 24px; }
.BlogArticlePage_bodyContent__tJpz1 h4 { font-size: 20px; }
.BlogArticlePage_bodyContent__tJpz1 ul,
.BlogArticlePage_bodyContent__tJpz1 ol {
  margin: 0;
  padding-left: 22px;
  color: #D6D6D6;
  line-height: 1.5;
}
.BlogArticlePage_bodyContent__tJpz1 li { margin: 6px 0; }
.BlogArticlePage_bodyContent__tJpz1 strong { color: #FFFFFF; font-weight: 700; }
.BlogArticlePage_bodyContent__tJpz1 a { color: #FEAE00; text-decoration: underline; text-underline-offset: 3px; }
.BlogArticlePage_bodyContent__tJpz1 a:hover { color: #FFC83F; }
.BlogArticlePage_bodyContent__tJpz1 blockquote {
  margin: 0;
  padding: 12px 24px;
  border-left: 3px solid #FEAE00;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 400;
  background: transparent;
}
.BlogArticlePage_bodyContent__tJpz1 blockquote p { color: #FFFFFF; font-size: inherit; }
.BlogArticlePage_bodyContent__tJpz1 img { width: 100%; border-radius: 4px; margin: 8px 0; }
.BlogArticlePage_bodyContent__tJpz1 iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; border: 0; }
.BlogArticlePage_bodyContent__tJpz1 table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 16px;
}
.BlogArticlePage_bodyContent__tJpz1 th,
.BlogArticlePage_bodyContent__tJpz1 td { border: 1px solid #3F3F46; padding: 8px 10px; vertical-align: top; }
.BlogArticlePage_bodyContent__tJpz1 th { background: #27272A; color: #FFFFFF; font-weight: 600; }

/* Tags chip row below body */
.BlogArticlePage_tagList__sTbD0 {
  width: 1140px;
  max-width: calc(100% - 48px);
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.BlogArticlePage_tagChip__zTW0R {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(254, 174, 0, 0.12);
  border: 1px solid rgba(254, 174, 0, 0.35);
  color: #FEAE00;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
}

/* ====================================================================
 * YOU MAY ALSO BE INTERESTED IN
 *   • Heading gap → cards = 72 px
 *   • Grid is horizontal scroll: 100 px left, no right padding (per spec)
 *   • Card cell = ~560 px, fixed
 *   • Pagination: arrows + counter, 24 px above cards
 * ==================================================================*/
.BlogArticlePage_interestWrap__gXX6Z {
  width: 100%;
  margin-top: 76px;
  padding: 0 0 0 100px;                          /* 100 px left only — right edge open for horizontal scroll per user spec */
  box-sizing: border-box;
}
.BlogArticlePage_interestInner__QDKk2 {
  display: flex;
  flex-direction: column;
  gap: 72px;                                     /* heading → cards = 72 (user spec) */
}
.BlogArticlePage_interestHeader__n\+DaN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-right: 100px;                          /* keep right gutter for view-all button */
  box-sizing: border-box;
}
.BlogArticlePage_interestTitle__eHD3V {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;                              /* H Bold 40 per user spec */
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: #FFFFFF;
}
.BlogArticlePage_accent__xouU\+ { color: #FEAE00; }
.BlogArticlePage_viewAllBtn__XI\+Uo {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                              /* H Medium */
  font-size: 14px;
  text-transform: uppercase;
  transition: color 120ms ease;
}
.BlogArticlePage_viewAllBtn__XI\+Uo:hover { color: #FEAE00; }
.BlogArticlePage_viewAllBtn__XI\+Uo svg { width: 24px; height: 24px; }   /* 24×24 arrow (user spec) */
/* Desktop-only & mobile-only variants — toggled in media queries below. */
.BlogArticlePage_viewAllBtnMobile__jhux7 { display: none; }              /* hidden on desktop */

/* Horizontal scroller — anchors to the same 100 px left padding as the
 * heading, right edge runs out so the 4th card peeks beyond the right
 * edge ("боковой скролл" per user spec). */
.BlogArticlePage_scrollerOuter__z2Jbg {
  position: relative;
  /* Break out of .interestWrap's 100 px left padding so we can re-anchor
   * the scroller exactly at the viewport-100 left and let the right run
   * out infinitely. */
  margin-left: -100px;
  width: calc(100% + 100px);
  overflow: hidden;
}
.BlogArticlePage_scroller__nSzVz {
  display: flex;
  gap: 24px;                                     /* 24 between cards (user spec) */
  padding: 0 0 0 100px;                          /* left 100, right open */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.BlogArticlePage_scroller__nSzVz::-webkit-scrollbar { display: none; }

/* Related card — strict 560 × 574 (user spec), image 513 × 320 inside,
 * hover yellow outline must re-appear. */
.BlogArticlePage_relatedCard__vqpSJ {
  flex: 0 0 560px;
  width: 560px;
  height: 574px;                                 /* 574 px (user spec — corrected from earlier 612) */
  background: #1D1D1B;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 24px;                                 /* 24 inner padding */
  cursor: pointer;
  outline: 1px solid transparent;
  /* Use a transparent border that turns yellow on hover.  outline alone
   * was getting overridden by some global reset — using outline keeps
   * the box-size identical so layout doesn't shift. */
  transition: outline-color 150ms ease, background-color 150ms ease;
  box-sizing: border-box;
  scroll-snap-align: start;
  overflow: hidden;
}
.BlogArticlePage_relatedCard__vqpSJ:hover {
  outline-color: #FEAE00;                        /* yellow outline on hover (user req) */
}
.BlogArticlePage_relatedImg__bM5hJ {
  width: 513px;                                  /* 513 × 320 exact (user spec) */
  height: 320px;
  flex: 0 0 320px;
  object-fit: cover;
  display: block;
  background: #0F0F0F;
  margin-bottom: 24px;                           /* image → text = 24 (user spec) */
  border-radius: 2px;
  align-self: center;
}
.BlogArticlePage_relatedMeta__Q7ebd {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;                           /* date row → title = 32 (user spec) */
}
.BlogArticlePage_relatedTitle__cQBxJ {
  margin: 0 0 24px;                              /* title → excerpt = 24 (user spec) */
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.BlogArticlePage_relatedExcerpt__FTB98 {
  margin: 0;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #949494;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.BlogArticlePage_pager__RImuS {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                              /* H Medium 14 (user spec for counter) */
  font-size: 14px;
  color: #FFFFFF;
  padding-right: 100px;
  box-sizing: border-box;
}
.BlogArticlePage_pagerLabel__61mYd { letter-spacing: 0.04em; min-width: 56px; text-align: center; }
.BlogArticlePage_pagerBtn__Zw4Uj {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 120ms ease, opacity 120ms ease;
}
.BlogArticlePage_pagerBtn__Zw4Uj svg { width: 40px; height: 40px; }      /* 40×40 (user spec) */
.BlogArticlePage_pagerBtn__Zw4Uj:hover:not(:disabled) { transform: translateX(2px); }
.BlogArticlePage_pagerBtn__Zw4Uj:disabled { opacity: 0.4; cursor: not-allowed; }

/* ====================================================================
 * CTA block — Stop reading. Start driving.
 * ==================================================================*/
.BlogArticlePage_ctaWrap__jwzhk {
  width: 100%;
  padding: 0 100px 76px;
  box-sizing: border-box;
  margin-top: 76px;
}
.BlogArticlePage_ctaInner__TmP0I {
  width: 100%;
  background: #1D1D1B;
  border-radius: 4px;
  padding: clamp(64px, 6.66vw, 128px) clamp(36px, 3.75vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.BlogArticlePage_ctaText__ga42h {
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  color: #FEAE00;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 400;                              /* H Regular */
  font-size: 20px;                               /* H Regular 20 */
}
.BlogArticlePage_ctaSmallTitle__eAI8k {
  margin: 0;
  font-size: 20px;                               /* H Regular 20 (user spec) */
  font-weight: 400;
  color: #FEAE00;
  text-transform: uppercase;
}
.BlogArticlePage_ctaBigTitle__akK\+\+ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 600;                              /* H Semibold 64 (user spec) */
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  text-transform: uppercase;
}
.BlogArticlePage_ctaDesc__6xJ-- {
  margin: 0;
  font-size: 20px;                               /* H Regular 20 (user spec) */
  line-height: 1.35;
  color: #D6D6D6;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.BlogArticlePage_ctaButtons__uJ2sD {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 327px;
}
.BlogArticlePage_ctaPrimary__\+4sov,
.BlogArticlePage_ctaSecondary__p7mOs {
  cursor: pointer;
  padding: 12px 32px;
  height: 45px;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;                              /* H Medium */
  font-size: 14px;                               /* H Medium 14 (user spec) */
  text-transform: uppercase;
  text-align: center;
  transition: background-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.BlogArticlePage_ctaPrimary__\+4sov { background: #FEAE00; color: #18181B; border: 0; }
.BlogArticlePage_ctaPrimary__\+4sov:hover { background: #FFC83F; }
.BlogArticlePage_ctaSecondary__p7mOs { background: transparent; color: #FEAE00; border: 1px solid #FEAE00; }
.BlogArticlePage_ctaSecondary__p7mOs:hover { background: rgba(254, 174, 0, 0.1); }

/* Loading + 404 */
.BlogArticlePage_skeleton__-nRxY {
  padding: 160px 0;
  text-align: center;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-size: 16px;
  color: #555452;
}
.BlogArticlePage_notFound__Eo5iZ {
  padding: 160px 0;
  text-align: center;
  color: #FFFFFF;
}
.BlogArticlePage_notFound__Eo5iZ h1 {
  margin: 0 0 16px;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(36px, 3vw, 56px);
  letter-spacing: -0.04em;
}
.BlogArticlePage_notFound__Eo5iZ p {
  margin: 0 0 32px;
  color: #949494;
  font-size: 16px;
}
.BlogArticlePage_backBtn__-rTAy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: #FEAE00;
  color: #18181B;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Mazzard H', system-ui, sans-serif;
  font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  transition: background-color 120ms ease;
}
.BlogArticlePage_backBtn__-rTAy:hover { background: #FFC83F; }

@media (max-width: 1280px) {
  .BlogArticlePage_shell__C9Lzh { padding: 0 40px; }
  .BlogArticlePage_interestHeader__n\+DaN { padding: 0 40px; }
  .BlogArticlePage_pager__RImuS { padding: 0 40px; }
  .BlogArticlePage_scroller__nSzVz { padding-left: 40px; }
  .BlogArticlePage_ctaWrap__jwzhk { padding-left: 40px; padding-right: 40px; }
}

/* =========================================================================
 *  MOBILE LAYOUT (≤768 px) — pixel-precise per user spec session 33.
 *  Reference viewport: 360 px.
 *
 *  Page L/R padding: 12 px (everywhere except cover image — full bleed).
 *
 *  Vertical anchors (from page top — i.e. from below header):
 *    • Breadcrumb top                 ≈  24 px
 *    • Title top                      = breadcrumb bottom + 24 px
 *    • MARKET ANALYSIS meta top       = title bottom + 24 px
 *    • Cover image top                = meta bottom + 24 px
 *    • "YOU MAY ALSO BE INTERESTED"   ≈ 1369 px from header (content-driven)
 *    • "VIEW ALL ARTICLES" link       ≈ 2079 px from header
 *    • "STOP READING / START DRIVING" ≈ 2226 px from header
 *
 *  Fonts (Mazzard H):
 *    • Breadcrumb     : H SemiBold 12  (HOME/BLOG white, title yellow)
 *    • Article title  : H Bold     24  white
 *    • Tag pill       : H Regular  10  yellow on translucent
 *    • Date / minRead : H Regular  12  white / gray
 *    • Body paragraph : H Regular  14  #C8C8C8
 *    • Body headings  : H Regular  18  white
 *    • "YOU MAY ALSO" : H Bold     24
 *    • Related card title  : H Bold    20
 *    • Related card excerpt: H Regular 14
 *    • CTA "READY TO IMPORT YOUR CAR?": H Regular 12 yellow
 *    • CTA "STOP READING / START DRIVING": H SemiBold 32 white / yellow
 *    • CTA manager paragraph : H Regular 12 gray
 *    • CTA button text       : H Medium  14
 *
 *  Card geometry:
 *    • Article cover image      : 360 × 234 (full-bleed, no L/R padding)
 *    • Related card             : 396 × auto, image inside 396 × 234
 *    • Card overflow → horizontal scroll, snap, arrows 40×40, 70 % activator
 *    • REQUEST A VEHICLE button : 328 × 45 (yellow filled)
 *    • USE OUR CALCULATOR button: 308 × 45 (yellow outline, centered)
 *
 *  Inner spacings (CTA):
 *    • READY → STOP READING       = 32 px
 *    • STOP READING → START DRIV. = 32 px
 *    • START DRIVING → manager    = 32 px
 *    • Manager paragraph → button = 56 px
 *    • REQUEST → USE OUR CALC     = 36 px
 *    • USE OUR CALC → footer top  = 72 px
 * ===================================================================== */
@media (max-width: 768px) {
  /* ─── Page shell ─────────────────────────────────────────────────── */
  .BlogArticlePage_shell__C9Lzh {
    padding: 0 12px;                                /* 12 L/R (user spec) */
  }

  /* ─── Breadcrumb (HOME / BLOG / TITLE) ──────────────────────────── */
  .BlogArticlePage_breadcrumb__yatWo {
    margin-top: 24px;                               /* 24 from header bottom */
    font-weight: 600;                               /* H SemiBold */
    font-size: 12px;                                /* H SemiBold 12 */
    line-height: 1;                                 /* no extra line-gap on wrap */
    letter-spacing: 0.02em;
    white-space: normal;                            /* allow wrap onto 2 lines if title long */
  }
  /* Mobile: HOME / BLOG segments must be gray (#5E5E5E), not white, and
   * the "/" slash must sit tight to its neighbours (no extra mx-2 gap). */
  .BlogArticlePage_breadcrumb__yatWo a,
  .BlogArticlePage_breadcrumb__yatWo a:visited { color: #5E5E5E !important; }
  .BlogArticlePage_breadcrumb__yatWo a:hover { color: #FEAE00 !important; }
  .BlogArticlePage_breadcrumb__yatWo .mx-2 {
    margin-left: 2px !important;                    /* tighten slash spacing */
    margin-right: 2px !important;
  }
  /* The shared Breadcrumbs component wraps each segment in a flex row with
   * its own gap.  On mobile we kill the row gap so wrapped segments sit
   * tightly without a visible vertical seam between lines (user spec). */
  .BlogArticlePage_breadcrumb__yatWo > * {
    row-gap: 4px !important;
    column-gap: 6px !important;
  }

  /* ─── Article header (title + meta) ─────────────────────────────── */
  .BlogArticlePage_header__6EJ0o {
    margin-top: 24px;                               /* 24 from breadcrumb bottom */
    gap: 24px;
  }
  .BlogArticlePage_title__I3HHy {
    font-size: 24px;                                /* H Bold 24 (user spec) */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    max-width: 100%;
  }
  .BlogArticlePage_metaRow__zB6Jw {
    margin-top: 0;                                  /* 24 already provided by .header gap */
    gap: 12px;
  }
  .BlogArticlePage_pill__sND9M {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;                                /* H Regular 10 (user spec) */
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  .BlogArticlePage_dateRow__FcmCg {
    font-size: 12px;                                /* H Regular 12 (user spec) */
    gap: 8px;
  }
  .BlogArticlePage_dateRow__FcmCg .BlogArticlePage_minRead__F7uub { font-size: 12px; color: #949494; }

  /* ─── Cover image — FULL-BLEED 360 × 234 (no L/R padding) ───────── */
  .BlogArticlePage_cover__zRinA {
    margin-top: 24px;                               /* 24 from meta bottom */
    margin-left: -12px;                             /* escape .shell L padding */
    margin-right: -12px;                            /* escape .shell R padding */
    width: calc(100% + 24px);                       /* fill full viewport */
  }
  .BlogArticlePage_cover__zRinA img {
    height: 234px;                                  /* user spec: 360 × 234 */
    border-radius: 0;                               /* no corner radius on mobile */
  }

  /* ─── Body block — DARK GREY card runs edge-to-edge (full viewport),
   *      while the inner article text keeps 12 px L/R padding (user spec).
   *      We escape .shell's 12 px padding via negative margins. ───────── */
  .BlogArticlePage_bodyWrap__fAXxC {
    margin-top: 0;
    margin-left: -12px;                             /* escape .shell L padding */
    margin-right: -12px;                            /* escape .shell R padding */
    width: calc(100% + 24px);                       /* fill full viewport (360) */
    padding: 32px 0;                                /* compact mobile padding */
    min-height: 0;
    border-radius: 0;                               /* edge-to-edge → no rounding */
  }
  .BlogArticlePage_bodyContent__tJpz1 {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;                                /* 12 px text inset within grey card (user spec) */
    box-sizing: border-box;
    gap: 16px;
    font-size: 14px;                                /* H Regular 14 (user spec) */
    line-height: 1.5;
  }
  .BlogArticlePage_bodyContent__tJpz1 p {
    font-size: 14px;                                /* H Regular 14 (user spec) */
    line-height: 1.5;
    color: #C8C8C8;
  }
  .BlogArticlePage_bodyContent__tJpz1 h1 { font-size: 24px; line-height: 1.2; margin-top: 16px; }
  .BlogArticlePage_bodyContent__tJpz1 h2 { font-size: 18px; line-height: 1.25; margin-top: 16px; }   /* H Regular 18 (user spec) */
  .BlogArticlePage_bodyContent__tJpz1 h3 { font-size: 18px; line-height: 1.25; margin-top: 12px; }
  .BlogArticlePage_bodyContent__tJpz1 h4 { font-size: 16px; line-height: 1.3;  margin-top: 12px; }
  .BlogArticlePage_bodyContent__tJpz1 blockquote { padding: 8px 16px; font-size: 18px; line-height: 1.3; }
  .BlogArticlePage_bodyContent__tJpz1 ul,
  .BlogArticlePage_bodyContent__tJpz1 ol { padding-left: 18px; }
  .BlogArticlePage_bodyContent__tJpz1 table { font-size: 12px; }
  .BlogArticlePage_bodyContent__tJpz1 th,
  .BlogArticlePage_bodyContent__tJpz1 td { padding: 6px 8px; }

  /* Tags chip row */
  .BlogArticlePage_tagList__sTbD0 {
    width: 100%;
    max-width: calc(100% - 24px);
    margin-top: 24px;
    gap: 6px;
  }
  .BlogArticlePage_tagChip__zTW0R {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* ─── "YOU MAY ALSO BE INTERESTED IN" block ──────────────────────── */
  .BlogArticlePage_interestWrap__gXX6Z {
    margin-top: 56px;
    padding: 0 0 0 12px;                            /* 12 L only, right open for scroll */
  }
  .BlogArticlePage_interestInner__QDKk2 {
    gap: 32px;                                      /* heading → first card = 32 (user spec) */
  }
  .BlogArticlePage_interestHeader__n\+DaN {
    padding-left: 0;                                /* reset 1280 px breakpoint's 40 px */
    padding-right: 12px;                            /* 12 R for header alignment */
    gap: 16px;
  }
  .BlogArticlePage_interestTitle__eHD3V {
    font-size: 24px;                                /* H Bold 24 (user spec) */
    line-height: 1.15;
  }
  .BlogArticlePage_viewAllBtn__XI\+Uo {
    font-size: 12px;                                /* compact on mobile */
    gap: 8px;
  }
  .BlogArticlePage_viewAllBtn__XI\+Uo svg { width: 20px; height: 20px; }
  /* Hide the in-header "VIEW ALL" on mobile — the standalone link
   * (between pager and CTA) takes over per user spec. */
  .BlogArticlePage_viewAllBtnDesktop__715Eo { display: none; }
  .BlogArticlePage_viewAllBtnMobile__jhux7 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;                             /* center inside flex column */
    /* interestInner has gap: 32 — pager already sits 32 px above this link.
     * Add 96 to reach the spec 128 px from pager bottom to link.  Bottom
     * spacing (128 px to CTA top) is enforced by .ctaWrap margin-top. */
    margin: 96px auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #FEAE00;                                 /* link-yellow */
    font-family: 'Mazzard H', system-ui, sans-serif;
    font-family: 'Mazzard H', var(--font-mazzard, system-ui, sans-serif);
    font-weight: 500;                               /* H Medium */
    font-size: 14px;                                /* H Medium 14 */
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .BlogArticlePage_viewAllBtnMobile__jhux7:hover { color: #FFC83F; }

  /* Horizontal scroller (related cards) — full-bleed */
  .BlogArticlePage_scrollerOuter__z2Jbg {
    margin-left: -12px;                             /* escape .interestWrap left pad */
    width: calc(100% + 12px);
  }
  .BlogArticlePage_scroller__nSzVz {
    gap: 16px;                                      /* 16 px between cards on mobile */
    padding: 0 0 0 12px;
    scroll-snap-type: x mandatory;
  }

  /* Related card — 396 px wide (wider than 360 viewport → horizontal scroll
   * trigger at 70 % of the next card visible).  Image 396 × 234 full-bleed
   * inside the card, then text below with 16 px padding. */
  .BlogArticlePage_relatedCard__vqpSJ {
    flex: 0 0 396px;
    width: 396px;
    height: auto;                                   /* let content size — 234 image + text below */
    padding: 0;
    background: #1A1B19;
    border-radius: 4px;
    overflow: hidden;
    outline: 0;
    scroll-snap-align: start;
  }
  .BlogArticlePage_relatedImg__bM5hJ {
    width: 100%;
    height: 234px;                                  /* user spec — 234 high image inside card */
    flex: 0 0 234px;
    margin: 0;
    border-radius: 0;
    align-self: stretch;
  }
  .BlogArticlePage_relatedMeta__Q7ebd {
    padding: 16px 16px 0;
    margin-bottom: 12px;                            /* tag/date → title */
    gap: 12px;
  }
  .BlogArticlePage_relatedTitle__cQBxJ {
    padding: 0 16px;
    margin: 0 0 12px;
    font-size: 20px;                                /* H Bold 20 (user spec) */
    line-height: 1.2;
  }
  .BlogArticlePage_relatedExcerpt__FTB98 {
    padding: 0 16px 16px;
    margin: 0;
    font-size: 14px;                                /* H Regular 14 (user spec) */
    line-height: 1.45;
    color: #C8C8C8;
  }

  /* Pager (arrows + counter) — centered horizontally, 40×40 arrows */
  .BlogArticlePage_pager__RImuS {
    margin-top: 0;                                  /* gap from interestInner = 32 */
    padding-left: 0;                                /* reset 1280 shorthand padding */
    padding-right: 0;
    justify-content: center;                        /* center pager in viewport (user spec) */
    gap: 16px;
  }
  .BlogArticlePage_pagerBtn__Zw4Uj svg { width: 40px; height: 40px; }
  .BlogArticlePage_pagerLabel__61mYd { font-size: 14px; min-width: 48px; }

  /* ─── CTA block — "Stop reading. Start driving." ─────────────────── */
  /* Full-bleed: dark grey card spans the entire viewport width with NO
   * L/R padding (per user spec — "блок полностью серый и вливается во
   * всю ширину мобильного экрана").  All inner text is CENTERED. */
  .BlogArticlePage_ctaWrap__jwzhk {
    margin-top: 128px;                              /* 128 from VIEW ALL link bottom to CTA card top (user spec) */
    padding: 0;                                     /* spacing to footer is provided by .ctaInner padding-bottom */
  }
  .BlogArticlePage_ctaInner__TmP0I {
    width: 100%;
    background: #1A1B19;                             /* dark grey card */
    border-radius: 0;                                /* edge-to-edge → no rounding */
    /* Bottom padding 72 → from USE OUR CALCULATOR button bottom to footer
     * top = exactly 72 px (user spec).  Top padding 32 preserves spacing
     * above the "READY TO IMPORT YOUR CAR?" small title. */
    padding: 32px 0 72px;
    flex-direction: column;
    align-items: center;                             /* center all children horizontally */
    text-align: center;
    gap: 32px;
  }
  .BlogArticlePage_ctaText__ga42h {
    width: 100%;
    max-width: 328px;                               /* user spec text-block width */
    margin: 0 auto;                                 /* center within viewport */
    padding: 0 16px;                                /* breathing room from card edge */
    gap: 32px;                                      /* READY → STOP, STOP → START, START → manager = 32 each */
    align-items: center;                            /* center every line inside text column */
    text-align: center;
    box-sizing: border-box;
  }
  .BlogArticlePage_ctaSmallTitle__eAI8k {
    font-size: 12px;                                /* H Regular 12 yellow (user spec) */
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .BlogArticlePage_ctaBigTitle__akK\+\+ {
    font-size: 32px;                                /* H SemiBold 32 (user spec) */
    font-weight: 600;                               /* SemiBold */
    line-height: 1.05;
    letter-spacing: -0.02em;
    gap: 32px;                                      /* STOP READING → START DRIVING = 32 (user spec) */
    align-items: center;                            /* center both STOP / START lines */
    text-align: center;
  }
  .BlogArticlePage_ctaDesc__6xJ-- {
    font-size: 12px;                                /* H Regular 12 gray (user spec) */
    line-height: 1.5;
    color: #949494;
    text-transform: none;
    text-align: center;
  }
  .BlogArticlePage_ctaButtons__uJ2sD {
    width: 100%;
    max-width: 328px;
    min-width: 0;
    margin: 0 auto;
    align-items: center;
    gap: 36px;                                      /* REQUEST → USE CALC = 36 (user spec) */
    margin-top: 24px;                               /* visual gap from text to first button = 56 total (32 from gap + 24) */
  }
  .BlogArticlePage_ctaPrimary__\+4sov {
    width: 328px;                                   /* user spec: 328 × 45 */
    max-width: none;
    height: 45px;
    padding: 0 24px;
    font-size: 14px;                                /* H Medium 14 (user spec) */
    border-radius: 4px;
  }
  .BlogArticlePage_ctaSecondary__p7mOs {
    width: 308px;                                   /* user spec: 308 × 45 (centered, narrower) */
    max-width: none;
    height: 45px;
    padding: 0 24px;
    font-size: 14px;
    border-radius: 4px;
  }
}

/* Legacy 700 px breakpoint — kept for very small viewports between the
 * mobile spec (≤768) and ultra-narrow phones; ensures graceful fallback. */
@media (max-width: 700px) {
  .BlogArticlePage_title__I3HHy { font-size: 24px; }
  .BlogArticlePage_cover__zRinA img { height: 234px; }
  .BlogArticlePage_bodyWrap__fAXxC { padding: 32px 0; min-height: 0; }
  .BlogArticlePage_ctaInner__TmP0I { flex-direction: column; align-items: stretch; }
  .BlogArticlePage_ctaText__ga42h { width: 100%; }
}

/* =============================================================================
 * BIBI Cars — Policy page (Privacy / Terms / Cookies / Conditions)
 * ========================================================================== */

.bibi-policy-page {
  font-family: 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif;
  font-family: var(--bibi-font, 'Mazzard', 'Mazzard H', 'Mazzard M', system-ui, sans-serif);
}

.bibi-policy-hero {
  background: linear-gradient(180deg, #0E0E0D 0%, #000 100%);
  background: linear-gradient(180deg, #0E0E0D 0%, var(--bibi-black, #000) 100%);
  padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 64px);
  border-bottom: 1px solid #1A1A1A;
}

.bibi-policy-breadcrumb {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-bottom: 16px;
}

.bibi-policy-breadcrumb a {
  color: #FEAE00;
  color: var(--bibi-yellow, #FEAE00);
  text-decoration: none;
  margin-right: 8px;
}

.bibi-policy-breadcrumb a:hover { filter: brightness(1.1); }

.bibi-policy-title {
  margin: 0;
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  color: #FFF;
  color: var(--bibi-white, #FFF);
  letter-spacing: -0.01em;
}

.bibi-policy-body {
  background: #000;
  background: var(--bibi-black, #000);
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 140px);
}

.bibi-policy-prose {
  max-width: 880px;
  margin: 0 auto;
  color: #D8D8D8;
  font-size: 16px;
  line-height: 1.75;
}

.bibi-policy-prose h1,
.bibi-policy-prose h2,
.bibi-policy-prose h3,
.bibi-policy-prose h4 {
  color: #FFF;
  color: var(--bibi-white, #FFF);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}

.bibi-policy-prose h1 { font-size: clamp(24px, 3vw, 32px); }
.bibi-policy-prose h2 { font-size: clamp(22px, 2.6vw, 28px); }
.bibi-policy-prose h3 { font-size: clamp(18px, 2vw, 22px); }

.bibi-policy-prose h1:first-child,
.bibi-policy-prose h2:first-child,
.bibi-policy-prose h3:first-child { margin-top: 0; }

.bibi-policy-prose p { margin: 0 0 1.1em; }

.bibi-policy-prose ul,
.bibi-policy-prose ol {
  margin: 0 0 1.1em 1.4em;
  padding: 0;
}

.bibi-policy-prose li { margin-bottom: 0.5em; }

.bibi-policy-prose a {
  color: #FEAE00;
  color: var(--bibi-yellow, #FEAE00);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bibi-policy-prose a:hover { filter: brightness(1.1); }

.bibi-policy-prose strong { color: #FFF; }
.bibi-policy-prose em { font-style: italic; }

.bibi-policy-prose blockquote {
  border-left: 3px solid #FEAE00;
  border-left: 3px solid var(--bibi-yellow, #FEAE00);
  padding: 0.4em 0 0.4em 1em;
  margin: 1.4em 0;
  color: #C8C8C8;
  background: rgba(254, 174, 0, 0.04);
}

.bibi-policy-prose hr {
  border: 0;
  border-top: 1px solid #1F1F1D;
  margin: 2em 0;
}

.bibi-policy-back {
  max-width: 880px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid #1A1A1A;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bibi-policy-back a {
  color: #FEAE00;
  color: var(--bibi-yellow, #FEAE00);
  text-decoration: none;
}

.bibi-policy-back a:hover { filter: brightness(1.1); }

/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}


/* RichTextEditor — light theme matching the rest of /admin/info.
 * Light surface (#FFFFFF), zinc-100 borders, [#18181B] text. */

.RichTextEditor_wrap__zdSpR {
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  background: #FFFFFF;
  color: #18181B;
  font-family: 'Mazzard H', Inter, system-ui, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}
.RichTextEditor_toolbar__cAxxc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px;
  background: #FAFAFA;
  border-bottom: 1px solid #E4E4E7;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}
.RichTextEditor_btn__HFq2y {
  border: 0;
  background: transparent;
  color: #52525B;
  width: 30px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0 6px;
  transition: background-color 100ms ease, color 100ms ease;
  white-space: nowrap;
  flex: 0 0 auto;
}
.RichTextEditor_btn__HFq2y:hover { background: #F4F4F5; color: #18181B; }
.RichTextEditor_btn__HFq2y:disabled { opacity: 0.35; cursor: not-allowed; }
.RichTextEditor_btnActive__Lo-06 { background: #FEAE00; color: #18181B; }
.RichTextEditor_btnActive__Lo-06:hover { background: #FFC83F; color: #18181B; }
.RichTextEditor_divider__lNa2Z {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #E4E4E7;
  margin: 0 4px;
  align-self: center;
}
.RichTextEditor_select__9yZpr {
  background: #FFFFFF;
  color: #18181B;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 100ms ease;
}
.RichTextEditor_select__9yZpr:hover { border-color: #D4D4D8; }
.RichTextEditor_select__9yZpr:focus { border-color: #FEAE00; }

/* Color / highlight popovers */
.RichTextEditor_colorWrap__6LDbl { position: relative; }
.RichTextEditor_colorWrap__6LDbl:hover .RichTextEditor_colorPop__p8lSx, .RichTextEditor_colorWrap__6LDbl:focus-within .RichTextEditor_colorPop__p8lSx { display: grid; }
.RichTextEditor_colorPop__p8lSx {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 12;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  padding: 8px;
  grid-template-columns: repeat(6, 22px);
  gap: 6px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
.RichTextEditor_colorSwatch__qRPvb {
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 1px solid #E4E4E7;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 100ms ease;
}
.RichTextEditor_colorSwatch__qRPvb:hover { transform: scale(1.12); }
.RichTextEditor_colorClear__qXHBb {
  background: #FFFFFF !important;
  color: #71717A;
  font-size: 16px;
  line-height: 1;
  border-style: dashed;
}

.RichTextEditor_emojiWrap__h6A4e { position: relative; }
.RichTextEditor_emojiPop__9jPb0 {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* Editor body */
.RichTextEditor_editor__0nvQM {
  background: #FFFFFF;
  min-height: 320px;
  max-height: 620px;
  overflow: auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.RichTextEditor_editor__0nvQM .ProseMirror {
  padding: 24px 28px;
  min-height: 280px;
  outline: none;
  color: #18181B;
  font-size: 16px;
  line-height: 1.55;
}
.RichTextEditor_editor__0nvQM .ProseMirror p { margin: 0 0 14px; }
.RichTextEditor_editor__0nvQM .ProseMirror h1,
.RichTextEditor_editor__0nvQM .ProseMirror h2,
.RichTextEditor_editor__0nvQM .ProseMirror h3,
.RichTextEditor_editor__0nvQM .ProseMirror h4 {
  margin: 18px 0 10px;
  color: #09090B;
  font-weight: 700;
  line-height: 1.15;
}
.RichTextEditor_editor__0nvQM .ProseMirror h1 { font-size: 32px; }
.RichTextEditor_editor__0nvQM .ProseMirror h2 { font-size: 26px; }
.RichTextEditor_editor__0nvQM .ProseMirror h3 { font-size: 22px; }
.RichTextEditor_editor__0nvQM .ProseMirror h4 { font-size: 18px; }
.RichTextEditor_editor__0nvQM .ProseMirror a { color: #B45309; text-decoration: underline; }
.RichTextEditor_editor__0nvQM .ProseMirror blockquote {
  margin: 14px 0;
  padding: 8px 16px;
  border-left: 3px solid #FEAE00;
  color: #52525B;
  background: rgba(254, 174, 0, 0.06);
}
.RichTextEditor_editor__0nvQM .ProseMirror pre {
  background: #F4F4F5;
  color: #18181B;
  padding: 12px 16px;
  border-radius: 6px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  border: 1px solid #E4E4E7;
}
.RichTextEditor_editor__0nvQM .ProseMirror code {
  background: #F4F4F5;
  color: #18181B;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  border: 1px solid #E4E4E7;
}
.RichTextEditor_editor__0nvQM .ProseMirror ul, .RichTextEditor_editor__0nvQM .ProseMirror ol { padding-left: 22px; margin: 6px 0 14px; }
.RichTextEditor_editor__0nvQM .ProseMirror ul li, .RichTextEditor_editor__0nvQM .ProseMirror ol li { margin: 4px 0; }
.RichTextEditor_editor__0nvQM .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.RichTextEditor_editor__0nvQM .ProseMirror ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.RichTextEditor_editor__0nvQM .ProseMirror img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
}
.RichTextEditor_editor__0nvQM .ProseMirror iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}
.RichTextEditor_editor__0nvQM .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  table-layout: fixed;
}
.RichTextEditor_editor__0nvQM .ProseMirror th,
.RichTextEditor_editor__0nvQM .ProseMirror td {
  border: 1px solid #E4E4E7;
  padding: 6px 8px;
  vertical-align: top;
}
.RichTextEditor_editor__0nvQM .ProseMirror th { background: #FAFAFA; font-weight: 600; }
.RichTextEditor_editor__0nvQM .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #A1A1AA;
  pointer-events: none;
  height: 0;
  float: left;
}

.RichTextEditor_sourceArea__kCvdQ {
  width: 100%;
  min-height: 320px;
  max-height: 620px;
  padding: 16px 18px;
  background: #FAFAFA;
  color: #18181B;
  border: 0;
  outline: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.RichTextEditor_statusBar__d-Dpj {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid #E4E4E7;
  background: #FAFAFA;
  color: #A1A1AA;
  font-size: 11px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ShipmentTrackingMap — VesselFinder-style tile presentation.
 * -----------------------------------------------------------------------
 * Phase B3.1 readability fix: the raw CartoDB `dark_all` tiles render
 * land masses almost pure black against a near-black ocean, which makes
 * country borders / port labels unreadable inside the cabinet's dark
 * theme. Applying a brightness + contrast + saturation filter ONLY to
 * the tile pane (not the overlays) gives us the navy-water / lighter-
 * land look used by vesselfinder.com without changing the tile source.
 *
 * Why filter and not a different tile provider?
 *   • Stadia / Thunderforest tiles need an API key in production.
 *   • CartoDB rastertiles are free + no key + already loading.
 *   • A CSS filter is one rule and reverts in 0 ms if we ever switch.
 */

.vf-map-dark .leaflet-tile-pane {
  /* Brighten land, mute saturation a hair so labels pop without becoming
   * cartoonish, lift contrast just enough for borders to be visible. */
  filter: brightness(1.55) contrast(0.94) saturate(1.08);
}

/* Keep the zoom-control buttons readable on the dark canvas. */
.vf-map-dark .leaflet-control-zoom a {
  background-color: #1A1B19 !important;
  color: #F4F4F5 !important;
  border-color: #34343A !important;
}
.vf-map-dark .leaflet-control-zoom a:hover {
  background-color: #2A2B29 !important;
  color: #FEAE00 !important;
}
.vf-map-dark .leaflet-bar {
  border: 1px solid #34343A !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55) !important;
}

/* Attribution prudence — even though attributionControl={false}, any
 * residual "Powered by Leaflet" pill should sit on the dark canvas. */
.vf-map-dark .leaflet-control-attribution {
  background: rgba(26, 27, 25, 0.85) !important;
  color: #71717A !important;
}
.vf-map-dark .leaflet-control-attribution a { color: #B0B0B0 !important; }

/* Light variant kept untouched on purpose — light dashboards still get
 * the original CartoDB Voyager look. */

.App-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.App-header {
    background-color: #0f0f10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.App-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/*# sourceMappingURL=main.aad59179.css.map*/