/**
 * Isolate LP SPA homepage from Lagom theme-rtl.
 * Lagom Bootstrap utilities (.bg-primary, h1–h6 color) clash with Tailwind/shadcn.
 */

/* —— page surface —— */
body.mws-hv2-skin.mws-lp-home,
body.page-home-v2.mws-lp-home,
html body.mws-lp-home.mws-hv2-skin .main-body,
body.mws-lp-home.mws-hv2-skin .main-body,
body.page-home-v2.mws-lp-home .main-body,
html body.page-home-v2.mws-lp-home div.main-body {
  background: #fcfaf8 !important;
  background-color: #fcfaf8 !important;
}

body.mws-lp-home #root {
  min-height: 40vh;
  font-family: "Noto Sans Hebrew", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* LP design tokens (from lp-booster index-CxaHPXlq.css :root) */
  --background: 38 44% 98%;
  --foreground: 213 38% 16%;
  --card: 0 0% 100%;
  --card-foreground: 213 38% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 38% 16%;
  --primary: 210 44% 30%;
  --primary-foreground: 38 44% 98%;
  --brand-deep: 212 46% 22%;
  --brand-soft: 205 38% 46%;
  --brand-sand: 34 46% 92%;
  --secondary: 34 44% 94%;
  --secondary-foreground: 213 38% 18%;
  --muted: 36 30% 95%;
  --muted-foreground: 214 14% 42%;
  --accent: 22 82% 54%;
  --accent-foreground: 0 0% 100%;
  /* Brighter status green (hero/trust dots) — was muted 152 44% 38% */
  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 34 24% 88%;
  --input: 34 24% 88%;
  --ring: 210 44% 30%;
  --gradient-hero: linear-gradient(160deg, hsl(212 46% 22%), hsl(206 40% 36%));
  --gradient-warm: linear-gradient(135deg, hsl(38 44% 98%), hsl(34 46% 93%));
}

/* Hide SPA chrome — live header/footer used instead */
body.mws-lp-home #root header,
body.mws-lp-home #root [role="banner"],
body.mws-lp-home #root footer {
  display: none !important;
}

/*
 * Lagom: .bg-primary { background: var(--brand-primary) } → #1062fe
 * Tailwind: .bg-primary { background-color: hsl(var(--primary)) } → slate #2b4d6e
 * Same specificity; force LP.
 */
body.mws-lp-home #root .bg-primary {
  background-color: hsl(var(--primary)) !important;
}
body.mws-lp-home #root .bg-primary\/90,
body.mws-lp-home #root .hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9) !important;
}
body.mws-lp-home #root .bg-secondary {
  background-color: hsl(var(--secondary)) !important;
}
body.mws-lp-home #root .bg-accent {
  background-color: hsl(var(--accent)) !important;
}
body.mws-lp-home #root .bg-card {
  background-color: hsl(var(--card)) !important;
}
body.mws-lp-home #root .bg-muted {
  background-color: hsl(var(--muted)) !important;
}
body.mws-lp-home #root .bg-destructive {
  background-color: hsl(var(--destructive)) !important;
}
/* Lagom .bg-success → pale mint #dff6e5; LP needs solid green for checks + מומלץ */
body.mws-lp-home #root .bg-success {
  background-color: hsl(var(--success)) !important;
}
/* Hero / trust status dots — punchier green */
body.mws-lp-home #root span.h-2.w-2.rounded-full.bg-success,
body.mws-lp-home #root span.w-2.h-2.bg-success.rounded-full {
  background-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
body.mws-lp-home #root .bg-background {
  background-color: hsl(var(--background)) !important;
}

body.mws-lp-home #root .text-primary {
  color: hsl(var(--primary)) !important;
}
body.mws-lp-home #root .text-primary-foreground {
  color: hsl(var(--primary-foreground)) !important;
}
body.mws-lp-home #root .text-secondary-foreground {
  color: hsl(var(--secondary-foreground)) !important;
}
body.mws-lp-home #root .text-accent {
  color: hsl(var(--accent)) !important;
}
body.mws-lp-home #root .text-accent-foreground {
  color: hsl(var(--accent-foreground)) !important;
}
body.mws-lp-home #root .text-foreground {
  color: hsl(var(--foreground)) !important;
}
body.mws-lp-home #root .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}
body.mws-lp-home #root .text-card-foreground {
  color: hsl(var(--card-foreground)) !important;
}
body.mws-lp-home #root .text-success {
  color: hsl(var(--success)) !important;
}
body.mws-lp-home #root .text-brand-soft {
  color: hsl(var(--brand-soft)) !important;
}
body.mws-lp-home #root .text-brand-deep {
  color: hsl(var(--brand-deep)) !important;
}

