/* What the site needs on top of its own stylesheet (app.css, kept exactly as it was built) to work with Centrix. */

/* The field only robots fill in. */
.cx-hp { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap; opacity: 0; pointer-events: none; }

/* The line above the form after it was sent, or when it could not be sent. */
.um-note { margin-bottom: 1.25rem; border-radius: .75rem; border: 1px solid; padding: .8rem 1rem; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.um-note--ok { color: var(--color-green, #059669); border-color: color-mix(in srgb, var(--color-green, #059669) 35%, transparent); background: color-mix(in srgb, var(--color-green, #059669) 9%, transparent); }
.um-note--error { color: #b42318; border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .06); }


/* The check mark of a service point keeps its gap on right-to-left pages too (the site's own rule puts it on the right). */
.solution-card li:before { margin-right: 0; margin-inline-end: .55rem; }

/* ── Services on a phone: a list that opens ──
   The site shows its services as cards to swipe sideways. On a phone one card fills the screen and nothing says there
   are eight more, so here every service is one row, and a tap opens it. theme.js sets it up (it adds "um-acc" and
   puts each name inside a button); without the script the sideways swipe stays as it was. */
@media (width <= 899px) {
  .services-horizontal.um-acc .services-horizontal__viewport { height: auto; overflow: visible; scroll-snap-type: none; }
  .services-horizontal.um-acc .services-horizontal__track { display: grid; gap: 10px; width: auto; padding-inline: 1.5rem; }
  .services-horizontal.um-acc .services-horizontal__progress { display: none; }

  .services-horizontal.um-acc .service-slide,
  .services-horizontal.um-acc .service-slide.is-active {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center;
    width: auto; min-height: 0; padding: .7rem 1rem; border-radius: 1rem;
    opacity: 1; filter: none; transform: none; border-color: #e2e2ef; box-shadow: 0 4px 16px #0f0f1a0a;
  }
  .services-horizontal.um-acc .service-slide.is-open { padding-bottom: 1.3rem; border-color: #7c3aed6b; box-shadow: 0 16px 40px #492d8a24; }
  .services-horizontal.um-acc .service-slide:not(.is-open)::after { display: none; }

  .services-horizontal.um-acc .solution-icon { width: 40px; height: 40px; margin-bottom: 0; border-radius: .8rem; font-size: 1.1rem; cursor: pointer; }
  .services-horizontal.um-acc .service-slide h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
  .um-acc__btn {
    all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; min-height: 44px; cursor: pointer; text-align: start; -webkit-tap-highlight-color: transparent;
  }
  .um-acc__btn::after {
    content: ""; flex: none; width: .5rem; height: .5rem; margin-inline: .2rem;
    border-right: 2px solid #7c3aed; border-bottom: 2px solid #7c3aed; transform: translateY(-2px) rotate(45deg); transition: transform .25s;
  }
  .service-slide.is-open .um-acc__btn::after { transform: translateY(2px) rotate(-135deg); }
  .um-acc__btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 4px; border-radius: .5rem; }

  .services-horizontal.um-acc .service-slide > :is(p, ul, a) { grid-column: 1 / -1; }
  .services-horizontal.um-acc .service-slide:not(.is-open) > :is(p, ul, a) { display: none; }
  .services-horizontal.um-acc .service-slide > p { margin-top: .9rem; font-size: .95rem; }
  .services-horizontal.um-acc .service-slide > ul { margin-top: .9rem; }
  .services-horizontal.um-acc .service-slide > a { justify-self: start; margin-top: 0; padding-top: 1.1rem; }
}
@media (width <= 899px) and (prefers-reduced-motion: no-preference) {
  .services-horizontal.um-acc .service-slide.is-open > :is(p, ul, a) { animation: um-acc-in .28s ease both; }
}
@keyframes um-acc-in { from { opacity: 0; transform: translateY(-6px); } }

/* ── Services on a computer, right-to-left pages ──
   The service cards move sideways while the page scrolls. On a right-to-left page they are laid out from the right, so
   they have to move to the right. The site's own rule always moves them to the left: in Hebrew they slid off the
   screen after the third card and left an empty area. The line under them fills from the right as well. */
@media (width >= 900px) {
  html[dir="rtl"] .services-horizontal__track { transform: translate3d(calc(var(--services-x) * -1), 0, 0); }
  html[dir="rtl"] .services-horizontal__progress span { transform-origin: 100%; background: linear-gradient(270deg, #7c3aed, #0891b2); }
}

/* ── Price cards on a phone: they gather like a deck ──
   On a wide screen the site's price cards stop under the menu one after another and pile up while the page scrolls. On a
   phone they were a plain column. Here they pile up on a phone too: each card stops near the top, the next one slides
   over it, and the cards underneath shrink a little and go darker. theme.js sets the stopping places ("um-stack").
   Not for visitors who asked their device for less motion, and not when motion effects are off. */
@media (width <= 640px) and (prefers-reduced-motion: no-preference) {
  body:not(.effects-disabled) .pricing-stack.um-stack { display: block; }
  body:not(.effects-disabled) .pricing-stack.um-stack .pricing-card {
    position: sticky !important; top: var(--um-stack-top, 88px) !important; z-index: calc(10 + var(--pricing-stack-index));
    margin: 0 0 22px !important; transform: scale(var(--um-stack-scale, 1)) !important; transform-origin: top center;
    filter: brightness(var(--um-stack-light, 1)); transition: border-color .3s; will-change: transform;
    /* the site's cards are a little see-through; in a pile the words of the card underneath would show through */
    background: linear-gradient(160deg, #153060, #07142d);
  }
  body:not(.effects-disabled) .pricing-stack.um-stack .pricing-card:last-child { margin-bottom: 0 !important; }
}

/* ── The blog ── */
/* an article without a picture: a band of the site's two colours where the picture would be */
.um-cover { background: linear-gradient(135deg, var(--color-purple), var(--color-cyan)); }
.um-back { margin-top: 2rem; font-weight: 600; }
/* the site's own list styles push bullets in from the left; on right-to-left pages they belong on the right */
html[dir="rtl"] .prose-blog :is(ul, ol) { margin: .5rem 1.25rem 1.25rem 0; }

/* ── One article: the text, and beside it a column that stays in view (the contents and a short form) ──
   The column is on the far side of the reading direction: right in English, left in Hebrew. Up to 1199px there
   is one column: the contents open from a row above the text, and the form comes after the article. */
.um-article { display: grid; gap: 2.5rem; max-width: 48rem; }
.um-article__main { min-width: 0; }
.um-article__main > .prose-blog { max-width: 48rem; }
.um-article__side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.um-article__side .glass-card:hover, .um-toc.glass-card:hover { transform: none; border-color: var(--color-line); box-shadow: 0 2px 6px #0f0f1a0d; }
.prose-blog h2[id], #contact.um-side-form { scroll-margin-top: 6.5rem; }

/* the table of contents */
.um-toc { padding: 1rem 1.25rem; }
.um-toc__h, .um-toc summary { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-purple); }
html[dir="rtl"] :is(.um-toc__h, .um-toc summary, .um-near small) { letter-spacing: 0; font-size: .85rem; }
.um-toc summary { cursor: pointer; }
.um-toc ol { list-style: none; margin: .75rem 0 0; padding: 0; border-inline-start: 2px solid var(--color-line); }
.um-toc a { display: block; margin-inline-start: -2px; border-inline-start: 2px solid transparent; padding: .35rem .85rem; font-size: .9rem; line-height: 1.4; color: var(--color-secondary); }
.um-toc a:hover { color: var(--color-primary); }
.um-toc a[aria-current="true"] { border-inline-start-color: var(--color-purple); color: var(--color-purple); font-weight: 600; }
.um-toc--side { display: none; }
.um-toc--top { margin-bottom: 1.75rem; max-width: 48rem; }

/* the short form */
.um-side-form { padding: 1.25rem; }
.um-side-form__h { font: 700 1.15rem/1.3 var(--font-heading); color: var(--color-primary); }
.um-side-form__p { margin: .35rem 0 .9rem; font-size: .85rem; line-height: 1.5; color: var(--color-secondary); }
.um-side-form form { display: grid; gap: .6rem; }
.um-side-form :is(input:not([type="checkbox"]), textarea) { display: block; padding: .55rem .8rem; font-size: .92rem; background: #fff; }
.um-side-form ::placeholder { color: var(--color-muted); opacity: 1; }
.um-side-form textarea { resize: vertical; }
/* a phone number is written left to right in Hebrew too, but the field lines up on the right like the others */
html[dir="rtl"] .um-side-form input[type="tel"] { direction: ltr; text-align: right; }
.um-side-form .um-side-form__agree { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.45; }
.um-side-form__agree input { margin-top: .15rem; flex: none; }
.um-side-form .um-note { margin: .6rem 0 .9rem; padding: .6rem .8rem; font-size: .85rem; }

/* the article before this one and the one after it */
.um-near { display: grid; gap: 1rem; margin-top: 3rem; max-width: 48rem; }
.um-near a { display: block; padding: 1rem 1.25rem; }
.um-near small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-purple); }
.um-near span { display: block; margin-top: .35rem; font-weight: 600; line-height: 1.35; color: var(--color-primary); }
@media (min-width: 640px) {
  .um-near { grid-template-columns: 1fr 1fr; }
  .um-near__next { grid-column: 2; text-align: end; }
}

@media (min-width: 1200px) {
  /* room is left at both edges of the screen for the round contact buttons and the chat button, which float there */
  .um-article { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; max-width: min(72rem, calc(100% - 9rem)); }
  /* the column stays under the menu; on a low screen the contents give way (and scroll) so the form stays whole */
  .um-article__side { position: sticky; top: 6rem; display: flex; flex-direction: column; max-height: calc(100vh - 7rem); }
  .um-toc--top { display: none; }
  .um-toc--side { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 7.5rem; }
  /* when the list is longer than its room it scrolls, and its first and last lines fade instead of being cut */
  .um-toc--side ol { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-block: .4rem; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .6rem, #000 calc(100% - .6rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 .6rem, #000 calc(100% - .6rem), transparent); }
  .um-side-form { flex: none; }
}
/* a wide but very low window: the column would not fit, so it scrolls with the page */
@media (min-width: 1200px) and (max-height: 700px) {
  .um-article__side { position: static; max-height: none; }
  .um-toc--side { min-height: 0; }
}

/* the line at the top of the screen that fills as the article is read (theme.js moves it) */
.um-progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; pointer-events: none; }
.um-progress span { display: block; height: 100%; transform: scaleX(var(--um-read, 0)); transform-origin: left; background: linear-gradient(90deg, var(--color-purple), var(--color-cyan)); }
html[dir="rtl"] .um-progress span { transform-origin: right; background: linear-gradient(270deg, var(--color-purple), var(--color-cyan)); }