/**
 * Home static block — scoped to .ys-home-static only.
 * PREMIUM LIGHT EDITION — works WITH the global `color: #000 !important` constraint.
 *
 * STRATEGY:
 * ‣ All backgrounds are LIGHT → black text is natural and readable.
 * ‣ Visual hierarchy via font SIZE, WEIGHT, and SPACING (not color).
 * ‣ Where we need accent blue or white text, we use `-webkit-text-fill-color`
 *   which overrides `color` visually in all modern browsers but is NOT
 *   affected by the global `color: #000 !important` rule.
 * ‣ `::before`/`::after` pseudo-elements are also NOT targeted by the global rule.
 */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

 .ys-home-static {
   --ys-ink: #0a0a0a;
   --ys-ink-soft: #6b7280;
   --ys-surface: #ffffff;
   --ys-surface-muted: #f8f9fa;
   --ys-border: #e5e7eb;
   --ys-border-light: #f0f0f0;
   --ys-accent: #2563eb;
   --ys-accent-hover: #1d4ed8;
   --ys-accent-soft: rgba(37, 99, 235, 0.06);
   --ys-accent-glow: rgba(37, 99, 235, 0.2);
   --ys-radius: 16px;
   --ys-radius-sm: 12px;
   --ys-radius-xs: 8px;
   --ys-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
   --ys-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
   --ys-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.08);
   --ys-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
   --ys-shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.12);
   --ys-ease: cubic-bezier(0.22, 1, 0.36, 1);
   --ys-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ys-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
   --ys-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ys-duration: 0.25s;
   --ys-reveal-duration: 0.9s;
   --ys-font-head: "Inter", system-ui, -apple-system, sans-serif;
   --ys-font-body: "DM Sans", system-ui, -apple-system, sans-serif;
   box-sizing: border-box;
   font-family: var(--ys-font-body);
   font-size: 15px;
   line-height: 1.6;
   margin: 0 0 56px;
   max-width: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* color: #000 forced by global CSS — that's fine, all bgs are light */
 }
 
 .ys-home-static *,
 .ys-home-static *::before,
 .ys-home-static *::after {
   box-sizing: border-box;
 }
 
 .ys-home-static a {
   text-decoration: none;
 }
 
 .ys-home-static img {
   display: block;
   max-width: 100%;
   height: auto;
 }
 
 .ys-home-static__visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }
 
 /* ═══════════════════════════════════════════════════════
    SCROLL REVEAL
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__reveal {
   opacity: 0;
   transform: translateY(32px);
   transition:
     opacity var(--ys-reveal-duration) var(--ys-ease-reveal),
     transform var(--ys-reveal-duration) var(--ys-ease-reveal);
 }
 
 .ys-home-static__reveal--in {
   opacity: 1;
   transform: translateY(0);
 }
 
 /* Stagger children */
 .ys-home-static__reveal--in .ys-card:nth-child(1) { transition-delay: 0s; }
 .ys-home-static__reveal--in .ys-card:nth-child(2) { transition-delay: 0.08s; }
 .ys-home-static__reveal--in .ys-card:nth-child(3) { transition-delay: 0.16s; }
 .ys-home-static__reveal--in .ys-card:nth-child(4) { transition-delay: 0.24s; }
 
 @media (prefers-reduced-motion: reduce) {
   .ys-home-static__reveal {
     opacity: 1;
     transform: none;
     transition: none;
   }
 }
 
 /* ═══════════════════════════════════════════════════════
    DIVIDER & RULE
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__divider {
   height: 1px;
   margin: 0 -15px;
   background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
 }
 
 @media (min-width: 768px) {
   .ys-home-static__divider {
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
   }
 }
 
 .ys-home-static__rule {
   display: block;
   width: 48px;
   height: 3px;
   margin-top: 14px;
   background: var(--ys-accent);
   border-radius: 2px;
 }
 
 /* ═══════════════════════════════════════════════════════
    SECTIONS
    ═══════════════════════════════════════════════════════ */
 .ys-home-static > section {
   scroll-margin-top: 5.5rem;
   padding: 52px 0;
   border-bottom: 1px solid var(--ys-border-light);
 }
 
 @media (min-width: 992px) {
   .ys-home-static > section {
     padding: 72px 0;
   }
 }
 
 .ys-home-static > section:last-child {
   border-bottom: none;
 }
 
 /* ═══════════════════════════════════════════════════════
    HERO
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__hero {
   background: var(--ys-surface-muted);
   padding: 56px 24px !important;
  margin: 0;
   border-bottom: 1px solid var(--ys-border);
   box-shadow: inset 0 3px 0 0 var(--ys-accent);
   position: relative;
   overflow: hidden;
 }
 
 /* Subtle dot pattern (::before is NOT targeted by global CSS) */
 .ys-home-static__hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
     radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.04) 1px, transparent 0);
   background-size: 32px 32px;
   pointer-events: none;
 }
 
 @media (min-width: 768px) {
   .ys-home-static__hero {
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    padding-right: 24px;
   }
 }
 
 .ys-home-static__standards { background: var(--ys-surface); }
 .ys-home-static__categories { background: var(--ys-surface-muted); }
 .ys-home-static__products { background: var(--ys-surface); }
 .ys-home-static__brands { background: var(--ys-surface-muted); }
 
 /* ═══════════════════════════════════════════════════════
    TYPOGRAPHY / SECTION HEADS
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__section-head {
   margin-bottom: 32px;
 }
 
 .ys-home-static__section-head--row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 28px;
 }
 
 .ys-home-static__section-head--row h2 {
   margin-bottom: 0;
 }
 
 .ys-home-static__section-head-text {
   flex: 1;
   min-width: min(100%, 280px);
 }
 
 .ys-home-static__section-head-text h2 {
   margin-bottom: 6px;
 }
 
 /* Secondary text — use -webkit-text-fill-color for gray hierarchy */
 .ys-home-static__section-sub {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
   max-width: 42ch;
   -webkit-text-fill-color: var(--ys-ink-soft);
 }
 
 .ys-home-static__section-head-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
 }
 
 /* ──── Eyebrow (accent blue via -webkit-text-fill-color) ──── */
 .ys-home-static__eyebrow {
   font-family: var(--ys-font-head);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   -webkit-text-fill-color: var(--ys-accent);
   margin: 0 0 12px;
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 /* ::after pseudo is NOT targeted by global CSS */
 .ys-home-static__eyebrow::after {
   content: "";
   display: block;
   flex: 1;
   max-width: 48px;
   height: 1px;
   background: var(--ys-accent);
   opacity: 0.3;
 }
 
 .ys-home-static__section-head--row .ys-home-static__eyebrow::after {
   display: none;
 }
 
 .ys-home-static__eyebrow--pill {
   display: inline-flex;
   align-items: center;
   width: auto;
   padding: 7px 14px;
   border: 1px solid var(--ys-accent);
   border-radius: 4px;
   font-size: 10px;
   letter-spacing: 0.18em;
   margin-bottom: 22px;
   background: var(--ys-accent-soft);
 }
 
 .ys-home-static__eyebrow--pill::after {
   display: none;
 }
 
 /* ──── Headings ──── */
 .ys-home-static h1 {
   font-family: var(--ys-font-head);
   font-size: clamp(28px, 4.5vw, 44px);
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.08;
   margin: 0 0 18px;
   /* Black text from global CSS = perfect on light sections */
 }
 
 .ys-home-static__hero h1 {
   font-size: clamp(36px, 6vw, 72px);
   font-weight: 900;
   letter-spacing: -0.04em;
   line-height: 1.02;
 }

#ys-hero-heading {
  color: rgba(0, 0, 0, 1);
}
 
 /*
  * GRADIENT TEXT — uses -webkit-text-fill-color: transparent
  * which overrides the global `color: #000` visually.
  * The gradient shows through the transparent text.
  */
 .ys-home-static__hero-gradient {
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: rgba(13, 99, 229, 1);
 }
 
 @keyframes ys-gradient-shift {
   0%, 100% { background-position: 0% center; }
   50% { background-position: 200% center; }
 }
 
 .ys-home-static h2 {
   font-family: var(--ys-font-head);
   font-size: clamp(24px, 3vw, 34px);
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.12;
   margin: 0 0 8px;
 }

