/* RTL layer for the Hebrew page, which is the site's main page at `/`.
 *
 * Loaded last, after hero-v3.css, webflow.css and sections.css, and only by
 * that route — the English twin at `/en` never sees it, and every rule here is
 * scoped to [dir="rtl"] besides, which __root.tsx sets for `/` only.
 *
 * The document is already `dir="rtl"` (resolved in __root.tsx from the
 * pathname), but that alone changed nothing: the header, the hero and the `.wf`
 * section scope each declare `direction: ltr` on themselves, which outranks the
 * inherited document direction. Everything else in this file is the handful of
 * physical left/right values those three scopes hard-coded, which direction
 * alone cannot mirror. */

/* ============================================================ direction ===
 * The three LTR islands. Turning these to rtl is what actually mirrors the
 * page: flex and grid order reverse, `text-align` resolves to the right edge,
 * and logical properties flip with them. */
[dir="rtl"] .hh-header,
[dir="rtl"] .hx-hero,
[dir="rtl"] .wf {
  direction: rtl;
}

/* ================================================================= type ===
 * The Hebrew brand face is Discovery Fs, declared and applied in
 * /reframe/fonts.css, which the route loads just before this sheet. Its
 * `html[dir="rtl"] body *` rule already outranks the per-class stacks in the
 * section stylesheets (Poppins / Heebo / Plus Jakarta Sans / Inter) and the
 * two `--_typography---family-*` tokens the `.wf` scope resolves through.
 *
 * The one exception: five export rules name their face on a two-class selector
 * (`.wf .button-primary` and friends), which outranks that blanket rule, so
 * those are the only ones that have to be repointed by hand. */
[dir="rtl"] .wf .button-primary,
[dir="rtl"] .wf .button-pagination,
[dir="rtl"] .wf .sign-up,
[dir="rtl"] .wf .log-in,
[dir="rtl"] .wf .link-primary {
  font-family: "Discovery Fs", "Heebo", "Poppins", sans-serif;
}

/* =================================================================== bidi ===
 * Latin runs (ReFrame, Figma, WordPress, AI) sit inside Hebrew sentences. The
 * bidi algorithm already orders them; isolation stops their neighbouring
 * punctuation from being pulled to the wrong end of the run. */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] .hx-badge-text b,
[dir="rtl"] .flow-step-num {
  unicode-bidi: isolate;
}

/* The counts read left-to-right even in Hebrew copy: "451+", "01". */
[dir="rtl"] .hx-badge-text b,
[dir="rtl"] .flow-step-num {
  direction: ltr;
}

/* ================================================================= header ===
 * The light wordmark is absolutely positioned over the dark one for the
 * cross-fade. Pinned to the logo's inline start so the two stay stacked
 * whichever side the header's logo ends up on. */
[dir="rtl"] .hh-logo-light {
  left: auto;
  inset-inline-start: 0;
}

/* =================================================================== hero ===
 * The marks that float beside the copy are off here: the headline now carries
 * both of them as labels (see .hx-brand below), and the floating pair repeated
 * the same two marks a few inches away. Dropping this rule brings them back —
 * they are still in the markup, and the mirroring they need under RTL is the
 * two lines beneath. */
[dir="rtl"] .hx-deco {
  display: none;
}

/* If they are switched back on, they need this too — the six offsets pinning
   them are hard-coded left/right, mirrored here in one go, with the glyphs
   mirrored back so the marks themselves still read correctly:

   [dir="rtl"] .hx-deco      { transform: scaleX(-1); }
   [dir="rtl"] .hx-deco-mark > svg { transform: scaleX(-1); } */

/* The English hero holds a full viewport height so its product shot starts
   below the fold and has somewhere to rise from. This one has no shot (see the
   note in heHeroV3Html.ts), so that height left a band of dead black under the
   copy — the same reason the base sheet already drops it under 768px. The hero
   ends where its content does.

   The bottom padding is not optional: the section below rides 28px up over the
   hero, and with the shot gone the claims row is the last thing in it. */
