/* Direction B (night) only. Loaded after site.css; A and C never load this file. */

/* ---------- the Zoom screen: Aviad's face sits high in the vertical video ---------- */
.call video, .call__main { object-position: 50% 5%; }

/* ---------- trust strip: centred ---------- */
.trust__in { flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 34px); text-align: center; }
.trust__label { max-width: none; font-size: 16px; }
.trust__logos { flex: none; width: 100%; max-width: 1060px; justify-content: center; gap: clamp(22px, 3vw, 40px) clamp(30px, 5vw, 68px); }
.trust__logos img { height: var(--h); }
@media (max-width: 860px) {
  .trust__in { align-items: center; }
  .trust__logos { justify-content: center; gap: 24px 34px; }
  .trust__logos img { height: calc(var(--h) * .82); transform: none; }
}

/* ---------- Google rating + reviews ---------- */
.greviews { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--rule-strong); }
.greviews__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.greviews__g { width: 30px; height: 30px; padding: 5px; background: #fff; border-radius: 50%; flex: none; }
.greviews__score { font-size: 30px; line-height: 1; }
.greviews__stars { position: relative; display: inline-block; direction: ltr; font-size: 19px; line-height: 1; letter-spacing: 2px; color: rgb(250 250 250 / .22); }
.greviews__stars::before { content: "★★★★★"; }
.greviews__stars::after { content: "★★★★★"; position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; white-space: nowrap; color: #fbbc04; }
.greviews__label { font-size: 15px; color: var(--muted); }
.greviews__list { margin-top: clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.greviews__list li { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 26px); background: rgb(14 27 41 / .28); border: 1px solid var(--rule); border-radius: var(--radius); }
.greviews__list .greviews__stars { align-self: flex-start; font-size: 15px; letter-spacing: 1px; }
.greviews__list p { font-size: 17px; line-height: 1.55; flex: 1; }
.greviews__list b { font-size: 14px; font-weight: 500; color: var(--muted); }
@media (max-width: 860px) {
  .greviews__list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82vw, 320px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; }
  .greviews__list::-webkit-scrollbar { display: none; }
  .greviews__list li { scroll-snap-align: center; }
}

/* ---------- press: quotes, no links ---------- */
.pressq { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 52px); }
.pressq figure { padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.pressq blockquote { font: 500 clamp(18px, 1.55vw, 22px)/1.4 var(--he); text-wrap: pretty; }
.pressq figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .pressq { grid-template-columns: 1fr; gap: 26px; } .pressq figure { gap: 12px; } }

/* ---------- footer ---------- */
.ftr { padding-block: clamp(30px, 3.4vw, 40px) clamp(30px, 3.4vw, 40px); }
.ftr__end { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ftr__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; }
.ftr__tel:hover { background: var(--ink); color: var(--paper); }
.ftr__tel span { font-size: 14px; }
.ftr__tel b { font-size: 15px; font-weight: 400; letter-spacing: .02em; white-space: nowrap; }

/* ---------- header: solid enough that nothing reads through it ---------- */
.hdr { background: rgb(14 27 41 / .97); }

/* ---------- hero, desktop: the device always fits under the copy, also on a low laptop screen ---------- */
@media (min-width: 861px) {
  .hero3--c .hero3__dev { width: min(980px, 100%, calc((100vh - 502px) * 2.9)); }
}

/* ---------- hero, phone: the laptop opens big and pulls back as the screens slide out.
   The copy and the device fill the pinned screen, so no hole is left under them. ---------- */