#ys-brands-heading,
#ys-products-heading,
#ys-cats-heading,
#ys-standards-heading {
  color: rgba(0, 0, 0, 1);
}

#ys-news-heading {
  color: rgba(255, 255, 255, 1);
}
 
 .ys-home-static__lead {
   margin: 0 0 32px;
   max-width: 44ch;
   font-family: var(--ys-font-body);
   font-size: 17px;
   font-weight: 400;
   line-height: 1.7;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.6);
 }
 
 .ys-home-static__hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
 }
 
 /* ═══════════════════════════════════════════════════════
    HERO GRID + STATS
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__hero-grid {
   display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
   margin-bottom: 44px;
   position: relative;
  z-index: 2;
  color: rgba(13, 99, 229, 1);
 }
 
/* Switch to 2-column side-by-side layout on all screens larger than a phone (≥768px). */
@media (min-width: 768px) {
  .ys-home-static__hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 52px;
    min-height: 400px;
    align-items: center;
  }
}

@media (min-width: 1200px) {
  .ys-home-static__hero-grid {
    grid-template-columns: minmax(500px, 1fr) 1.2fr;
    min-height: 480px;
  }
}
 
 .ys-home-static__hero-main {
   max-width: 640px;
  position: relative;
  z-index: 2;
 }
 
.ys-home-static .ys-home-static__hero > canvas.ys-home-static__hero-bg-canvas,
.ys-home-static__hero > canvas.ys-home-static__hero-bg-canvas,
canvas.ys-home-static__hero-bg-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  z-index: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ys-home-static__hero-visual {
  display: block;
  position: relative;
  z-index: 3;
  justify-self: end;
  align-self: center;
  width: 100%;
  max-width: 800px;
  opacity: 1 !important;
  transform: none !important;
}

.ys-home-static__hero-visual .ys-home-static__hero-bg-image {
  width: 100%;
  height: auto;
  max-height: 640px;
  display: block !important;
  object-fit: contain;
  object-position: right center;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 3;
}

/* Hero image — base (mobile): compact, centered below text. */
.ys-home-static__hero-grid > div > .ys-home-static__hero-bg-image,
.ys-home-static__hero-bg-image {
  display: block;
  width: 70%;
  max-width: 300px;
  height: auto;
  margin: 8px auto 0;
  object-fit: contain;
  object-position: center;
}

/* Tablet+ (≥768px): image is in its own fixed-width column on the right.
   It should fill that column but not overflow it. */
@media (min-width: 768px) {
  .ys-home-static__hero-grid > div > .ys-home-static__hero-bg-image,
  .ys-home-static__hero-bg-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0;
    object-position: center;
    box-shadow: none !important;
    filter: none !important;
    transform: scale(1.1) !important;
    transform-origin: right center;
  }

  /* Center the image vertically inside its grid cell */
  .ys-home-static__hero-grid > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.ys-home-static__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}

 
 @media (min-width: 992px) {
  .ys-home-static__hero::after {
    background: none;
  }
 }
 
 .ys-home-static__hero-video,
 .ys-home-static__hero-canvas {
   width: 100%;
   height: 100%;
  min-height: 260px;
   display: block;
 }
 
 .ys-home-static__hero-canvas {
   background: transparent;
  cursor: move;
  pointer-events: auto;
}

@media (min-width: 992px) {
  .ys-home-static__hero-canvas {
    min-height: 400px;
  }
 }
 
 /* ──── Stats Cards ──── */
.ys-home-static__hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  position: relative;
  z-index: 2;
}
 
 @media (min-width: 640px) {
   .ys-home-static__hero-stats {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 
 .ys-home-static__hero-stats article {
   background: var(--ys-surface);
   border: 1px solid var(--ys-border);
   border-radius: var(--ys-radius);
   padding: 22px 16px;
   text-align: center;
   box-shadow: var(--ys-shadow-xs);
   transition:
     border-color var(--ys-duration) var(--ys-ease),
     box-shadow 0.4s var(--ys-ease),
     transform 0.4s var(--ys-ease);
   position: relative;
   overflow: hidden;
 }
 
 /* Accent top line (::before = NOT targeted by global CSS) */
 .ys-home-static__hero-stats article::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--ys-accent);
   transform: scaleX(0);
   transition: transform 0.4s var(--ys-ease);
 }
 
 .ys-home-static__hero-stats article:hover::before {
   transform: scaleX(1);
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .ys-home-static__hero-stats article:hover {
     border-color: var(--ys-accent);
     box-shadow: var(--ys-shadow-md);
     transform: translateY(-3px);
   }
 }
 
 .ys-home-static__hero-stats strong {
   display: block;
   font-family: var(--ys-font-head);
   font-size: clamp(24px, 3.2vw, 34px);
   font-weight: 900;
   letter-spacing: -0.03em;
   line-height: 1;
   margin-bottom: 8px;
   /* Black text = bold & impactful on light card */
   -webkit-text-fill-color: var(--ys-ink) !important;
 }
 
 .ys-home-static__hero-stats span {
   font-family: var(--ys-font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   -webkit-text-fill-color: var(--ys-ink-soft) !important;
 }
 
 /* ═══════════════════════════════════════════════════════
    STANDARDS GRID
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__grid {
   display: grid;
   gap: 16px;
 }
 
 .ys-home-static__grid--four {
   grid-template-columns: 1fr;
 }
 
 @media (min-width: 640px) {
   .ys-home-static__grid--four {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (min-width: 1024px) {
   .ys-home-static__grid--four {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 
 /* ──── Standards Cards ──── */
 .ys-home-static .ys-card {
   background: var(--ys-surface);
   border: 1px solid var(--ys-border);
   border-radius: var(--ys-radius);
   padding: 36px 28px;
   transition:
     border-color var(--ys-duration) var(--ys-ease),
     box-shadow 0.4s var(--ys-ease),
     transform 0.4s var(--ys-ease);
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
 /* Accent bar (::before = safe from global CSS) */
 .ys-home-static .ys-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--ys-accent), #7c3aed);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.5s var(--ys-ease);
 }
 
 .ys-home-static .ys-card:hover::before {
   transform: scaleX(1);
 }
 
 .ys-home-static .ys-card:hover {
   border-color: var(--ys-accent);
   box-shadow: var(--ys-shadow-lg);
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .ys-home-static .ys-card:hover {
     transform: translateY(-4px);
   }
 }
 
 .ys-home-static .ys-card:focus-within {
   outline: none;
   border-color: var(--ys-accent);
   box-shadow: 0 0 0 3px var(--ys-accent-glow);
 }
 
 /*
  * Card icon — IMMUNE TO GLOBAL CSS via filter: invert(1)
  * We make it a white square, let the SVG inherit the forced black color,
  * and then flip the whole thing to black-square/white-icon!
  */
 .ys-home-static .ys-card__icon {
   width: 52px;
   height: 52px;
   border-radius: var(--ys-radius-xs);
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   background: #ffffff;
   filter: invert(1) hue-rotate(180deg);
   transition: all 0.35s var(--ys-ease);
 }
 
 .ys-home-static .ys-card__icon svg {
   width: 24px;
   height: 24px;
   stroke-width: 1.75;
   stroke: #000000 !important; /* Forced black so it inverts to white */
   fill: none !important;
 }
 
 .ys-home-static .ys-card:hover .ys-card__icon {
   /* On hover, we change background to inverted accent! */
   background: var(--ys-accent);
   transform: scale(1.05);
 }
 
 .ys-home-static .ys-card h3 {
   font-family: var(--ys-font-head);
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.02em;
   margin: 0 0 12px;
   -webkit-text-fill-color: var(--ys-ink) !important;
 }
 
 .ys-home-static .ys-card p {
   margin: 0;
   font-size: 14px;
   line-height: 1.65;
   -webkit-text-fill-color: var(--ys-ink-soft) !important;
 }
 
 /* ═══════════════════════════════════════════════════════
    BUTTONS
    All buttons use -webkit-text-fill-color for white text
    since the global CSS forces color: #000 on all elements.
    ═══════════════════════════════════════════════════════ */
 .ys-home-static .ys-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 46px;
   padding: 0 24px;
   border-radius: var(--ys-radius-xs);
   font-family: var(--ys-font-head);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   border: 1.5px solid transparent;
   cursor: pointer;
   transition:
     background var(--ys-duration) var(--ys-ease),
     border-color var(--ys-duration) var(--ys-ease),
     box-shadow 0.3s var(--ys-ease),
     transform 0.15s var(--ys-ease),
     -webkit-text-fill-color var(--ys-duration) var(--ys-ease);
   text-decoration: none;
   white-space: nowrap;
   position: relative;
   overflow: hidden;
 }
 
 .ys-home-static .ys-btn:active:not(:disabled) {
   transform: translateY(1px);
 }
 
 .ys-home-static .ys-btn:focus-visible {
   outline: 2px solid var(--ys-accent);
   outline-offset: 3px;
 }
 
 /* Primary (blue bg → white text via text-fill + !important) */
 .ys-home-static .ys-btn--primary {
   background: var(--ys-accent);
   border-color: var(--ys-accent);
   -webkit-text-fill-color: #ffffff !important;
   box-shadow: 0 2px 8px var(--ys-accent-glow);
 }
 
 .ys-home-static .ys-btn--primary:hover {
   background: var(--ys-accent-hover);
   border-color: var(--ys-accent-hover);
   -webkit-text-fill-color: #ffffff !important;
   box-shadow: 0 6px 20px var(--ys-accent-glow);
   transform: translateY(-1px);
 }
 
 /* Hero solid (IMMUNE TO GLOBAL CSS via filter: invert(1)) */
 .ys-home-static .ys-btn--hero-solid {
   background: #ffffff; /* White bg */
   border: 2px solid #ffffff;
   color: #000000 !important; /* Forced black text */
   -webkit-text-fill-color: #000000 !important;
   filter: invert(1) hue-rotate(180deg); /* Inverts to Black bg with White text! */
   border-radius: var(--ys-radius-sm);
   letter-spacing: 0.1em;
   min-height: 54px;
   padding: 0 32px;
 }
 
 .ys-home-static .ys-btn--hero-solid:hover {
   background: var(--ys-surface-muted);
   transform: translateY(-2px);
 }
 
 /* Hero outline (transparent bg → black text [natural]) */
 .ys-home-static .ys-btn--hero-outline {
   background: transparent;
   border: 2px solid var(--ys-ink);
   border-radius: var(--ys-radius-sm);
   letter-spacing: 0.1em;
   min-height: 54px;
   padding: 0 32px;
   /* Black text from global = correct on transparent bg */
 }
 
 .ys-home-static .ys-btn--hero-outline:hover {
   border-color: var(--ys-accent);
   -webkit-text-fill-color: var(--ys-accent);
   background: var(--ys-accent-soft);
 }
 
 /* Secondary */
 .ys-home-static .ys-btn--secondary {
   background: transparent;
   border-color: var(--ys-ink);
   /* Black text from global = correct */
 }
 
 .ys-home-static .ys-btn--secondary:hover {
   background: var(--ys-ink);
   -webkit-text-fill-color: #fff;
   transform: translateY(-1px);
 }
 
 /* Ghost */
 .ys-home-static .ys-btn--ghost {
   background: transparent;
   border-color: var(--ys-border);
   -webkit-text-fill-color: var(--ys-ink-soft);
   min-height: 44px;
 }
 
 .ys-home-static .ys-btn--ghost:hover {
   border-color: var(--ys-ink);
   -webkit-text-fill-color: var(--ys-ink);
 }
 
 .ys-home-static .ys-btn--full {
   width: 100%;
 }
 
 /* ═══════════════════════════════════════════════════════
    CAROUSEL
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__carousel {
   position: relative;
   margin: 0 -4px;
 }
 
 .ys-home-static__carousel--edge-fade::before,
 .ys-home-static__carousel--edge-fade::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 12px;
   width: 32px;
   z-index: 1;
   pointer-events: none;
 }
 
 .ys-home-static__carousel--edge-fade::before {
   left: 0;
   background: linear-gradient(90deg, var(--ys-surface-muted), transparent);
 }
 
 .ys-home-static__carousel--edge-fade::after {
   right: 0;
   background: linear-gradient(270deg, var(--ys-surface-muted), transparent);
 }
 
 .ys-home-static__products .ys-home-static__carousel--edge-fade::before {
   background: linear-gradient(90deg, var(--ys-surface), transparent);
 }
 
 .ys-home-static__products .ys-home-static__carousel--edge-fade::after {
   background: linear-gradient(270deg, var(--ys-surface), transparent);
 }
 
 .ys-home-static__carousel-track {
   display: flex;
   gap: 16px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-padding: 8px;
   padding: 8px 4px 18px;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
   scrollbar-color: var(--ys-border) transparent;
   scroll-behavior: smooth;
 }
 
 .ys-home-static__carousel-track:focus-visible {
   outline: 2px solid var(--ys-accent);
   outline-offset: 4px;
   border-radius: var(--ys-radius-sm);
 }
 
 .ys-home-static__carousel-track::-webkit-scrollbar {
   height: 5px;
 }
 
 .ys-home-static__carousel-track::-webkit-scrollbar-thumb {
   background: var(--ys-border);
   border-radius: 99px;
 }
 
 .ys-home-static__carousel-track::-webkit-scrollbar-thumb:hover {
   background: #c0c4cc;
 }
 
 /* ──── Carousel Navigation ──── */
 .ys-home-static__carousel-nav {
   display: flex;
   gap: 8px;
 }
 
 .ys-home-static__carousel-btn {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1.5px solid var(--ys-ink);
   background: var(--ys-surface);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition:
     background 0.25s var(--ys-ease),
     border-color 0.25s var(--ys-ease),
     transform 0.2s var(--ys-ease-bounce),
     box-shadow 0.25s var(--ys-ease);
   flex-shrink: 0;
   padding: 0;
 }
 
 .ys-home-static__carousel-btn svg {
   width: 18px;
   height: 18px;
 }
 
 .ys-home-static__carousel-btn:hover:not(:disabled) {
   background: var(--ys-accent);
   border-color: var(--ys-accent);
   -webkit-text-fill-color: #fff;
   transform: scale(1.08);
   box-shadow: 0 4px 16px var(--ys-accent-glow);
 }
 
 /* Make SVG white on hover */
 .ys-home-static__carousel-btn:hover:not(:disabled) svg {
   stroke: #fff !important;
 }
 
 .ys-home-static__carousel-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
 
 .ys-home-static__carousel-btn:focus-visible {
   outline: 2px solid var(--ys-accent);
   outline-offset: 3px;
 }
 
 .ys-home-static__carousel-snap {
   scroll-snap-align: start;
   flex: 0 0 auto;
 }
 
/* ═══════════════════════════════════════════════════════
   CATEGORIES — clean grid, no borders
   ═══════════════════════════════════════════════════════ */

/* ── Collapse wrapper ── */
.ys-cats-wrap {
  overflow: hidden;
  max-height: 340px; /* ~2 rows on mobile (2 cols) */
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 480px) {
  .ys-cats-wrap { max-height: 360px; } /* ~2 rows (3 cols) */
}

@media (min-width: 768px) {
  .ys-cats-wrap { max-height: 420px; } /* ~2 rows (4 cols) */
}

@media (min-width: 1024px) {
  .ys-cats-wrap { max-height: 420px; max-width: 1100px; margin-left: auto; margin-right: auto; } /* ~2 rows (5 cols) */
}

/* Expanded: must come AFTER media queries and use !important so it always wins */
.ys-cats-wrap.ys-cats-wrap--expanded {
  max-height: 5000px !important;
}

/* ── Show More button ── */
.ys-cats-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.ys-cats-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border: 1.5px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--ys-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
  color: #374151;
  -webkit-text-fill-color: #374151;
}

.ys-cats-more-btn:hover {
  border-color: var(--ys-accent);
  background: var(--ys-accent-soft);
  -webkit-text-fill-color: var(--ys-accent);
  transform: translateY(-1px);
}

