/* ========== PAGE LAYOUT WRAPPER USED AROUND HERO ========== */

:root {
  --dark-primary-text: #212121;
  --light-primary-text: white;
  --custom-syncee-silver: #f6f8fc;
  --green-button: #79bf11;
  --warning-base-color: #ff9800;
  --syncee-primary-50: #e2effb;
  --syncee-primary-100: #d4e2fe;
  --syncee-primary-200: #8cc9ff;
  --syncee-primary-300: #57b3ff;
  --syncee-primary-400: #2aa1ff;
  --syncee-primary-500: #0090ff;
  --syncee-primary-600: #1b81ff;
  --syncee-primary-700: #286df8;
  --syncee-primary-800: #2e5ae5;
  --syncee-primary-900: #3436c5;
  --syncee-grey-50: #f9f9f9;
  --syncee-grey-100: #f2f2f2;
  --syncee-grey-200: #e9e9e9;
  --syncee-grey-300: #d9d9d9;
  --syncee-grey-400: #b5b5b5;
  --syncee-grey-500: #959595;
  --syncee-grey-600: #6d6d6d;
  --syncee-grey-700: #5a5a5a;
  --syncee-grey-800: #3b3b3b;
  --syncee-grey-900: #1b1b1b;
  --white: #ffffff;
  --black: #212121;
  --alibaba-50: #fff8e0;
  --alibaba-100: #ffebb2;
  --alibaba-200: #ffde80;
  --alibaba-300: #ffd24c;
  --alibaba-400: #ffc723;
  --alibaba-500: #ffbd00;
  --alibaba-600: #ffaf00;
  --alibaba-700: #ff9c00;
  --alibaba-800: #ff8b00;
  --alibaba-900: #ff6a00;
  --light-beige-50: #f8f0e5;
  --light-beige-100: #f3d8b5;
  --light-beige-200: #efbe7e;
  --light-beige-300: #eaa448;
  --light-beige-400: #e79220;
  --light-beige-500: #e38000;
  --light-beige-600: #df7500;
  --light-beige-700: #d96600;
  --light-beige-800: #d25600;
  --light-beige-900: #c93b00;
  --ashy-beige-50: #f5eee4;
  --ashy-beige-100: #e8d5bc;
  --ashy-beige-200: #deb988;
  --ashy-beige-300: #d79d51;
  --ashy-beige-400: #d2892c;
  --ashy-beige-500: #cc770d;
  --ashy-beige-600: #c86d0c;
  --ashy-beige-700: #c26009;
  --ashy-beige-800: #bb5105;
  --ashy-beige-900: #b13801;
  --turquoise-50: #d7eeee;
  --turquoise-100: #9ad5d3;
  --turquoise-200: #56b9b5;
  --turquoise-300: #009d97;
  --turquoise-400: #008982;
  --turquoise-500: #00756c;
  --turquoise-600: #006960;
  --turquoise-700: #005b51;
  --turquoise-800: #004b42;
  --turquoise-900: #003127;
  --neon-yellow-50: #fbffea;
  --neon-yellow-100: #f4fdc8;
  --neon-yellow-200: #ebfca2;
  --neon-yellow-300: #e8ff81;
  --neon-yellow-400: #e0fc62;
  --neon-yellow-500: #d9f845;
  --neon-yellow-600: #d0e841;
  --neon-yellow-700: #bfd038;
  --neon-yellow-800: #afb82f;
  --neon-yellow-900: #959120;
  --lilac-50: #f6ecfe;
  --lilac-100: #e6cffd;
  --lilac-200: #d5b0f9;
  --lilac-300: #c38df2;
  --lilac-400: #b471eb;
  --lilac-500: #a656e4;
  --lilac-600: #9b50dc;
  --lilac-700: #8e46d2;
  --lilac-800: #8340ca;
  --lilac-900: #7132bc;
  --amber-50: #fff8e1;
  --amber-100: #ffecb3;
  --amber-200: #ffe082;
  --amber-300: #ffd54f;
  --amber-400: #ffca28;
  --amber-500: #ffc107;
  --amber-600: #ffb300;
  --amber-700: #ffa000;
  --amber-800: #ff8f00;
  --amber-900: #ff6f00;
  --syncee-warn-50: #ffebee;
  --syncee-warn-100: #ffcdd2;
  --syncee-warn-200: #ef9a9a;
  --syncee-warn-300: #e57373;
  --syncee-warn-400: #ef5350;
  --syncee-warn-500: #f44336;
  --syncee-warn-600: #e53935;
  --syncee-warn-700: #d32f2f;
  --syncee-warn-800: #c62828;
  --syncee-warn-900: #b71c1c;
  --warn-50: #ffebee;
  --warn-100: #ffcdd2;
  --warn-200: #ef9a9a;
  --warn-300: #e57373;
  --warn-400: #ef5350;
  --warn-500: #f44336;
  --warn-600: #e53935;
  --warn-700: #d32f2f;
  --warn-800: #c62828;
  --warn-900: #b71c1c;
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-300: #81c784;
  --green-400: #66bb6a;
  --green-500: #4caf50;
  --green-600: #43a047;
  --green-700: #388e3c;
  --green-800: #2e7d32;
  --green-900: #1b5e20;
  --light-green-50: #f1f8e9;
  --light-green-100: #dcedc8;
  --light-green-200: #c5e1a5;
  --light-green-300: #aed581;
  --light-green-400: #9ccc65;
  --light-green-500: #8bc34a;
  --light-green-600: #7cb342;
  --light-green-700: #689f38;
  --light-green-800: #558b2f;
  --light-green-900: #33691e;
  --red-50: #ffebee;
  --red-100: #ffcdd2;
  --red-200: #ef9a9a;
  --red-300: #e57373;
  --red-400: #ef5350;
  --red-500: #f44336;
  --red-600: #e53935;
  --red-700: #d32f2f;
  --red-800: #c62828;
  --red-900: #b71c1c;
  --dark-blue-one-50: #e6e8f0;
  --dark-blue-one-100: #c1c5db;
  --dark-blue-one-200: #999fc3;
  --dark-blue-one-300: #727aab;
  --dark-blue-one-400: #565f9a;
  --dark-blue-one-500: #3b448a;
  --dark-blue-one-600: #353d82;
  --dark-blue-one-700: #2d3477;
  --dark-blue-one-800: #262b6a;
  --dark-blue-one-900: #1a1b54;
  --dark-blue-two-50: #e6e9f3;
  --dark-blue-two-100: #c1c7e1;
  --dark-blue-two-200: #99a3cd;
  --dark-blue-two-300: #717fb8;
  --dark-blue-two-400: #5464aa;
  --dark-blue-two-500: #354a9d;
  --dark-blue-two-600: #2f4294;
  --dark-blue-two-700: #263988;
  --dark-blue-two-800: #1e2f7c;
  --dark-blue-two-900: #101f66;
}