[dir="rtl"] .hx-hero {
  height: auto;
  padding-bottom: clamp(104px, 16vh, 200px);
}

/* The English CTA is sized by its label — about 130px wide, which reads as an
   afterthought under a headline this size. Here it is a proper target: a fixed
   width on desktop, capped by the copy column on anything narrower. The base
   sheet already gives it `width: 100%; max-width: 280px` under 768px. */
[dir="rtl"] .hx-cta {
  width: min(340px, 100%);
  padding: 16px 28px;
  font-size: 16px;
  /* Clear of the sub-copy: at 8px the button read as part of the paragraph
     rather than as the thing the paragraph leads to. The phone keeps its own,
     tighter value in the narrow block below. */
  margin-top: 32px;
}

/* The badge's padding is asymmetric — tight on the avatar side, roomy on the
   text side — so it mirrors with the row. Its height is fixed at 40px for the
   English string, which fits on one line; the Hebrew one is longer and wraps
   below 560px, where a fixed height would push the avatars out of the pill. */
[dir="rtl"] .hx-badge {
  padding: 6px 6px 6px 12px;
  height: auto;
  min-height: 40px;
}

/* The badge label is short enough to sit beside the avatars at every width, so
   nothing wraps: the row stays a row and the pill stays one line. Only the type
   steps down on the narrowest phones. */
@media (max-width: 560px) {
  [dir="rtl"] .hx-badge {
    flex-wrap: nowrap;
    padding: 5px 5px 5px 12px;
    gap: 8px;
  }

  [dir="rtl"] .hx-badge-text {
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  [dir="rtl"] .hx-badge-text {
    font-size: 12px;
  }
}

/* The headline is set bold here: Discovery's 700 is the brand's display weight,
   where the English hero's Poppins 500 is its own. Two lines rather than the
   English three — the second line runs as one. */
[dir="rtl"] .hx-title {
  font-weight: 700;
  /* Looser than the English 1.15: the headline's two brand labels stand about
     a full line-box tall, and at 1.15 the Figma one touched the line above. */
  line-height: 1.34;
}

/* Figma and WordPress are set as labels in the headline rather than as plain
   words — the mark plus the name on the same frosted tile the hero's floating
   marks use. Every dimension is in `em`, so one rule covers the headline at
   every size from 56px down to 36px. `white-space: nowrap` keeps a label from
   being split across two lines. */
[dir="rtl"] .hx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  padding: 0.06em 0.34em 0.06em 0.24em;
  margin: 0 0.08em;
  border-radius: 0.32em;
  /* Sits on the Hebrew baseline rather than the Latin one: the names are the
     only Latin on the line and would otherwise ride high against it. */
  vertical-align: -0.16em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.45);
}

[dir="rtl"] .hx-brand-mark {
  display: flex;
  align-items: center;
}

[dir="rtl"] .hx-brand-mark svg {
  height: 0.74em;
  width: auto;
  display: block;
}

/* The WordPress mark is painted with currentColor so its container sets the
   colour, the way the floating tile does. */
[dir="rtl"] .hx-brand--wp {
  color: #fff;
}

[dir="rtl"] .hx-brand-name {
  /* A shade tighter than the Hebrew around it: at headline size the Latin
     names read large beside it. */
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* The three claims under the CTA. A plain row on desktop; the `.wf ul` indent
   rule further down never reaches it (that one is scoped to the section
   wrapper), but the list's own default padding does, so it is zeroed here. */
[dir="rtl"] .hx-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 1;
  /* Arrives with the CTA it sits under, a beat later. */
  animation: hx-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.68s;
}

[dir="rtl"] .hx-point {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.2;
  color: #a1a1aa;
  white-space: nowrap;
}

[dir="rtl"] .hx-point-ic {
  width: 14px;
  height: 14px;
  flex: none;
  color: #ef0385;
}

/* One row at every width. Three items plus their marks need about 320px at
   12px, so the type and the gaps step down rather than the row breaking. */