.ys-cats-more-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s;
  stroke: #374151;
}

.ys-cats-more-btn.ys-cats-more-btn--open .ys-cats-more-btn__icon {
  transform: rotate(180deg);
  stroke: var(--ys-accent);
}

.ys-cats-more-btn.ys-cats-more-btn--open {
  -webkit-text-fill-color: var(--ys-accent);
  border-color: var(--ys-accent);
}

/* ── Grid ── */
.ys-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}

@media (min-width: 480px) {
  .ys-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
}

@media (min-width: 768px) {
  .ys-cats-grid { grid-template-columns: repeat(4, 1fr); gap: 16px 14px; }
}

@media (min-width: 1024px) {
  .ys-cats-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
}

/* ── Card — modern minimalist style ── */
.ys-cats-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 6px;
  text-decoration: none;
  transition: all 0.25s var(--ys-ease);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.ys-cats-card:hover {
  transform: translateY(-3px);
  border-color: #e5e7eb;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

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

/* ── Image area ── */
.ys-cats-card__img-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
  min-height: 80px;
  padding: 4px;
  transition: background 0.22s var(--ys-ease);
}

.ys-cats-card:hover .ys-cats-card__img-wrap {
  background: #f3f4f6;
}

/* Remove the arc */
.ys-cats-card__img-wrap::before {
  display: none;
}

.ys-cats-card__img-wrap img {
  width: auto;
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ys-ease);
  display: block;
  margin: 0 auto;
}

.ys-cats-card:hover .ys-cats-card__img-wrap img {
  transform: scale(1.05);
}

/* ── Name — cleaner typography ── */
.ys-cats-card__name {
  display: block;
  font-family: var(--ys-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 2px 2px;
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  text-align: center;
  word-break: break-word;
}

@media (min-width: 768px) {
  .ys-cats-card { padding: 8px; }
  .ys-cats-card__img-wrap { min-height: 100px; padding: 6px; }
  .ys-cats-card__img-wrap img { height: 90px; }
  .ys-cats-card__name { font-size: 12px; padding-top: 8px; }
}

@media (min-width: 1024px) {
  .ys-cats-card { padding: 8px; }
  .ys-cats-card__img-wrap { min-height: 110px; padding: 8px; }
  .ys-cats-card__img-wrap img { height: 100px; }
  .ys-cats-card__name { font-size: 12.5px; padding-top: 8px; }
}
 
 /* ═══════════════════════════════════════════════════════
    PRODUCT CARDS
    ═══════════════════════════════════════════════════════ */
 .ys-home-static .ys-product-card.ys-home-static__carousel-snap {
   width: min(260px, 78vw);
   display: flex;
   flex-direction: column;
   background: var(--ys-surface);
   border: 1px solid var(--ys-border);
   border-radius: var(--ys-radius);
   overflow: hidden;
   transition:
     border-color var(--ys-duration) var(--ys-ease),
     box-shadow 0.4s var(--ys-ease),
     transform 0.4s var(--ys-ease);
 }
 
 .ys-home-static .ys-product-card.ys-home-static__carousel-snap:hover {
   border-color: var(--ys-ink);
   box-shadow: var(--ys-shadow-xl);
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .ys-home-static .ys-product-card.ys-home-static__carousel-snap:hover {
     transform: translateY(-5px);
   }
 }
 
 .ys-home-static .ys-product-card.ys-home-static__carousel-snap:focus-within {
   outline: 2px solid var(--ys-accent);
   outline-offset: 3px;
 }
 
 .ys-home-static .ys-product-card__thumb {
   display: block;
   background: var(--ys-surface-muted);
   aspect-ratio: 1;
   overflow: hidden;
   position: relative;
 }
 
 .ys-home-static .ys-product-card__thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 14px;
   transition: transform 0.5s var(--ys-ease);
 }
 
 .ys-home-static .ys-product-card:hover .ys-product-card__thumb img {
   transform: scale(1.05);
 }
 
 .ys-home-static .ys-product-card h3 {
   font-family: var(--ys-font-body);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
   margin: 0;
   padding: 14px 14px 8px;
   flex: 1;
 }
 
 .ys-home-static .ys-product-card h3 a {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   /* Black text from global = fine on white card */
 }
 
 .ys-home-static .ys-product-card h3 a:hover {
   -webkit-text-fill-color: var(--ys-accent);
 }
 
 .ys-home-static .ys-product-card__price {
   font-family: var(--ys-font-head);
   font-size: 20px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0;
   padding: 0 14px 14px;
   /* Black price = bold & clear */
 }
 
 .ys-home-static .ys-product-card .ys-btn {
   margin: 0 14px 14px;
   width: calc(100% - 28px);
 }
 
/* ═══════════════════════════════════════════════════════
   BRANDS (infinite marquee, 2 rows, opposite directions)
   ═══════════════════════════════════════════════════════ */