body.mws-lp-home #root .border-primary {
  border-color: hsl(var(--primary)) !important;
}
body.mws-lp-home #root .border-border {
  border-color: hsl(var(--border)) !important;
}

/*
 * Lagom: h1–h6 { color / line-height / font-weight vars }
 * Breaks cream titles + crushes leading-[1.15] (md:text-6xl sets lh:1).
 */
body.mws-lp-home #root,
body.mws-lp-home #root :is(h1, h2, h3, h4, h5, h6, p, span, a, button, li, input, textarea, select) {
  font-family: "Noto Sans Hebrew", sans-serif !important;
}
body.mws-lp-home #root :is(h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Tailwind leading utilities must beat md:text-* line-height:1 */
body.mws-lp-home #root .leading-\[1\.15\] {
  line-height: 1.15 !important;
}
body.mws-lp-home #root .leading-relaxed {
  line-height: 1.625 !important;
}
body.mws-lp-home #root .leading-tight {
  line-height: 1.25 !important;
}
body.mws-lp-home #root .leading-none {
  line-height: 1 !important;
}
body.mws-lp-home #root .leading-snug {
  line-height: 1.375 !important;
}
body.mws-lp-home #root .font-bold {
  font-weight: 700 !important;
}
body.mws-lp-home #root .font-semibold {
  font-weight: 600 !important;
}
body.mws-lp-home #root .font-extrabold {
  font-weight: 800 !important;
}
body.mws-lp-home #root .font-medium {
  font-weight: 500 !important;
}

/*
 * Lagom Bootstrap: .text-center/.text-right { text-align: … !important }
 * Locks Tailwind responsive lg:text-right — hero stays wrongly centered.
 */
body.mws-lp-home #root .text-center {
  text-align: center !important;
}
body.mws-lp-home #root .text-right {
  text-align: right !important;
}
body.mws-lp-home #root .text-left {
  text-align: left !important;
}
@media (min-width: 640px) {
  body.mws-lp-home #root .sm\:text-right { text-align: right !important; }
  body.mws-lp-home #root .sm\:text-left { text-align: left !important; }
  body.mws-lp-home #root .sm\:text-center { text-align: center !important; }
}
@media (min-width: 768px) {
  body.mws-lp-home #root .md\:text-right { text-align: right !important; }
  body.mws-lp-home #root .md\:text-left { text-align: left !important; }
  body.mws-lp-home #root .md\:text-center { text-align: center !important; }
}
@media (min-width: 1024px) {
  body.mws-lp-home #root .lg\:text-right { text-align: right !important; }
  body.mws-lp-home #root .lg\:text-left { text-align: left !important; }
  body.mws-lp-home #root .lg\:text-center { text-align: center !important; }
  body.mws-lp-home #root .lg\:justify-start { justify-content: flex-start !important; }
  body.mws-lp-home #root .lg\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Light section titles → ink */
body.mws-lp-home #root .text-foreground {
  color: hsl(var(--foreground)) !important;
}

/* Dark hero sections → cream headings + orange accent span */
body.mws-lp-home #root section.text-primary-foreground :is(h1, h2, h3, h4) {
  color: hsl(var(--primary-foreground)) !important;
}
body.mws-lp-home #root section.text-primary-foreground .text-accent {
  color: hsl(var(--accent)) !important;
}

/*
 * Pricing card headers: .bg-primary.text-primary-foreground
 * Must beat section light-title rules — keep LAST + high specificity.
 */
body.mws-lp-home #root .bg-primary.text-primary-foreground,
body.mws-lp-home #root .bg-primary.text-primary-foreground :is(h1, h2, h3, h4, h5, h6, p, span) {
  color: hsl(var(--primary-foreground)) !important;
}
body.mws-lp-home #root [class*="bg-primary"][class*="text-primary-foreground"] :is(h1, h2, h3, h4) {
  color: hsl(var(--primary-foreground)) !important;
}

/* Lagom links */
body.mws-lp-home #root a {
  color: inherit;
  text-decoration: inherit;
}
body.mws-lp-home #root a:hover {
  color: inherit;
}

body.mws-lp-home #root button,
body.mws-lp-home #root [type="button"],
body.mws-lp-home #root [type="submit"] {
  font-family: inherit;
  line-height: inherit;
}

/* Lagom .container vs Tailwind */
body.mws-lp-home #root .container {
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

body.mws-lp-home .mws-hv2 .mws-hdr-inner {
  max-width: 1400px;
  padding-left: 1rem;
  padding-right: 1rem;
}

body.mws-lp-home #root ul {
  list-style: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  /* keep margin-bottom — Tailwind mb-* (pricing CTAs need mb-8) */
  padding: 0;
}
body.mws-lp-home #root li {
  margin-bottom: 0;
}

/* Restore Tailwind spacing Lagom / ul reset would crush */
body.mws-lp-home #root .mb-8 {
  margin-bottom: 2rem !important;
}
body.mws-lp-home #root .mb-6 {
  margin-bottom: 1.5rem !important;
}
body.mws-lp-home #root .mb-4 {
  margin-bottom: 1rem !important;
}
body.mws-lp-home #root #pricing .p-6 > button,
body.mws-lp-home #root #pricing .p-6 > a {
  margin-top: 0.5rem;
}
body.mws-lp-home #root img {
  max-width: 100%;
  height: auto;
}

/*
 * SPA index-CxaHPXlq.css: * { font-family: Noto !important }
 * Overrides Font Awesome → empty/tofu icons in live footer.
 */
body.mws-lp-home .fas,
body.mws-lp-home .fa-solid,
body.mws-lp-home .far,
body.mws-lp-home .fa-regular,
body.mws-lp-home .fal,
body.mws-lp-home .fa-light {
  font-family: "Font Awesome 6 Pro" !important;
  font-style: normal !important;
}
body.mws-lp-home .fas,
body.mws-lp-home .fa-solid {
  font-weight: 900 !important;
}
body.mws-lp-home .far,
body.mws-lp-home .fa-regular {
  font-weight: 400 !important;
}
body.mws-lp-home .fal,
body.mws-lp-home .fa-light {
  font-weight: 300 !important;
}
body.mws-lp-home .fab,
body.mws-lp-home .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Testimonials: fixed card height (no jump) + room for autoplay */
body.mws-lp-home #root #testimonials .max-w-4xl > .rounded-lg {
  min-height: 650px;
}
body.mws-lp-home #root #testimonials .p-8.md\:p-12,
body.mws-lp-home #root #testimonials .p-8 {
  min-height: 650px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.mws-lp-home #root #testimonials blockquote {
  min-height: 16.5rem;
  max-height: 16.5rem;
  overflow-y: auto;
  margin-bottom: 2rem !important;
  scrollbar-width: thin;
}
body.mws-lp-home #root #testimonials .flex.items-center.justify-between {
  margin-top: auto;
}
@media (max-width: 767px) {
  body.mws-lp-home #root #testimonials .max-w-4xl > .rounded-lg,
  body.mws-lp-home #root #testimonials .p-8 {
    min-height: 560px;
  }
  body.mws-lp-home #root #testimonials blockquote {
    min-height: 9.5rem;
    max-height: 9.5rem;
  }
}

/*
 * Pricing "popular" pill — same bg-primary as card header → swallowed.
 * Accent orange + room above grid + z-index above scaled neighbors.
 */
body.mws-lp-home #root #pricing .grid {
  overflow: visible;
  padding-top: 1.5rem;
}
body.mws-lp-home #root #pricing .scale-105 {
  z-index: 2;
  overflow: visible !important;
}
body.mws-lp-home #root #pricing .absolute.-top-4,
body.mws-lp-home #root #pricing [class*="-top-4"].absolute {
  z-index: 10;
}
body.mws-lp-home #root #pricing .absolute.-top-4 > .bg-primary,
body.mws-lp-home #root #pricing [class*="-top-4"] > .bg-primary.text-primary-foreground {
  background-color: hsl(var(--accent)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(234, 112, 42, 0.35);
}

/* Services cards: pin CTAs to same baseline across the grid row */
body.mws-lp-home #root #services .grid > * {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
body.mws-lp-home #root #services .grid > * > .p-6.pt-0,
body.mws-lp-home #root #services .grid > * > div:last-child {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.mws-lp-home #root #services .grid > * > div:last-child > button,
body.mws-lp-home #root #services .grid > * > div:last-child > a {
  margin-top: auto;
}