@media (max-width: 560px) {
  [dir="rtl"] .hx-points {
    flex-wrap: nowrap;
    gap: 12px;
  }

  [dir="rtl"] .hx-point {
    font-size: 12px;
    gap: 4px;
  }

  [dir="rtl"] .hx-point-ic {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 380px) {
  [dir="rtl"] .hx-points {
    gap: 8px;
  }

  [dir="rtl"] .hx-point {
    font-size: 11px;
  }
}

/* Under 768px the base sheet sizes the headline off the English split, whose
   longest line renders 13.6x its font-size, and the whole hero is retuned for
   a phone: the copy is all there is on screen, so it carries the rhythm. */
@media (max-width: 768px) {
  /* The sub-copy's two <span>s go inline at this width (base sheet), so the
     paragraph wraps on its own. Held to the CTA's width so the two read as one
     column instead of a paragraph overhanging the button under it — the button
     itself is untouched (base sheet: width 100%, max-width 280px). Balance
     evens out the lines inside that column. */
  [dir="rtl"] .hx-desc {
    width: 100%;
    max-width: none;
    text-wrap: balance;
  }

  /* Same arithmetic as the base sheet, this headline's own ratio. Three lines
     on a phone is the brief, and the <br>s in the markup set where they fall:
     the label pair, then "בעריכה מלאה ובתוך כמה דקות." That third line is the
     longest, so it is what the size is solved for.
     
     The ratio is measured in the FALLBACK face, not in Discovery: Discovery
     renders it at 12.0x its font-size, Heebo — what shows for the moment before
     the woff2 arrives, and for the whole load on a slow connection — at 12.8x.
     Solving for 12.0 meant the headline was correct once the font landed and
     four lines until then. 13.2 covers the wider metrics with slack, at the
     cost of a couple of points of size. 40px is the hero's 2x16px side padding
     plus 8px of slack; 30px is the ceiling, reached at 436px. */
  [dir="rtl"] .hx-title {
    font-size: min(30px, calc((100vw - 40px) / 13.2));
    line-height: 1.24;
  }

  /* The labels are trimmed to match: at phone size the desktop padding made
     each one a full line-box tall, which is what forced the extra line. */
  [dir="rtl"] .hx-brand {
    gap: 0.18em;
    padding: 0.04em 0.26em 0.04em 0.18em;
    margin: 0 0.05em;
    border-radius: 0.26em;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 6px 16px rgba(0, 0, 0, 0.45);
  }

  [dir="rtl"] .hx-brand-mark svg {
    height: 0.66em;
  }

  [dir="rtl"] .hx-brand-name {
    font-size: 0.88em;
  }

  /* The copy is the whole hero here, so it gets the rhythm rather than the
     empty black under it: tighter gaps above the CTA, and a bottom that clears
     the section riding up over it without holding a screen of nothing. */
  [dir="rtl"] .hx-cta {
    margin-top: 16px;
  }

  [dir="rtl"] .hx-points {
    margin-top: 14px;
  }

  [dir="rtl"] .hx-hero {
    padding-bottom: clamp(56px, 9vh, 96px);
  }

  /* The hero artwork is pinned to the bottom of a section that, at this width,
     is nothing but copy — so its brightest band sits directly behind the
     sub-copy, the button and the claims, and white text on hot pink stops being
     readable. This scrim sits over the artwork (::after paints after ::before)
     and under the copy (which holds z-index 1 and 2), so the glow still reads
     at the edges while the text sits on near-black.

     Deepest across the middle, where the copy is; lighter at the very bottom so
     the section below still comes out of colour rather than out of a flat
     black. */
  [dir="rtl"] .hx-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.68) 38%,
      rgba(0, 0, 0, 0.68) 76%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }

  /* Every call to action on the page takes the hero button's shape at this
     width: same white fill, radius, padding, type size and 280px column. The
     page has three besides the hero — the comparison section's, which carries a
     gradient of its own at desktop size, and the closing CTA, which the Webflow
     export sizes off its label. The header's stays a compact pill: it sits in a
     40px-tall bar beside the logo, where a 280px block cannot go. */
  [dir="rtl"] .wf .cx-cta,
  [dir="rtl"] .wf .button-primary {
    box-sizing: border-box;
    width: 100%;
    max-width: 280px;
    padding: 16px 28px;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #f1f1f1;
    background: #fff;
    background-image: none;
    color: #18181b;
    font-size: 16px;
    line-height: 1;
    box-shadow: none;
  }

  /* The closing CTA is the only one that is not already a flex row, and its
     label and arrow sit in separate blocks. */
  [dir="rtl"] .wf .button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* The avatar row overlaps each face onto the previous one with a negative
   margin-left; in RTL the overlap has to run the other way. */