.ys-home-static__brands {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

@media (min-width: 992px) {
  .ys-home-static__brands {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

.ys-home-static__brands .ys-home-static__section-head--row {
  margin-bottom: 16px;
}

.ys-home-static__brands-marquee-outer {
  margin: 0 -4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ys-home-static__brands-viewport {
  overflow: hidden;
  width: 100%;
  padding: 2px 0;
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.ys-home-static__brands-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ys-home-static__brands-marquee--ltr {
  animation: ys-home-brands-marquee 55s linear infinite;
  animation-direction: normal;
}

.ys-home-static__brands-marquee--rtl {
  animation: ys-home-brands-marquee 55s linear infinite;
  animation-direction: reverse;
}

.ys-home-static__brands-marquee:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ys-home-static__brands-marquee--ltr,
  .ys-home-static__brands-marquee--rtl {
    animation: none;
  }
  .ys-home-static__brands-viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@keyframes ys-home-brands-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ys-home-static__brands-marquee-set {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 12px;
}

.ys-home-static__brands-marquee .ys-brand {
  flex: 0 0 auto;
  width: 180px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--ys-surface);
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-sm);
  transition:
    border-color 0.25s var(--ys-ease),
    box-shadow 0.3s var(--ys-ease),
    transform 0.3s var(--ys-ease);
}

.ys-home-static__brands-marquee .ys-brand:hover {
  border-color: var(--ys-ink);
  box-shadow: var(--ys-shadow-sm);
  transform: translateY(-2px);
}

.ys-home-static__brands-marquee .ys-brand img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.35s var(--ys-ease);
}

.ys-home-static__brands-marquee .ys-brand:hover img {
  transform: scale(1.04);
}

@media (max-width: 640px) {
  .ys-home-static__brands-marquee .ys-brand {
    width: 140px;
    height: 80px;
    padding: 8px 10px;
  }
  .ys-home-static__brands-marquee .ys-brand img {
    max-height: 60px;
  }
  .ys-home-static__brands-marquee-outer {
    gap: 10px;
  }
}
 
 /* ═══════════════════════════════════════════════════════
    NEWSLETTER — PREMIUM LIGHT GRADIENT
    Instead of dark bg (which fights global black text),
    we use a soft blue-tinted gradient where black text
    reads beautifully and feels premium.
    ═══════════════════════════════════════════════════════ */
 .ys-home-static__newsletter {
   background: linear-gradient(135deg, #003566 0%, #002848 55%, #001e3a 100%) !important;
   display: grid;
   grid-template-columns: 1fr;
   gap: 32px;
   align-items: center;
   border: none;
   border-radius: var(--ys-radius);
   border-top: 3px solid var(--ys-accent);
   border-bottom-color: transparent;
   padding: 52px 28px !important;
   margin-top: 0;
   position: relative;
   overflow: hidden;
 }
 
 /* Subtle decorative circles (::before = safe from global CSS) */
 .ys-home-static__newsletter::before {
   content: "";
   position: absolute;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(37, 99, 235, 0.06);
   top: -200px;
   right: -100px;
   pointer-events: none;
 }
 
 .ys-home-static__newsletter::after {
   content: "";
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(124, 58, 237, 0.05);
   bottom: -150px;
   left: -50px;
   pointer-events: none;
 }
 
 @media (min-width: 768px) {
   .ys-home-static__newsletter {
     grid-template-columns: 1fr 1fr;
     gap: 56px;
     padding: 64px 44px !important;
   }
 }
 
 .ys-home-static__newsletter h2 {
   font-size: clamp(22px, 2.8vw, 32px);
   /* Black text from global = great on light blue gradient */
 }
 
 .ys-home-static__newsletter .ys-home-static__eyebrow {
   -webkit-text-fill-color: var(--ys-accent);
 }
 
 .ys-home-static__newsletter .ys-home-static__eyebrow::after {
   background: var(--ys-accent);
   opacity: 0.2;
 }
 
 .ys-home-static__newsletter-copy {
   max-width: 36rem;
   position: relative;
 }
 
 .ys-home-static__newsletter-note {
   margin: 14px 0 0;
   font-size: 14px;
   line-height: 1.5;
   -webkit-text-fill-color: var(--ys-ink-soft);
 }
 
 .ys-home-static__newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
   position: relative;
 }
 
 @media (min-width: 480px) {
   .ys-home-static__newsletter-form {
     flex-direction: row;
     align-items: stretch;
   }
 }
 
 .ys-home-static__newsletter-form input[type="email"] {
   flex: 1;
   min-height: 54px;
   padding: 0 18px;
   border: 1.5px solid rgba(0, 0, 0, 0.12);
   border-radius: var(--ys-radius-xs);
   font-family: var(--ys-font-body);
   font-size: 15px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: all 0.3s var(--ys-ease);
   /* Black text from global = correct on white input */
 }
 
 .ys-home-static__newsletter-form input:focus {
   outline: none;
   border-color: var(--ys-accent);
   background: #fff;
   box-shadow: 0 0 0 3px var(--ys-accent-glow);
 }
 
 /* ::placeholder is NOT targeted by global CSS */
 .ys-home-static__newsletter-form input::placeholder {
   color: #9ca3af !important;
   -webkit-text-fill-color: #9ca3af;
 }
 
 .ys-home-static__newsletter-form .ys-btn--primary {
   border-radius: var(--ys-radius-xs);
   letter-spacing: 0.1em;
   min-height: 54px;
 }
 






/* =========================================================
   YARIN SUPPLY — CMS LANDING PAGE
   Homepage-matched design system
   Scoped only to .ys-landing-page
   ========================================================= */

.ys-landing-page {
  --yslp-ink: #0a0a0a;
  --yslp-ink-soft: #6b7280;
  --yslp-surface: #ffffff;
  --yslp-muted: #f8f9fa;
  --yslp-border: #e5e7eb;
  --yslp-border-light: #f0f0f0;
  --yslp-blue: #2563eb;
  --yslp-blue-hover: #1d4ed8;
  --yslp-blue-soft: rgba(37, 99, 235, 0.06);
  --yslp-blue-glow: rgba(37, 99, 235, 0.20);
  --yslp-radius: 16px;
  --yslp-radius-sm: 12px;
  --yslp-radius-xs: 8px;

  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

.ys-landing-page *,
.ys-landing-page *::before,
.ys-landing-page *::after {
  box-sizing: border-box;
}

.ys-landing-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ys-landing-page p {
  color: #000 !important;
}

.ys-landing-page h1,
.ys-landing-page h2,
.ys-landing-page h3,
.ys-landing-page strong {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #000 !important;
}


/* =========================================================
   EYEBROWS
   ========================================================= */

.yslp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: #2563eb;
  opacity: .3;
}

.yslp-eyebrow-pill {
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid #2563eb;
  border-radius: 4px;
  background: rgba(37,99,235,.06);
  margin-bottom: 22px;
  letter-spacing: .18em;
}

.yslp-eyebrow-pill::after {
  display: none;
}


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

.yslp-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 24px 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: inset 0 3px 0 0 #2563eb;
}

.yslp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 1px 1px,
      rgba(0,0,0,.04) 1px,
      transparent 0
    );
  background-size: 32px 32px;
  pointer-events: none;
}