@media (max-width: 860px) {
  .hero3 { --hero-zoom: .7; }
  .hero3__sticky { align-items: stretch; padding-top: 16px; }
  .hero3--c .hero3__grid { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; }
  .hero3--c .hero3__dev { width: calc(100vw - 14px); align-self: center; padding-bottom: 6px; }
  .hero3 .dev__rig { transform: scale(calc(1 + (1 - var(--slide)) * var(--hero-zoom))); transform-origin: 50% 72%; }
  .hero3 .cta-row { flex-wrap: nowrap; justify-content: center; gap: 14px; margin-top: 16px; }
  .hero3 .cta-row .btn { padding: 0 18px; white-space: nowrap; font-size: 16px; }
  .hero3 .link-more { white-space: nowrap; font-size: 15px; }
  .hero3--c .hero3__count { margin-top: 30px; font-size: 19px; }
  .trust { padding-block: 16px 40px; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hero3__sub { display: block; font-size: 15.5px; line-height: 1.5; margin-top: 10px; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .hero3 { --hero-zoom: .45; }
  .hero3__sub { display: none; }
}
/* a phone on its side is too low to pin anything: the hero just scrolls */
@media (max-height: 500px) {
  .hero3__track { height: auto; }
  .hero3__sticky { position: static; height: auto; padding-block: 16px 24px; }
  .hero3--c .hero3__dev { width: min(70vw, 620px); }
  .hero3 .dev__rig { transform: none; }
}

/* ---------- models, phone: the room reserved for the fourth screen is shared above and below ---------- */
@media (max-width: 860px) {
  .prod { padding-bottom: 88px; }
  .dev--quad .dev__rig { transition: transform .7s cubic-bezier(.6, 0, .2, 1); }
  .dev--quad:not([data-n="4"]) .dev__rig { transform: translateY(-9cqi); }
}

/* ---------- demo: the video never rides up over the form ---------- */
.pitch--inline { margin: 0 auto; }
.form__note a { font-size: 15px; white-space: nowrap; }
@media (max-width: 860px) {
  .pitch--inline { width: min(100%, 320px); }
}

/* ---------- footer, phone ---------- */
@media (max-width: 860px) {
  .ftr__in { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
  .ftr__tag { text-align: end; font-size: 13px; }
  .ftr__end { grid-column: 1 / -1; justify-content: space-between; flex-wrap: nowrap; gap: 12px; }
}
@media (max-width: 380px) {
  .ftr__tel span { display: none; }
  .hero3 .cta-row { gap: 10px; }
  .hero3 .link-more span { display: none; }
}
.btn--sm { white-space: nowrap; }

/* ---------- hero, tall portrait screens (tablets): a fixed block centred on the pinned screen,
   because a full-height one leaves a hole above the next section ---------- */
@media (max-width: 860px) and (min-height: 860px) {
  .hero3 { --hero-zoom: .55; }
  .hero3__track { height: calc(760px + 90vh); }
  .hero3__sticky { height: 760px; top: calc(var(--hdr-h) + (100svh - var(--hdr-h) - 760px) / 2); }
  .hero3--c .hero3__dev { width: min(calc(100vw - 14px), 760px); }
}

/* ---------- reduce motion: the film becomes a plain list of stills ---------- */
.film.is-static .film__sticky .wrap, .film.is-static .film__grid { height: auto; }
.film.is-static .film__chapters { position: static; }
.film.is-static .film__chapters li { padding-block: 22px; border-top: 1px solid var(--rule) !important; }
.film.is-static .film__chapters .still { margin-inline: 0; margin-top: 16px; }
.film.is-static .film__chapters p { padding-inline-start: 0; }
.film.is-static .film__bar { display: none; }
.film.is-static .film__sticky { padding: 0; }
.film.is-static .wrap.film__grid { padding-inline: var(--gutter); }
@media (prefers-reduced-motion: reduce) {
  .hero3 .dev__rig { transform: none; }
  .hero3--c .hero3__grid { height: auto; gap: 28px; }
}

/* The heading accent, used on the three demo moments only: the hero promise, the offer and the form
   (Aviad and Noam 2026-11-05). The brand book has no accent, so this is a light tint of the brand
   navy's own hue: 8.9:1 on the page background. Keep it rare, or nothing stands out. */
.shade { color: #6ec1ff; }

/* ---------- ICP pages: proof line above the quote (empty on the root, then not rendered) ---------- */
.proofline { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.proofline h3 { font: 700 clamp(22px, 2.2vw, 30px)/1.3 var(--he); letter-spacing: -0.01em; text-wrap: balance; }
.proofline p { margin-top: 10px; font-size: 17px; line-height: 1.55; opacity: .86; text-wrap: pretty; }

/* ---------- form: opens WhatsApp with the message ready, no server ---------- */
.form__ok a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }