/* ============================================================
   MSL — Site-wide Styles
   Diamond Editorial Design System
   Brand colors extracted from logo (red/yellow/green diamonds + charcoal)
   ============================================================ */

/* ===== Design tokens ===== */
:root {
  --msl-red:      #C8242E;
  --msl-yellow:   #E8B43A;
  --msl-green:    #5BB948;
  --msl-charcoal: #2D3748;
  --msl-paper:    #FAFAFA;
  --msl-ink:      #0F1419;
  --msl-paper-2:  #F1EEEC;   /* slightly warmer card */
  --msl-text-2:   #5B5B5F;
  --msl-hairline: rgba(45, 55, 72, 0.12);
  --msl-hairline-strong: rgba(45, 55, 72, 0.22);
}

/* ===== Base reset ===== */
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--msl-paper);
  color: var(--msl-charcoal);
  font-feature-settings: 'ss01', 'ss02';
}
*, *::before, *::after { box-sizing: border-box; }

/* ===== Scrollbars hidden on horizontal carousels ===== */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===== Layout — push content below fixed header ===== */
main { padding-top: 64px; }
@media (min-width: 1024px) { main { padding-top: 80px; } }

/* ===== Section rhythm — tighter, less dead-space =====
   Reduces excessive Tailwind utility padding values across the site (~30% tighter) */
section.py-12 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
section.py-14 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
section.py-16 { padding-top: 3rem; padding-bottom: 3rem; }
section.py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
section.py-24 { padding-top: 4rem; padding-bottom: 4rem; }
section.py-28 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
section.py-32 { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) {
  section.md\:py-16 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.md\:py-20 { padding-top: 4rem; padding-bottom: 4rem; }
  section.md\:py-24 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  section.md\:py-28 { padding-top: 5rem; padding-bottom: 5rem; }
  section.md\:py-32 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* Remove margin between adjacent sections with matching backgrounds */
section.bg-white + section.bg-white,
section.bg-msl-paper + section.bg-msl-paper { margin-top: -1rem; }

/* Reduce internal "mb" gaps that are also bloated */
.mb-12 { margin-bottom: 2rem; }
.mb-14 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 3rem; }

/* ============================================================
   TYPOGRAPHY — Editorial scale
   ============================================================ */
.font-display {
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
}
.font-headline {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700;
  color: var(--msl-charcoal);
  letter-spacing: 0.22em; text-transform: uppercase;
  font-family: 'Heebo', sans-serif;
}
.eyebrow::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: var(--msl-red); transform: rotate(45deg);
}
.eyebrow.eyebrow-y::before { background: var(--msl-yellow); }
.eyebrow.eyebrow-g::before { background: var(--msl-green); }
.eyebrow.eyebrow-w { color: rgba(255,255,255,0.85); }

