@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700&display=swap');
@import url('/pro/pro-attribution.css');

/* Shared quality layer for the bespoke, done-for-you marketing examples only. */
html,
body {
  max-width: 100%;
  overflow-x: clip !important;
}

html[lang='he'] body,
body[lang='he'],
html[lang='he'] body * ,
body[lang='he'] * {
  font-family: 'Assistant', system-ui, sans-serif !important;
}

html[lang='ar'] body,
body[lang='ar'],
html[lang='ar'] body *,
body[lang='ar'] * {
  font-family: 'Tajawal', system-ui, sans-serif !important;
}

html[lang='en'] body,
body[lang='en'],
html[lang='en'] body *,
body[lang='en'] * {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

body,
body * {
  font-weight: 400 !important;
}

h1,
h2,
h3,
h4,
strong,
b,
.brand-title,
.price,
.num,
.big-number,
.fee {
  font-weight: 700 !important;
}

.btn,
button,
nav a,
.kicker,
.eyebrow,
.badge,
.tag,
.pill,
.proof,
.lang-btn,
.language-btn {
  font-weight: 600 !important;
}

body {
  line-height: 1.7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Keep frequently reused secondary copy comfortably above AA on light surfaces. */
body[data-dfy-example='dental-clinic'] {
  --muted: #53697b;
}

body[data-dfy-example='wellness-clinic'] {
  --muted: #52614f;
}

body[data-dfy-example='beauty-salon'] {
  --muted: #725664;
  --soft: #604750;
}

body[data-dfy-example='jewelry-store'] {
  --muted: #655b4d;
}

body[data-dfy-example='real-estate-agency'] {
  --muted: #56657a;
}

h1,
.hero h1 {
  max-width: 18ch;
  margin-inline: 0;
  font-size: clamp(42px, 4.25vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1.09 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body[data-dfy-example='tattoo-piercing'] h1,
body[data-dfy-example='fitness-studio'] h1,
body[data-dfy-example='jewelry-store'] h1,
body[data-dfy-example='law-firm'] h1 {
  font-size: clamp(44px, 4.5vw, 56px) !important;
}

html[lang='ar'] h1,
body[lang='ar'] h1 {
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

section h2,
.section-head h2,
.contact h2,
.consult h2 {
  font-size: clamp(30px, 3.3vw, 44px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.018em !important;
  text-wrap: balance;
}

html[lang='ar'] section h2,
body[lang='ar'] section h2 {
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

h3,
article h3,
.card h3 {
  line-height: 1.32 !important;
  text-wrap: balance;
}

p,
li,
.hero-text,
.lead,
.section-head p {
  line-height: 1.72 !important;
}

.btn,
button[class*='btn'],
a[class*='btn'] {
  min-height: 46px;
  padding-block: 12px !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.25 !important;
}

.brand,
.brand > div,
.brand-title {
  min-width: 0;
}

.hero-grid > *,
.hero-layout > *,
.hero-copy {
  min-width: 0;
}

.eyebrow {
  width: fit-content !important;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.brand-title {
  max-width: 100%;
  line-height: 1.22 !important;
  overflow-wrap: anywhere;
}

.lang-btn,
.language-btn {
  min-height: 36px;
  padding: 6px 12px !important;
}

.cap,
.caption,
.gallery-caption,
.hero-caption,
.stack-label,
.image-label {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

.hero-caption,
.hero-card,
.coach-note,
.class-ticket,
.builder-float {
  text-shadow: none;
}

.contact p,
.split-dark p,
.floating-menu .menu-preview-grid > :first-child > p,
.consult p,
footer p,
footer .disclaimer,
.contact .muted {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .86) !important;
}

.btn-whatsapp,
.whatsapp-order,
.wa {
  background: #08783f !important;
  color: #fff !important;
}

body[data-dfy-example='beauty-salon'] .kicker {
  color: #9a3457 !important;
}

body[data-dfy-example='jewelry-store'] .badge {
  color: #6b5418 !important;
  border-color: rgba(107, 84, 24, .36) !important;
}

footer,
footer a,
footer span,
footer small {
  color: rgba(255, 255, 255, .82);
}

.dfy-sticky-action {
  transition: opacity .2s ease, transform .2s ease;
}

@media (max-width: 760px) {
  .top > .shell,
  .topbar > .shell {
    display: flex !important;
    min-height: 52px !important;
    padding: 7px 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top > .shell > :not(.langs),
  .topbar > .shell > :not(.langs) {
    display: none !important;
  }

  .top .langs,
  .topbar .langs {
    display: flex !important;
    width: auto !important;
    gap: 7px !important;
    justify-content: center !important;
  }

  nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100% - 28px, 1180px) !important;
    min-height: 70px !important;
    padding: 10px 0 !important;
    gap: 9px !important;
    align-items: center !important;
  }

  nav .brand {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
  }

  nav .brand-title {
    display: -webkit-box;
    max-width: min(74vw, 270px) !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis;
  }

  nav .brand-sub {
    display: none !important;
  }

  nav .nav-actions {
    display: none !important;
  }

  nav .nav-links {
    grid-column: 1 / -1;
    max-width: 100%;
    margin: 0;
    padding: 2px 12px 5px !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  nav .nav-links::-webkit-scrollbar {
    display: none;
  }

  nav .nav-links a {
    flex: 0 0 auto;
    padding: 8px 11px !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .hero {
    padding-top: 26px !important;
  }

  .hero-grid > :first-child,
  .hero-layout > .hero-copy,
  .hero-copy {
    order: 1 !important;
  }

  .hero-grid > :nth-child(2),
  .hero-image,
  .hero-visual,
  .hero-showcase,
  .hero-media,
  .hero-photo,
  .hero-art {
    order: 2 !important;
  }

  .hero-layout > .editorial {
    order: 2 !important;
  }

  h1,
  .hero h1 {
    max-width: 100%;
    font-size: clamp(28px, 8.15vw, 31px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.018em !important;
  }

  body[data-dfy-example='tattoo-piercing'] h1,
  body[data-dfy-example='fitness-studio'] h1,
  body[data-dfy-example='jewelry-store'] h1,
  body[data-dfy-example='law-firm'] h1 {
    font-size: clamp(30px, 9vw, 35px) !important;
  }

  html[lang='ar'] h1,
  body[lang='ar'] h1 {
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
  }

  section h2,
  .section-head h2,
  .contact h2,
  .consult h2 {
    font-size: clamp(27px, 7.6vw, 32px) !important;
  }

  .hero-text,
  .lead {
    font-size: 16px !important;
    line-height: 1.68 !important;
  }

  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn,
  .hero-actions button {
    width: 100%;
    max-width: 330px;
  }

  .dfy-sticky-action {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .dfy-sticky-action.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 761px) {
  .brand-title {
    max-width: 28ch;
  }
}