[dir="rtl"] .hx-avatars .hx-avatar:not(:first-child) {
  margin-left: 0;
  margin-right: -6px;
}

[dir="rtl"] .hx-stack-item:not(:first-child) {
  margin-left: 0;
  margin-right: -12px;
}

/* ================================================================= arrows ===
 * Every CTA arrow points along the reading direction, so each one flips. The
 * WordPress-CTA arrow lives in an overflow-hidden wrapper holding two copies
 * for the hover slide — mirroring the wrapper keeps the glyphs and the slide
 * travelling the same way. */
[dir="rtl"] .hx-cta-icon,
[dir="rtl"] .wf .button-arrow-wrapper {
  transform: scaleX(-1);
}

/* The comparison CTA's arrow is a text character (&#8594;), not an icon. */
[dir="rtl"] .wf .cx-cta span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}

/* ================================================== left-aligned sections ===
 * `text-align: left` is physical: under RTL it still pins text to the left
 * edge of a right-aligned block. These are the blocks the page uses that the
 * export deliberately left-aligned — they become right-aligned, which is the
 * same intent mirrored. */
[dir="rtl"] .wf .section-heading.is-left-aligned,
[dir="rtl"] .wf .section-heading-wrapper.is-faq,
[dir="rtl"] .wf .section-subheading-wrapper.is-faq,
[dir="rtl"] .wf .feature-text-wrapper.is-left-aligned,
[dir="rtl"] .wf .testimonial-person-wrapper,
[dir="rtl"] .wf .testimonial-person-name,
[dir="rtl"] .wf .icon-item-text-wrapper {
  text-align: right;
}

/* ================================================================== lists ===
 * The export indents every list from the left. */
[dir="rtl"] .wf ul,
[dir="rtl"] .wf ol {
  padding-left: 0;
  padding-right: 40px;
}

/* The comparison lists carry their own marks and need no indent on either
   side; the rule above would otherwise push them off their column. */
[dir="rtl"] .wf .cx-list {
  padding-right: 0;
}

/* ============================================================= comparison ===
 * The "without / with" split. RTL reverses the two columns, so "without"
 * now sits on the right and the seam between them moves to its other edge. */
[dir="rtl"] .wf .cx-col--before {
  border-right: 0;
  border-left: 1px solid var(--cx-line);
}

/* Stacked under the mobile breakpoint: the seam runs across, not down, so the
   vertical border is off again and the horizontal one from the base sheet
   stands. */
@media (max-width: 860px) {
  [dir="rtl"] .wf .cx-col--before {
    border-left: 0;
  }
}

/* ==================================================================== FAQ ===
 * An open answer is indented clear of the question's plus/minus icon, which
 * RTL moves to the other side. */
[dir="rtl"] .wf .faq-question.open + .faq-answer > * {
  padding-right: 0;
  padding-left: 3rem;
}

/* =============================================================== marquee ===
 * The client logo strip is two identical runs animated by one run's width.
 * Travelling right is the natural direction alongside Hebrew, and because the
 * runs are identical the loop stays seamless either way. */
@keyframes sc-logos-rtl {
  to {
    transform: translateX(50%);
  }
}

[dir="rtl"] .wf .logos-line {
  animation-name: sc-logos-rtl;
}