/* Legacy gradient text — map to MSL ink/charcoal */
.headline-mask {
  background: linear-gradient(180deg, var(--msl-charcoal) 0%, #6B7280 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.num {
  background: linear-gradient(180deg, var(--msl-charcoal), #1F2937);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; font-weight: 900;
}

/* ============================================================
   DIAMOND MOTIF — recurring brand mark
   ============================================================ */
.diamond {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--msl-red);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.diamond-r { background: var(--msl-red); }
.diamond-y { background: var(--msl-yellow); }
.diamond-g { background: var(--msl-green); }
.diamond-sm { width: 8px; height: 8px; }
.diamond-md { width: 16px; height: 16px; }
.diamond-lg { width: 24px; height: 24px; }
.diamond-xl { width: 48px; height: 48px; }

/* Outlined diamond — used as section number badge */
.diamond-outline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 2px solid var(--msl-charcoal);
  transform: rotate(45deg);
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: .9rem;
  letter-spacing: 0;
}
.diamond-outline > span { transform: rotate(-45deg); }
.diamond-outline.diamond-r { border-color: var(--msl-red); color: var(--msl-red); background: transparent; }
.diamond-outline.diamond-y { border-color: var(--msl-yellow); color: var(--msl-yellow); background: transparent; }
.diamond-outline.diamond-g { border-color: var(--msl-green); color: var(--msl-green); background: transparent; }

/* Brand divider — 3 diamonds horizontal R / Y / G */
.brand-divider {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 2rem 0;
}
.brand-divider .diamond:nth-child(1) { background: var(--msl-red); }
.brand-divider .diamond:nth-child(2) { background: var(--msl-yellow); }
.brand-divider .diamond:nth-child(3) { background: var(--msl-green); }

/* Big watermark diamond in section corners — 10% opacity */
.diamond-watermark {
  position: absolute; pointer-events: none;
  width: 400px; height: 400px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.08;
}

/* ============================================================
   PILLS — recolored (replaces old emerald pill)
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--msl-charcoal);
  border-radius: 9999px;
  color: var(--msl-charcoal);
  font-size: .78rem; font-weight: 700;
  letter-spacing: 0.12em;
}
.pill::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: var(--msl-red); transform: rotate(45deg);
}
.pill.pill-y::before { background: var(--msl-yellow); }
.pill.pill-g::before { background: var(--msl-green); }
.pill.pill-dark { background: var(--msl-ink); color: #fff; border-color: var(--msl-ink); }
.pill.pill-light { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.pill i { display: none; } /* hide leftover Lucide icons in old markup */

/* ============================================================
   BUTTONS — sharp, editorial
   ============================================================ */
.btn-msl {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.75rem;
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.02em;
  border: 2px solid var(--msl-charcoal);
  background: var(--msl-charcoal); color: #fff;
  border-radius: 0;
  cursor: pointer; text-decoration: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s, color .25s, border-color .25s;
  position: relative;
}
.btn-msl:hover { transform: translateY(-2px); }
.btn-msl-primary {
  background: var(--msl-red); border-color: var(--msl-red); color: #fff;
}
.btn-msl-primary:hover { background: #A4001A; border-color: #A4001A; }
.btn-msl-secondary {
  background: transparent; border-color: var(--msl-charcoal); color: var(--msl-charcoal);
}
.btn-msl-secondary:hover { background: var(--msl-charcoal); color: #fff; }
.btn-msl-ghost {
  background: transparent; border-color: transparent; color: var(--msl-charcoal);
  padding: .65rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--msl-charcoal);
}
.btn-msl-ghost:hover { color: var(--msl-red); border-color: var(--msl-red); }
.btn-msl::after {
  content: '◆'; font-size: .75em; color: inherit; opacity: 0.65;
  margin-right: .25rem; transition: transform .25s, opacity .25s;
}
.btn-msl:hover::after { opacity: 1; transform: translateX(-3px); }

/* NOTE — emerald colors are intentionally left alone here.
   Legacy emerald-* utility classes still produce green (mapped to MSL Green via Tailwind config).
   To get MSL Red CTAs, use class="btn-msl btn-msl-primary" explicitly. */

/* ============================================================
   FORM FIELDS — bottom-border editorial style
   ============================================================ */
.field {
  width: 100%; padding: 1rem .25rem .65rem;
  border: none; border-bottom: 2px solid var(--msl-charcoal);
  border-radius: 0;
  background: transparent;
  font-size: 1.05rem; font-family: inherit;
  color: var(--msl-charcoal);
  transition: border-color .25s;
}
.field::placeholder { color: rgba(45,55,72,0.4); }
.field:focus { outline: none; border-bottom-color: var(--msl-red); }
.field[disabled] { opacity: .5; }
textarea.field { resize: vertical; min-height: 120px; padding-top: .85rem; }

.label {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; font-weight: 700;
  color: var(--msl-charcoal);
  letter-spacing: 0.18em; text-transform: uppercase;
}

.check {
  width: 22px; height: 22px;
  border-radius: 0; border: 2px solid var(--msl-charcoal);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all .25s;
  background: transparent;
}
.check.checked {
  background: var(--msl-red); border-color: var(--msl-red); color: #fff;
}

/* ============================================================
   CARDS — flat, hairline border, sharp corners
   ============================================================ */
.card-msl {
  background: #fff;
  border: 1px solid var(--msl-hairline);
  border-radius: 0;
  padding: 2rem;
  transition: border-color .25s, transform .25s;
  position: relative;
}
.card-msl:hover { border-color: var(--msl-charcoal); transform: translateY(-3px); }

/* Soften rounded cards site-wide — keep them slightly rounded for warmth, not pill-shape */
.rounded-2xl, .rounded-3xl { border-radius: 4px !important; }
.rounded-xl { border-radius: 4px !important; }
/* Pills, fully-round elements, and avatars keep their roundness */
.rounded-full { border-radius: 9999px; }
/* Shadows softened, not removed entirely */
.shadow-emerald-100\/50, .shadow-emerald-200, .shadow-red-100, .shadow-red-200 { box-shadow: none !important; }

/* ============================================================
   SECTION ATMOSPHERE
   ============================================================ */
.bg-msl-paper { background: var(--msl-paper); }
.bg-msl-ink { background: var(--msl-ink); color: #fff; }
.bg-msl-card { background: #fff; }

/* Hairline divider */
.divider-hair { height: 1px; background: var(--msl-hairline); border: 0; }

/* ============================================================
   SIGNATURE PATTERNS — pulled directly from Stitch designs
   ============================================================ */

/* Section eyebrow — small diamond + small caps label */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: 'Heebo', sans-serif; font-weight: 700;
  font-size: .9rem; letter-spacing: 0.04em;
  color: var(--msl-red);
  margin-bottom: 1rem;
}
.sec-eyebrow::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  background: var(--msl-red); transform: rotate(45deg);
  flex-shrink: 0;
}
.sec-eyebrow.eb-y { color: var(--msl-yellow); }
.sec-eyebrow.eb-y::before { background: var(--msl-yellow); }
.sec-eyebrow.eb-g { color: var(--msl-green); }
.sec-eyebrow.eb-g::before { background: var(--msl-green); }
.sec-eyebrow.eb-charcoal { color: var(--msl-charcoal); }
.sec-eyebrow.eb-charcoal::before { background: var(--msl-charcoal); }

/* Massive editorial headline (used like "10 שירותים.") */
.editorial-h {
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.045em;
  color: var(--msl-charcoal);
}
.editorial-h .period { color: var(--msl-red); }
.editorial-h .period-y { color: var(--msl-yellow); }
.editorial-h .period-g { color: var(--msl-green); }

/* Card with corner ◇ index marker */
.card-stitch {
  position: relative;
  background: #fff;
  border: 1px solid var(--msl-hairline);
  padding: 2.25rem 1.75rem 1.75rem;
  transition: border-color .3s, transform .3s;
}
.card-stitch:hover { border-color: var(--msl-charcoal); transform: translateY(-4px); }
.card-stitch .card-corner {
  position: absolute; top: 16px; right: 16px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--msl-hairline-strong);
  transform: rotate(45deg);
}
.card-stitch.card-r .card-corner { border-color: var(--msl-red); }
.card-stitch.card-y .card-corner { border-color: var(--msl-yellow); }
.card-stitch.card-g .card-corner { border-color: var(--msl-green); }

/* Process strip — 4 diamonds with numbers inside, alternating colors */
.process-strip {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 3rem 0;
}
.process-step {
  flex: 1 1 200px;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  text-align: center;
}
.process-step .step-diamond {
  position: relative;
  width: 84px; height: 84px;
  border: 2px solid var(--msl-charcoal);
  transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.process-step .step-diamond > span {
  transform: rotate(-45deg);
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.05em;
}
.process-step.step-r .step-diamond { border-color: var(--msl-red); color: var(--msl-red); }
.process-step.step-y .step-diamond { border-color: var(--msl-yellow); color: var(--msl-yellow); }
.process-step.step-g .step-diamond { border-color: var(--msl-green); color: var(--msl-green); }
.process-step h4 {
  font-family: 'Heebo', sans-serif; font-weight: 700;
  font-size: 1.4rem; color: var(--msl-charcoal);
  margin: 0; line-height: 1.2;
}
.process-step p {
  font-size: .92rem; color: var(--msl-text-2);
  line-height: 1.5; max-width: 220px; margin: 0;
}

/* Dark CTA band — black full-width with massive *5248 + red button */
.cta-band-dark {
  background: var(--msl-ink); color: #fff;
  padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.cta-band-dark .cta-band-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cta-band-dark .cta-phone {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.cta-band-dark .cta-phone:hover { color: var(--msl-red); }
.cta-band-dark .cta-sub {
  display: block;
  font-size: .95rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  margin-top: .75rem;
}

/* Stats band — dark with 4 huge numbers + small diamond marker above each */
.stats-band-dark {
  background: var(--msl-charcoal); color: #fff;
  padding: 4rem 2rem;
}
.stats-band-dark .stats-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem;
}
@media (min-width: 1024px) {
  .stats-band-dark .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-cell {
  position: relative;
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-cell:last-child { border-right: none; }
.stat-cell .stat-marker {
  width: 10px; height: 10px;
  background: var(--msl-red);
  transform: rotate(45deg);
  margin: 0 auto 1rem;
}
.stat-cell:nth-child(2) .stat-marker { background: var(--msl-yellow); }
.stat-cell:nth-child(3) .stat-marker { background: var(--msl-green); }
.stat-cell:nth-child(4) .stat-marker { background: var(--msl-red); }
.stat-cell .stat-num {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1; letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: .8rem;
}
.stat-cell .stat-label {
  font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Contact-item list — diamond bullet + name + arrow */
.contact-item {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--msl-hairline);
  color: var(--msl-charcoal);
  text-decoration: none;
  transition: color .25s;
}
.contact-item:hover { color: var(--msl-red); }
.contact-item .ci-name {
  font-size: 1.15rem; font-weight: 600; flex: 1;
}
.contact-item .ci-diamond {
  width: 12px; height: 12px;
  background: var(--msl-red); transform: rotate(45deg);
  flex-shrink: 0;
}
.contact-item.ci-y .ci-diamond { background: var(--msl-yellow); }
.contact-item.ci-g .ci-diamond { background: var(--msl-green); }

/* Diagonal split — used in contact layout */
.diagonal-split {
  position: relative;
}
.diagonal-split::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 49.5%, var(--msl-hairline) 49.5%, var(--msl-hairline) 50.5%, transparent 50.5%);
  pointer-events: none;
}

/* Highlight underline (like "סיפור" word) */
.word-highlight {
  position: relative;
  display: inline-block;
  color: var(--msl-red);
}
.word-highlight::after {
  content: '';
  position: absolute;
  bottom: 0.05em; left: 0; right: 0;
  height: 6px;
  background: var(--msl-red);
  opacity: 0.25;
  z-index: -1;
}

/* ============================================================
   HERO LOADER — diamond pulse animation
   ============================================================ */
.hero-loader-diamonds {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin-bottom: 2.5rem;
}
.hero-loader-diamonds .diamond {
  width: 14px; height: 14px;
  animation: loader-pulse 1.5s ease-in-out infinite;
  opacity: 0.25;
}
.hero-loader-diamonds .diamond:nth-child(1) { animation-delay: 0s; }
.hero-loader-diamonds .diamond:nth-child(2) { animation-delay: 0.2s; }
.hero-loader-diamonds .diamond:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-pulse {
  0%, 100% { opacity: 0.25; transform: rotate(45deg) scale(0.85); }
  40%      { opacity: 1;    transform: rotate(45deg) scale(1.15); }
}
.hero-loader-brand {
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 900; letter-spacing: -0.04em;
  color: #fff; margin-bottom: 1.8rem;
  font-family: 'Heebo', sans-serif;
  display: flex; gap: 2px;
}
.hero-loader-brand span {
  display: inline-block;
  opacity: 0;
  animation: loader-letter 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-loader-brand span:nth-child(1) { animation-delay: 0.1s; }
.hero-loader-brand span:nth-child(2) { animation-delay: 0.25s; }
.hero-loader-brand span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-letter {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-loader-bar {
  width: 220px; height: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.hero-loader-bar > div {
  height: 100%;
  background: var(--msl-red);
  width: 0;
  transition: width .25s linear;
}
.hero-loader-pct {
  margin-top: 1.1rem;
  font-size: .68rem; color: rgba(255,255,255,0.45);
  letter-spacing: 0.32em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-family: 'Heebo', sans-serif;
}

/* ============================================================
   HERO SKIP BUTTON — "skip the video"
   ============================================================ */
.hero-skip-btn {
  position: absolute;
  bottom: 26px;
  right: 26px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 9999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
  animation: hero-skip-float 2.6s ease-in-out infinite;
}
.hero-skip-btn:hover {
  background: #fff;
  color: var(--msl-charcoal);
  border-color: #fff;
  animation: none;
  transform: translateY(-2px);
}
@keyframes hero-skip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-skip-btn { animation: none; }
}
@media (max-width: 640px) {
  .hero-skip-btn { bottom: 18px; right: 18px; width: 44px; height: 44px; }
  .hero-skip-btn svg { width: 18px; height: 18px; }
}

/* ============================================================
   WHATSAPP BUTTON — pulse for attention
   ============================================================ */
.msl-wa-btn {
  animation: msl-wa-pulse 2.6s ease-out infinite;
}
.msl-wa-btn:hover { animation: none; }
@keyframes msl-wa-pulse {
  0% { box-shadow: 0 8px 28px -6px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 8px 28px -6px rgba(37,211,102,0.55), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 28px -6px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .msl-wa-btn { animation: none; }
}

/* ============================================================
   MOBILE MENU ANIMATION
   ============================================================ */
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-menu-enter { animation: slideDown .25s ease-out; }

/* ============================================================
   COMPATIBILITY: legacy gradients & big BG washes
   ============================================================ */
[class*="from-emerald"], [class*="to-emerald"], [class*="via-emerald"] {
  --tw-gradient-from: var(--msl-paper) !important;
  --tw-gradient-to: var(--msl-paper-2) !important;
  --tw-gradient-via: var(--msl-paper) !important;
}