page-layout {
  position: relative;
}

.page-layout.simple {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  min-width: 100%;
}

.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl {
  padding-left: 32px;
  padding-right: 32px;
}

.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h1,
.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h2,
.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h3,
.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h4,
.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h5,
.page-layout.simple .full-width-without-padding .content-row-padding-lt-xl h6 {
  margin: 0;
}

@media screen and (max-width: 1600px) {
  .page-layout.simple .full-width-without-padding .content-row-padding-lt-xl {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 959px) {
  .page-layout.simple .full-width-without-padding .content-row-padding-lt-xl {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.page-layout.simple .full-width-without-padding .content-row-max-width {
  max-width: 1600px !important;
  margin: 0 auto;
}

/* ========== TYPOGRAPHY USED IN HERO ========== */

.typography-overline-2 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.typography-h1-subtitle {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}

.typography-headline-3 {
  font-size: 52px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* mobile override used as lt-md:!typography-h3-subtitle */
@media (max-width: 959px) {
  .lt-md\:typography-h3-subtitle {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: normal;
  }
}

/* ========== AI GRADIENT TEXT ========== */

.ai-gradient-text {
  background: linear-gradient(to right, var(--syncee-primary-700) -20%, var(--lilac-200), #8eaef8);
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ========== RADIAL BACKGROUND UTILITIES USED BY HERO ========== */

.bg-\[radial-gradient\(ellipse_at_center,
var\(--lilac-50\)_-200\%,
var\(--dark-blue-one-900\)_60\%\)\] {
  background-image: radial-gradient(
    ellipse at center,
    var(--lilac-50) -200%,
    var(--dark-blue-one-900) 60%
  );
}

.bg-\[radial-gradient\(circle_at_center,
\#2AA1FF_-350\%,
transparent_70\%\)\] {
  background-image: radial-gradient(circle at center, #2aa1ff -350%, transparent 70%);
}

/* ========== GENERIC UTILITIES USED DIRECTLY IN SECONDARY HERO MARKUP ========== */

/* position / box basics */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

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

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

/* sizing & max-widths */
.h-full {
  height: 100%;
}

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

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

/* responsive height / max-width used in hero */
@media (max-width: 959px) {
  .lt-md\:h-\[488px\] {
    height: 488px;
  }

  .lt-md\:max-w-\[342px\] {
    max-width: 342px;
  }
}

/* flexbox helpers */

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

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

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

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

.gap-2 {
  gap: 0.5rem;
}

/* mobile flex overrides used by hero row */
@media (max-width: 959px) {
  .lt-md\:flex-col {
    flex-direction: column;
  }

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

  .lt-md\:gap-3 {
    gap: 0.75rem;
  }
}

/* spacing utilities */
.pb-4 {
  padding-bottom: 1rem;
}

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

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

/* “important” bottom padding override on mobile (lt-md:!pb-7) */
@media (max-width: 959px) {
  .lt-md\:\!pb-7 {
    padding-bottom: 1.75rem !important;
  }
}

/* special padding used for glow span */
.p-\[100\%\] {
  padding: 100%;
}

/* transforms for glow span */
.m-\[-100\%\] {
  margin: -100%;
}

.translate-x-\[25\%\] {
  --tw-translate-x: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

.translate-y-\[25\%\] {
  --tw-translate-y: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

/* ========== “BANG” (!) OVERRIDES USED IN HERO ========== */

.\!m-0 {
  margin: 0 !important;
}

.\!mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.\!text-center {
  text-align: center !important;
}

.\!text-\[\#A9C5FC\] {
  --tw-text-opacity: 1;
  color: rgb(169 197 252 / var(--tw-text-opacity, 1)) !important;
}

/* these are used in the class list like !typography-headline-3, !h2, !h6 */
.\!typography-headline-3 {
  font-size: 52px !important;
  line-height: 64px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 959px) {
  .lt-md\:\!h6 {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }

  .lt-md\:\!h2 {
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
  }

  .lt-md\:\!typography-h3-subtitle {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
}

/* ========== ICON SIZE + COLOR FOR THE AI STAR ========== */

i.s-48,
mat-icon.s-48 {
  font-size: 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
}

.\!text-syncee-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(32 92 228 / var(--tw-text-opacity, 1)) !important;
}

/* ========== DARK BLUE BACKGROUND FOR THE PHONE IMAGE SECTION ========== */

.bg-dark-blue-one-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 21 / var(--tw-bg-opacity, 1));
}

/* ========================================================= */
/* ========== EXTRA RULES FILTERED FROM SECOND SNIPPET ====== */
/* ========================================================= */

/* generic img behavior (scope/adjust as you like) */
img {
  width: 100%;
  object-fit: contain;
}

/* hero outer layout */
.outer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer .header-1 {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer .header-1:not(.mat-mdc-button) {
  color: var(--white);
}

.outer .header-1 .inner-container {
  margin: 0 auto;
  max-width: 1600px !important;
}

/* toggle selector used in hero (“I’m a Retailer / I’m a Supplier”) */
.select-button {
  background: var(--white);
  color: var(--black);
  display: flex;
  width: fit-content;
  border-radius: 30px;
  padding: 8px;
}

.select-button .item {
  padding: 0 28px;
  height: 45px;
  border-radius: 25px;
  line-height: 45px;
  transition: background 0.15s ease-in-out;
  cursor: pointer;
}

.select-button .item.selected {
  background: var(--black);
  color: var(--white);
}

.bg-\[radial-gradient\(ellipse_at_center\,var\(--lilac-50\)_-200\%\,var\(--dark-blue-one-900\)_60\%\)\] {
  background-image: radial-gradient(
    ellipse at center,
    var(--lilac-50) -200%,
    var(--dark-blue-one-900) 60%
  );
}
.sec-hero {
  top: 64px;
  padding: 50px 0px;
}
.sec-hero .is-hidden {
  display: none;
}
.hero-mode-block.is-hidden,
.hero-mode-image.is-hidden {
  display: none;
}

.pt-no-tab{
  padding-top: 3.5rem !important;
}
.border-0{
  border: none !important;
}
.tabbedpricing .tabbedpricing__cta:hover {
    text-decoration: none !important;
}