/* Hero float-card icon — green like classic .mws-float-icon (not orange accent) */
body.mws-lp-home #root section.text-primary-foreground .absolute.-bottom-6 span.flex.h-10.w-10,
body.mws-lp-home #root section.text-primary-foreground [class*="-bottom-6"] span.flex.h-10.w-10 {
  background: linear-gradient(135deg, #34d399, #8fe3b0) !important;
  color: #fff !important;
}
body.mws-lp-home #root section.text-primary-foreground [class*="-bottom-6"] span.flex.h-10.w-10 svg {
  stroke: #fff !important;
  color: #fff !important;
}

/* Hero mockup float — same as EN classic .mws-browser / mwsFloat */
@keyframes mwsLpHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
body.mws-lp-home #root section.text-primary-foreground *:has(> img[src*="wordpress3_optimized"]) {
  animation: mwsLpHeroFloat 7s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.mws-lp-home #root section.text-primary-foreground *:has(> img[src*="wordpress3_optimized"]) {
    animation: none;
  }
}

/* EN overlay — LTR body inside SPA root */
body.mws-lp-home.mws-lp-en #root {
  direction: ltr;
  text-align: left;
  font-family: Inter, "Noto Sans Hebrew", system-ui, sans-serif !important;
}
body.mws-lp-home.mws-lp-en #root .text-right,
body.mws-lp-home.mws-lp-en #root .sm\:text-right,
body.mws-lp-home.mws-lp-en #root .md\:text-right,
body.mws-lp-home.mws-lp-en #root .lg\:text-right {
  text-align: left !important;
}
body.mws-lp-home.mws-lp-en #root .text-left,
body.mws-lp-home.mws-lp-en #root .sm\:text-left,
body.mws-lp-home.mws-lp-en #root .md\:text-left,
body.mws-lp-home.mws-lp-en #root .lg\:text-left {
  text-align: left !important;
}
@media (min-width: 1024px) {
  body.mws-lp-home.mws-lp-en #root .lg\:justify-start {
    justify-content: flex-start !important;
  }
}

/* Tech logos marquee — LTR clip window (RTL was showing the END / empty gap) */
@keyframes mwsLpLogoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
body.mws-lp-home #root .relative.overflow-hidden:has(.animate-scroll) {
  direction: ltr !important;
  text-align: left;
  overflow: hidden;
}
body.mws-lp-home #root .animate-scroll {
  direction: ltr !important;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0 !important;
  column-gap: 0 !important;
  width: max-content;
  max-width: none;
  margin-inline: 0 !important;
  /* separate props so JS can set animationDuration */
  animation-name: mwsLpLogoScroll !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-duration: 170s;
  will-change: transform;
}
body.mws-lp-home #root .animate-scroll:hover {
  animation-play-state: paused !important;
}
body.mws-lp-home #root .animate-scroll .mws-marquee-group {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: stretch;
  gap: 0;
}
body.mws-lp-home #root .animate-scroll .mws-marquee-group > *,
body.mws-lp-home #root .animate-scroll > div:not(.mws-marquee-group) {
  margin-left: 0 !important;
  margin-right: 2.5rem !important;
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 80px;
  box-sizing: border-box;
}
body.mws-lp-home #root .animate-scroll img {
  max-width: 160px !important;
  max-height: 48px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}
body.mws-lp-home #root .animate-scroll img:hover,
body.mws-lp-home #root .animate-scroll > * :hover,
body.mws-lp-home #root .animate-scroll .mws-marquee-group > *:hover {
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Plan region toggles (VPS IL/EU, hosting WP/AI) */
body.mws-lp-home #root .mws-vps-region,
body.mws-lp-home #root .mws-host-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: hsl(40 33% 96%);
  border: 1px solid hsl(30 20% 88%);
}
body.mws-lp-home #root .mws-host-region-wrap {
  text-align: center;
}
body.mws-lp-home #root .mws-vps-region button,
body.mws-lp-home #root .mws-host-region button {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: hsl(210 30% 30%);
  background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.mws-lp-home #root .mws-vps-region button[aria-pressed="true"],
body.mws-lp-home #root .mws-host-region button[aria-pressed="true"] {
  background: hsl(12 78% 48%);
  color: #fff;
  box-shadow: 0 6px 16px hsl(12 78% 48% / 0.28);
}
body.mws-lp-home #root .mws-vps-region button:hover:not([aria-pressed="true"]),
body.mws-lp-home #root .mws-host-region button:hover:not([aria-pressed="true"]) {
  background: hsl(40 40% 92%);
}
body.mws-lp-home.mws-lp-en #root .mws-vps-region,
body.mws-lp-home.mws-lp-en #root .mws-host-region {
  direction: ltr;
}