/* 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)); }

/* On phones the contact buttons sit in a strip that scrolls sideways, and the strip cut each button's shadow at its
   edges into a grey box behind them (in the original site too). There the shadow is drawn around the buttons
   instead, outside the strip. The glass, dock and minimal looks keep their own shadows. */
@media (width <= 640px) {
    .floating-contact:not(.floating-contact--dock):not(.floating-contact--glass):not(.floating-contact--minimal) a,
    .floating-contact:not(.floating-contact--dock):not(.floating-contact--glass):not(.floating-contact--minimal) a:is(:hover, :focus-visible) { box-shadow: none; }
    .floating-contact:not(.floating-contact--dock):not(.floating-contact--glass):not(.floating-contact--minimal) { filter: drop-shadow(0 6px 10px rgba(15, 15, 26, .28)); }
}

/* "The phone follows the page on phones" (scroll-experience.js, followOnPhone): once the hero has gone, a small phone
   in the bottom corner the chat button is not in (data-mini-side), above the contact buttons. */
.agent-dock.is-mini {
    --mini-w: 92px;
    --mini-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px);
    position: fixed;
    left: 10px;
    bottom: var(--mini-bottom);
    width: auto;
    min-height: 0;
    display: block;
    z-index: 44;
    animation: um-mini-in .35s ease-out;
}
.agent-dock.is-mini .agent-three { display: none; }
.agent-dock.is-mini .agent-phone { --pw: var(--mini-w); }
@keyframes um-mini-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }

.um-mini-close { display: none; }
.um-mini-close.is-shown {
    position: fixed;
    z-index: 46;
    left: calc(10px + 92px - 14px);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px + 92px * 2.06 - 14px);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: #11131c;
    color: #fff;
    font: 600 17px/1 system-ui, sans-serif;
    box-shadow: 0 4px 10px rgba(15, 15, 26, .3);
    cursor: pointer;
}
.agent-dock.is-mini[data-mini-side="right"] { left: auto; right: 10px; }
.um-mini-close.is-shown[data-mini-side="right"] { left: auto; right: calc(10px + 92px - 14px); }
.um-mini-close:focus-visible { outline: 2px solid var(--agent-purple, #7c3aed); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .agent-dock.is-mini { animation: none; }
}