.yslp-hero-grid {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  min-height: 430px;
  margin: 0 auto 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 45px;
}

.yslp-hero-content {
  max-width: 650px;
  position: relative;
  z-index: 2;
}

.yslp-hero h1 {
  margin: 0 0 20px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.045em;
}

.yslp-hero h1 span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-lead {
  max-width: 650px;
  margin: 0 0 15px;
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-fill-color: rgba(0,0,0,.62) !important;
}

.yslp-sublead {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-fill-color: #6b7280 !important;
}

.yslp-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yslp-hero-visual::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(37,99,235,.07);
  filter: blur(10px);
}

.yslp-hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  object-fit: contain;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.yslp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.yslp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .3s ease,
    transform .2s ease;
}

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

.yslp-btn-primary {
  background: #2563eb;
  border: 1.5px solid #2563eb;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.20);
}

.yslp-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 6px 20px rgba(37,99,235,.20);
}

.yslp-btn-outline {
  background: transparent;
  border: 1.5px solid #0a0a0a;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.yslp-btn-outline:hover {
  border-color: #2563eb;
  background: rgba(37,99,235,.06);
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}


/* =========================================================
   STATS
   ========================================================= */

.yslp-stats {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 56px;
}

.yslp-stat {
  position: relative;
  overflow: hidden;
  padding: 22px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.yslp-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #2563eb;
  transform: scaleX(0);
  transition: transform .4s ease;
}

.yslp-stat:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.yslp-stat:hover::before {
  transform: scaleX(1);
}

.yslp-stat strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  -webkit-text-fill-color: #0a0a0a !important;
}

.yslp-stat span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   COMMON SECTIONS
   ========================================================= */

.yslp-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0;
  border-bottom: 1px solid #f0f0f0;
}

.yslp-muted-section {
  width: 100%;
  padding-left: max(24px, calc((100% - 1180px) / 2));
  padding-right: max(24px, calc((100% - 1180px) / 2));
  background: #f8f9fa;
}

.yslp-heading {
  max-width: 850px;
  margin: 0 auto 42px;
  text-align: center;
}

.yslp-heading h2 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
}

.yslp-heading h2 span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-rule {
  width: 48px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: #2563eb;
}


/* =========================================================
   COPY
   ========================================================= */

.yslp-copy p {
  margin: 0 0 18px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  -webkit-text-fill-color: #6b7280 !important;
}

.yslp-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   REQUIREMENT
   ========================================================= */

.yslp-two-column {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: start;
}

.yslp-highlight {
  padding: 32px;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 16px;
  background: rgba(37,99,235,.045);
}

.yslp-highlight-label {
  margin-bottom: 15px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-highlight strong {
  display: block;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.yslp-highlight p {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.yslp-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.yslp-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  transition:
    border-color .25s ease,
    box-shadow .4s ease,
    transform .4s ease;
}

.yslp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,#2563eb,#7c3aed);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}

.yslp-card:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 20px 60px rgba(0,0,0,.10);
}

.yslp-card:hover::before {
  transform: scaleX(1);
}

.yslp-card-number {
  display: block;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.yslp-card h3 {
  margin: 58px 0 12px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}

.yslp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.yslp-included-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 70px;
  border-top: 1px solid #e5e7eb;
}

.yslp-included-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 27px 0;
  border-bottom: 1px solid #e5e7eb;
}

.yslp-included-item > span {
  padding-top: 3px;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.yslp-included-item h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 700;
}

.yslp-included-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   WHY YARIN
   ========================================================= */

.yslp-feature-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: start;
}

.yslp-mini-stats {
  display: grid;
  gap: 12px;
}

.yslp-mini-stats > div {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: .3s ease;
}

.yslp-mini-stats > div:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
}

.yslp-mini-stats strong {
  display: block;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.yslp-mini-stats span {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   PRACTITIONER DEPTH
   ========================================================= */

.yslp-depth-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
}

.yslp-depth-title h2 {
  max-width: 520px;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(30px,4vw,48px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.04em;
}

.yslp-depth-title h2 span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-depth-title .yslp-rule {
  margin-left: 0;
}


/* =========================================================
   PAIR CARDS
   ========================================================= */

.yslp-pair-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}

.yslp-pair-card {
  padding: 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  transition: .35s ease;
}

.yslp-pair-card:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

.yslp-pair-card > span {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(37,99,235,.06);
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 11px;
  font-weight: 800;
}

.yslp-pair-card h3 {
  margin: 25px 0 10px;
  font-size: 20px;
  line-height: 1.2;
}

.yslp-pair-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   PRICING
   ========================================================= */

.yslp-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  padding: 42px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.05);
}

.yslp-pricing-points {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.yslp-pricing-points > div {
  min-height: 95px;
  padding: 19px;
  border-radius: 12px;
  background: #f8f9fa;
}

.yslp-pricing-points strong {
  display: block;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 11px;
}

.yslp-pricing-points span {
  display: block;
  margin-top: 12px;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   TRUST
   ========================================================= */

.yslp-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: start;
}

.yslp-trust-list {
  display: grid;
  gap: 10px;
}

.yslp-trust-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 19px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.yslp-trust-list b {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 16px;
}

.yslp-trust-list div {
  font-size: 13px;
  font-weight: 650;
}


/* =========================================================
   FAQ
   ========================================================= */

.yslp-faq {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid #e5e7eb;
}

.yslp-faq details {
  border-bottom: 1px solid #e5e7eb;
}

.yslp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.yslp-faq summary::-webkit-details-marker {
  display: none;
}

.yslp-faq summary span {
  flex: 0 0 auto;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 25px;
  font-weight: 400;
  transition: transform .25s ease;
}

.yslp-faq details[open] summary span {
  transform: rotate(45deg);
}

.yslp-faq details p {
  max-width: 820px;
  margin: 0;
  padding: 0 40px 26px 4px;
  font-size: 14px;
  line-height: 1.75;
  -webkit-text-fill-color: #6b7280 !important;
}


/* =========================================================
   KEYWORD
   ========================================================= */

.yslp-keyword-box {
  max-width: 850px;
  margin: 0 auto;
  padding: 38px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.yslp-keyword-box p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-fill-color: #6b7280 !important;
}

.yslp-keyword-box strong {
  display: inline-block;
  margin-bottom: 18px;
  padding: 13px 20px;
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 8px;
  background: rgba(37,99,235,.04);
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 14px;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.yslp-final-cta {
  position: relative;
  overflow: hidden;
  padding: 90px 24px;
  background: #0a0a0a;
  text-align: center;
}

.yslp-final-cta::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: -350px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(37,99,235,.20);
  filter: blur(50px);
}

.yslp-final-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.yslp-final-cta .yslp-eyebrow {
  margin-left: auto;
  margin-right: auto;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.yslp-final-cta .yslp-eyebrow::after {
  display: none;
}

.yslp-final-cta h2 {
  margin: 18px 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(38px,5vw,62px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.045em;
}

.yslp-final-cta h2 span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.yslp-final-cta p {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255,255,255,.68) !important;
  -webkit-text-fill-color: rgba(255,255,255,.68) !important;
  font-size: 15px;
  line-height: 1.75;
}

.yslp-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.yslp-btn-white {
  background: #fff;
  border: 1.5px solid #fff;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.yslp-btn-white:hover {
  background: #f8f9fa;
  border-color: #f8f9fa;
}

.yslp-phone {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.yslp-final-cta small {
  display: block;
  margin-top: 20px;
  color: rgba(255,255,255,.40) !important;
  -webkit-text-fill-color: rgba(255,255,255,.40) !important;
  font-size: 11px;
}


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

@media (max-width: 1023px) {

  .yslp-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 25px;
  }

  .yslp-hero-content {
    max-width: 760px;
  }

  .yslp-hero-visual {
    max-width: 650px;
    margin: 0 auto;
  }

  .yslp-card-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .yslp-feature-grid,
  .yslp-depth-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .yslp-trust-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}

@media (max-width: 767px) {

  .yslp-hero {
    padding: 45px 16px 0;
  }

  .yslp-hero h1 {
    font-size: clamp(38px, 11vw, 55px);
  }

  .yslp-hero-grid {
    margin-bottom: 35px;
  }

  .yslp-hero-visual img {
    max-width: 500px;
  }

  .yslp-stats {
    grid-template-columns: repeat(2,1fr);
    padding-bottom: 40px;
  }

  .yslp-section {
    width: calc(100% - 32px);
    padding: 58px 0;
  }

  .yslp-muted-section {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .yslp-heading {
    margin-bottom: 34px;
  }

  .yslp-heading h2 {
    font-size: 31px;
  }

  .yslp-two-column,
  .yslp-included-grid,
  .yslp-pair-grid,
  .yslp-pricing {
    grid-template-columns: 1fr;
  }

  .yslp-card-grid {
    grid-template-columns: 1fr;
  }

  .yslp-card {
    min-height: auto;
  }

  .yslp-card h3 {
    margin-top: 35px;
  }

  .yslp-pricing {
    padding: 28px;
    gap: 35px;
  }

  .yslp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .yslp-actions .yslp-btn {
    width: 100%;
  }

  .yslp-final-actions {
    flex-direction: column;
  }

}

@media (max-width: 480px) {

  .yslp-stat {
    padding: 20px 8px;
  }

  .yslp-stat strong {
    font-size: 28px;
  }

  .yslp-stat span {
    font-size: 9px;
  }

  .yslp-highlight,
  .yslp-pair-card,
  .yslp-keyword-box {
    padding: 25px;
  }

  .yslp-pricing-points {
    grid-template-columns: 1fr;
  }

  .yslp-included-item {
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }

}
/* =========================================
   REMOVE WHITE SPACE ABOVE LANDING PAGE ONLY
   ========================================= */

body:has(.ys-landing-page) #main,
body:has(.ys-landing-page) #content-wrapper,
body:has(.ys-landing-page) #content,
body:has(.ys-landing-page) .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.ys-landing-page) .page-header,
body:has(.ys-landing-page) .page-title-wrapper {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove top white space ONLY from CMS page ID 7 */
body.cms-id-7 .page-title-wrapper.p_title_small {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
/* ONLY Landing Page CMS ID 7 */
body.cms-id-7 .page-title-wrapper.p_title_small {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
 
}
/* Remove extra white space ONLY on CMS page 7 */
body.cms-id-7 .page-title-wrapper,
body.cms-id-7 .page-title-wrapper.p_title_small {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.cms-id-7 #wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}