/* === round1 C/D === (builder, 29.10.2026)
   Separate file, loaded after style.css. Does not touch door / threshold / scene / glass backdrop / veil / depth rules.
   R10 type sizes, R11 targets, privacy slot, R7 404 page, F1 FAQ typing, F2 simulation, F3 before/after, F4 process line,
   F5 desktop tilt + sheen, F6 count-up. */

/* ---------- R10: minimum text sizes ---------- */
.lang-switch { font-size: .9375rem; }                                   /* was 13px */
@media (min-width: 1021px) {
  .main-nav a { font-size: .9375rem; }                                  /* desktop nav 13px -> 15px */
  .header-actions .btn-small { font-size: .9375rem; min-height: 40px; padding-inline: 1rem; }   /* R10 + R11: CTA 84x32 -> >=40px */
}
@media (min-width: 1021px) and (max-width: 1280px) {                    /* T19: Hebrew header stays one row at 1021-1280 */
  .main-nav ul { gap: 0 1rem; }
  :lang(he) .main-nav ul { gap: 0 .85rem; }
}
.hero-points { font-size: 1rem; }                                       /* 15px -> 16px, phone and desktop */
@media (max-width: 760px) {
  .sample figcaption, .demo-video figcaption, .callout, :dir(rtl) .callout { font-size: 1rem; }   /* phone 15px -> 16px */
  .site-footer { font-size: 1rem; }                                     /* phone footer 16px (desktop stays 15px) */
}

/* ---------- R11: touch targets ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .footer-grid li a { min-height: 44px; }                               /* phone footer links 32px -> 44px */
}
.check label { display: block; min-height: 44px; }                   /* the label (>=44px tall) also toggles the 24px box */
.check label a { padding-block: .7rem; }                                /* privacy link hit area 22px -> 44px, no layout shift (inline padding) */

/* ---------- Compliance gap 11: privacy notice under the forms ---------- */
.form-privacy { margin-top: var(--s-2); max-width: var(--measure); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 761px) { .form-privacy { font-size: .9375rem; } }
.into-light .form-privacy a, .form-privacy a { color: #002b57; }   /* >= 5.5:1 even on the darkest scene pixel seen through the v9.4 phone glass (measured 4.47 with #003a75) */

/* ---------- R7: 404 ---------- */
.nf-hero .nf-actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; justify-content: center; }
.nf-hero .nf-secondary { color: #f5f5f7; text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; }
.nf-hero .nf-secondary:hover { color: #fff; }
.nf-hero + * { margin-top: 0; }

/* ---------- F1: FAQ answers "typed" like chat ---------- */
.faq .answer.r1-typing { position: relative; }
.faq .r1-dots { display: inline-flex; gap: 5px; padding: .55rem .8rem; margin-bottom: .6rem; border-radius: 16px; background: rgb(0 0 0 / .06); }
.faq .r1-dots i { width: 7px; height: 7px; border-radius: 50%; background: #6e6e73; animation: r1-dot 1s infinite ease-in-out; }
.faq .r1-dots i:nth-child(2) { animation-delay: .15s; } .faq .r1-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes r1-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 760px) { .faq .r1-dots i { width: 6px; height: 6px; } }
.faq .answer.r1-wait > :not(.r1-dots) { opacity: 0; }
@property --r1-m { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.faq .answer.r1-reveal > :not(.r1-dots) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--r1-m) - 12%), transparent calc(var(--r1-m) + 12%));
          mask-image: linear-gradient(to right, #000 calc(var(--r1-m) - 12%), transparent calc(var(--r1-m) + 12%));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  animation: r1-reveal var(--r1-dur, 1.2s) cubic-bezier(.2, .7, .3, 1) both;
}
:dir(rtl) .faq .answer.r1-reveal > :not(.r1-dots), .faq .answer.r1-reveal:dir(rtl) > :not(.r1-dots) {
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--r1-m) - 12%), transparent calc(var(--r1-m) + 12%));
          mask-image: linear-gradient(to left, #000 calc(var(--r1-m) - 12%), transparent calc(var(--r1-m) + 12%));
}
@keyframes r1-reveal { from { --r1-m: -12%; } to { --r1-m: 112%; } }
@media (prefers-reduced-motion: reduce) { .faq .r1-dots { display: none; } .faq .answer > * { animation: none !important; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; } }

/* ---------- F2: browse like your customer ---------- */
.sim { margin: var(--s-4) 0 0; display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.sim-modes { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 0; }
.sim-modes legend { padding: 0; margin-bottom: .6rem; font-weight: 700; font-size: 1rem; color: var(--ink); }
.sim-opt { position: relative; display: flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border-radius: 14px; background: rgb(255 255 255 / .7); border: 1px solid #d2d2d7; cursor: pointer; font-size: 1rem; color: var(--ink); }
.sim-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sim-opt:has(input:checked) { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }
.sim-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.sim-exit { margin-top: .8rem; min-height: 44px; padding: .55rem 1.2rem; border-radius: 980px; border: 0; background: var(--accent-fill); color: #fff; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.sim-exit:hover { background: var(--accent-fill-hover); }
.sim-exit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sim-status { margin-top: .8rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); min-height: 1.5em; }
.sim-frame { position: relative; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #d2d2d7; contain: content; }
.sim-page { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .8rem; color: #1d1d1f; transition: filter .25s; }
.sim-h { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.25; }
.sim-p { font-size: 1rem; line-height: 1.55; color: #424245; }
.sim-small { font-size: .875rem; color: #6e6e73; }
.sim-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.sim-field { display: grid; gap: .3rem; width: min(100%, 20rem); font-size: .9375rem; }
.sim-input { display: block; height: 44px; border-radius: 10px; border: 1px solid #86868b; background: #fff; }
.sim-btn { min-height: 44px; padding: .5rem 1.1rem; border-radius: 980px; border: 0; background: #1d1d1f; color: #fff; font: inherit; font-size: 1rem; }
.sim-link { color: #003a75; font-size: 1rem; display: inline-flex; align-items: center; min-height: 44px; }
.sim[data-mode="blur"] .sim-page { filter: blur(2px); }
.sim[data-mode="contrast"] .sim-page { filter: contrast(.45); }
.sim[data-mode="keys"] .sim-frame, .sim[data-mode="keys"] .sim-frame * { cursor: none; }
.sim[data-mode="keys"] .sim-page :focus-visible, .sim[data-mode="keys"] .sim-page :focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.sim[data-mode] .sim-frame { border-color: #1d1d1f; }
.sim-after { margin-top: var(--s-3); font-size: 1.0625rem; color: var(--ink); }
@media (max-width: 760px) {
  .sim { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .sim-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 3px; border-radius: 14px; background: rgb(0 0 0 / .06); }
  .sim-modes legend { grid-column: 1 / -1; }
  .sim-opt { justify-content: center; text-align: center; border: 0; background: transparent; border-radius: 11px; padding: .5rem .4rem; font-size: .9375rem; line-height: 1.2; }
  .sim-opt:has(input:checked) { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgb(0 0 0 / .14); }
}
@media (prefers-reduced-motion: reduce) { .sim-page { transition: none; } }
@media (forced-colors: active) { .sim-opt:has(input:checked) { outline: 2px solid Highlight; } .sim-frame { border-color: CanvasText; } }

/* ---------- F3: before / after slider ---------- */
.cmp { margin: var(--s-4) 0 0; max-width: 56rem; }
.cmp-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid #d2d2d7; background: #fff; }
.cmp-page { position: absolute; inset: 0; padding: clamp(1rem, 4%, 2.5rem); padding-top: 4rem; padding-bottom: 3.4rem; display: grid; align-content: center; justify-items: center; text-align: center; gap: .7rem; }   /* centred, so both halves of the sample page show content at any handle position */
.cmp-before { background: #fafafa; color: #5f5f64; }   /* barriers shown by size, hierarchy and target size; contrast itself stays >= 4.5:1 so the site does not fail 1.4.3 */
.cmp-before .cmp-h { font-size: .9375rem; font-weight: 400; color: #5f5f64; }
.cmp-before .cmp-t { font-size: .75rem; line-height: 1.2; color: #5f5f64; letter-spacing: -.01em; }
.cmp-before .cmp-btn { justify-self: center; padding: 0 .3rem; font-size: .75rem; background: transparent; color: #5f5f64; border-radius: 0; }
.cmp-after { background: #fff; color: #1d1d1f; clip-path: inset(0 0 0 var(--pos)); }      /* "before" at the start side, "after" at the end side (copy) */
.cmp:dir(rtl) .cmp-after { clip-path: inset(0 var(--pos) 0 0); }
.cmp-after .cmp-h { font-family: var(--display); font-size: 1.375rem; font-weight: 700; }
.cmp-after .cmp-t { font-size: 1rem; line-height: 1.5; color: #424245; }
.cmp-after .cmp-btn { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border-radius: 980px; background: #1d1d1f; color: #fff; font-size: 1rem; }
.cmp-tag { position: absolute; bottom: .7rem; z-index: 2; max-width: 45%; padding: .3rem .7rem; border-radius: 980px; font-size: .875rem; line-height: 1.3; background: rgb(29 29 31 / .86); color: #fff; }
.cmp-tag-before { inset-inline-start: .8rem; } .cmp-tag-after { inset-inline-end: .8rem; }
.cmp-line { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--pos); width: 2px; margin-inline-start: -1px; background: #1d1d1f; z-index: 2; pointer-events: none; }
.cmp-line::after { content: ""; position: absolute; top: 2.2rem; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; border: 2px solid #1d1d1f; box-shadow: 0 2px 10px rgb(0 0 0 / .2); }
.cmp-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; }
.cmp-range::-moz-range-thumb { width: 48px; height: 48px; border: 0; }
.cmp:has(.cmp-range:focus-visible) .cmp-line::after { outline: 3px solid var(--accent); outline-offset: 3px; }
.cmp-help { margin-top: .8rem; font-size: 1rem; color: var(--ink-2); }
.cmp figcaption { margin-top: .3rem; font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .cmp-stage { aspect-ratio: 4 / 3; }   /* round3 #8: 4:3 phone / 16:9 desktop (was 1:1 / 2:1) */
  .cmp-line::after { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .cmp-tag { font-size: .875rem; padding: .25rem .6rem; max-width: 46%; }
  .cmp-page { padding-top: 3.6rem; padding-bottom: 5.6rem; }
  .cmp-after .cmp-h { font-size: 1.125rem; } .cmp-before .cmp-h { font-size: .9375rem; }
  .cmp figcaption { font-size: 1rem; }
}
@media (forced-colors: active) { .cmp-line, .cmp-line::after { background: CanvasText; border-color: CanvasText; } }

/* ---------- F4: process line on #how .steps ---------- */
.steps.r1-line { position: relative; --p: 0; }
.steps.r1-line::after { content: ""; position: absolute; z-index: 0; background: #48484a; border-radius: 2px; pointer-events: none; }   /* F4: soft dark grey (no blue: palette rule), thin */
.steps.r1-line > li { position: relative; z-index: 1; }
.steps.r1-line > li::before { transition: color .3s; }
.steps.r1-line > li.lit::before { color: var(--ink); font-weight: 700; }   /* text is never dimmed (contrast stays AA) */
@media (min-width: 761px) {           /* desktop: horizontal fill over the existing top rules of the 3 columns */
  .steps.r1-line > li { border-top-color: transparent; }   /* one continuous track instead of 3 separate rules */
  .steps.r1-line::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--rule, #d2d2d7); pointer-events: none; }
  .steps.r1-line::after { top: 0; inset-inline: 0; height: 2px; margin-top: -.5px; transform: scaleX(var(--p)); transform-origin: left center; }
  .steps.r1-line:dir(rtl)::after { transform-origin: right center; }
}
@media (max-width: 760px) {           /* phone: vertical line at inline-start */
  .steps.r1-line { padding-inline-start: 1.25rem; }
  .steps.r1-line::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: #d2d2d7; }
  .steps.r1-line::after { inset-block: 0; inset-inline-start: 0; width: 2px; transform: scaleY(var(--p)); transform-origin: center top; }
}
@media (prefers-reduced-motion: reduce) { .steps.r1-line { --p: 1 !important; } .steps.r1-line > li::before { transition: none; } }
@media (forced-colors: active) { .steps.r1-line::after, .steps.r1-line::before { background: CanvasText; } }

/* ---------- F5: desktop-only tilt + sheen on glass cards ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.r1-tilt-on .r1-tiltwrap { perspective: 900px; }
  html.r1-tilt-on .r1-tilt { rotate: var(--r1-ax, 0) var(--r1-ay, 0) 0 var(--r1-a, 0deg); transition: rotate .6s cubic-bezier(.22, 1, .36, 1); }   /* F5: smooth return, no permanent will-change */
  html.r1-tilt-on .r1-tilt.r1-hot { transition-duration: .18s; }
  .r1-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--r1-sx, 50%) var(--r1-sy, 50%), rgb(255 255 255 / .38), rgb(255 255 255 / 0) 60%); mix-blend-mode: soft-light; }
  .r1-tilt.r1-hot > .r1-sheen { opacity: 1; }
}
.r1-tilt { position: relative; }
/* hotfix-overlap (30.10.2026): the wide commitment card (#promise .promise-wide) is never tilted; as a 3D-rotated will-change layer inside a perspective parent and a backdrop-filter panel its text broke up on Windows Chrome (GPU, 125%). */
html.r1-tilt-on .r1-tilt.promise-wide { rotate: none !important; transition: none !important; will-change: auto !important; }
.r1-tilt.promise-wide > .r1-sheen { display: none !important; }

/* ---------- F6: count-up ---------- */
.cu { position: relative; display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-anim { position: absolute; inset: 0; text-align: inherit; font-variant-numeric: tabular-nums; pointer-events: none; display: none; }
.cu.cu-run .cu-final { color: transparent; }
.cu.cu-run .cu-anim { display: block; }
@media (prefers-reduced-motion: reduce) { .cu.cu-run .cu-final { color: inherit; } .cu.cu-run .cu-anim { display: none; } }

/* ===== round3 #5: form-privacy link colour actually applied (style.css:811 ':root .into-light :is(...) a:not(.btn)' 0,4,1 won over line 32) ===== */
:root .into-light :is(.split > .copy, .section > .container) .form-privacy a:not(.btn),
:root .form-privacy a:not(.btn):not(.r1-x) { color: #002b57; }
/* ===== end round3 #5 ===== */
/* ===== round3 #8b: phone F3 at 4:3 — before/after tags sit under the stage so the sample copy is never covered ===== */
@media (max-width: 760px) {
  .cmp-stage { overflow: visible; margin-bottom: 4.6rem; }
  .cmp-page { border-radius: 21px; padding-top: 3.9rem; padding-bottom: 1rem; gap: .5rem; }
  .cmp-tag { bottom: auto; top: calc(100% + .45rem); max-width: 48%; background: #1d1d1f; }
  .cmp-tag-before { inset-inline-start: 0; } .cmp-tag-after { inset-inline-end: 0; }
  .cmp-help { margin-top: .4rem; }
  .cmp-after { position: relative; inset: auto; min-height: 100%; }   /* in flow: the stage is exactly 4:3 unless the sample copy needs more room (narrow phones), then it grows instead of clipping */
}
@media (max-width: 480px) {
  .cmp-stage { margin-bottom: 5.4rem; }
  .cmp-line::after { top: 1.75rem; }
  .cmp-page { padding-inline: .8rem; padding-top: 3.4rem; padding-bottom: .6rem; }
  .cmp-after .cmp-h { font-size: 1.0625rem; } .cmp-after .cmp-t { font-size: .9375rem; line-height: 1.4; }
}
@media (max-width: 360px) { .cmp-stage { margin-bottom: 6.3rem; } }
/* ===== end round3 #8b ===== */
/* ===== round3 #5b (phone only): source links inside light sections — 4.47:1 measured with #003a75 on the darkest scene pixel behind the phone glass (how-it-works #retest); #002b57 gives >= 5.5:1. Desktop unchanged (#51). ===== */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  :root .into-light :is(.split > .copy, .section > .container) .src a:not(.btn) { color: #002b57; }
}
/* ===== end round3 #5b ===== */
/* ===== round3 #9 (phone only, after the v9.6 merge): the v9.6 footer is see-through glass; its secondary ink #3d3d41
   measured 4.39-4.45:1 on the darkest room pixel behind the phone footer (EN, how/why/scan/contact/pricing/faq).
   #2f2f33 gives >= 5.4:1 there. Only the footer's --ink-2 token on phones; the v9.6 glass itself is untouched. ===== */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  :root body .site-footer { --ink-2: #2f2f33; }
}
/* ===== end round3 #9 ===== */

/* F5 (22:3x): never under reduced motion / 'stop animations'; no sheen */
@media (prefers-reduced-motion: reduce) { html.r1-tilt-on .r1-tilt { rotate: none !important; transition: none !important; } }
html.wa-still.r1-tilt-on .r1-tilt { rotate: none !important; transition: none !important; }
.r1-sheen { display: none !important; }

/* F2 (Yoav 23:57): phone only, the three modes are a full-width list, 48px each, as on desktop */
@media (max-width: 760px) {
  .sim-modes { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 0; border-radius: 0; background: none; }
  .sim-opt { justify-content: flex-start; text-align: start; min-height: 48px; padding: .55rem 1rem; border: 1px solid #d2d2d7; border-radius: 14px; background: rgb(255 255 255 / .7); font-size: 1rem; line-height: inherit; }
  .sim-opt:has(input:checked) { background: #1d1d1f; border-color: #1d1d1f; color: #fff; box-shadow: none; }
}

/* F1 (Yoav 00:14): the FAQ answer as a grey-glass bubble (card glass), no tail, 92% wide; typing dots unchanged */
.faq details[open] { background: none; }
.faq details[open] > .answer {
  --g-a: .44;
  position: relative;
  box-sizing: border-box;
  width: 92%;
  max-width: 92%;
  margin-inline-start: auto;            /* opposite side of the question */
  margin-block: .25rem 1.25rem;
  padding: 1.15rem 1.3rem 1.2rem;
  border-radius: 22px;
  border: 1px solid var(--glass-edge, rgb(255 255 255 / .6));
  background: linear-gradient(158deg,
    rgb(255 255 255 / calc(var(--g-a) + .12)) 0%,
    rgb(255 255 255 / var(--g-a)) 34%,
    rgb(255 255 255 / calc(var(--g-a) - .02)) 66%,
    rgb(255 255 255 / calc(var(--g-a) + .04)) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(7px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--glass-rim, rgb(255 255 255 / .95)),
              0 10px 28px -14px var(--glass-shadow, rgb(5 5 6 / .22));
  color: var(--ink-glass, #3d3d41);
}
.faq details[open] > .answer p,
.faq details[open] > .answer li { font-size: .97em; line-height: 1.7; font-weight: 400; }
.faq details[open] > .answer > * + * { margin-top: .7em; }
@media (min-width: 761px) { .faq details[open] > .answer { padding: 1.35rem 1.6rem 1.4rem; width: min(92%, 44rem); } }
.faq details[open] > .answer > * { max-width: none; padding-inline: 0; text-wrap: wrap; }   /* full bubble width: no inherited end gutter, no "pretty" short lines */
/* fix2110 (Yoav 31.10 21:23): the typing dots no longer add a row above the hidden text. They sit over its first line,
   so when they go and the text is revealed, the text is already in its final place (it used to jump up ~50px and the
   card shrink at that same moment). The card, its glass and its position are unchanged. */
.faq details[open] > .answer.r1-wait > .r1-dots + * { margin-top: 0; }
.faq details[open] > .answer.r1-wait > .r1-dots { position: absolute; inset-block-start: 1.15rem; inset-inline-start: 1.3rem; margin: 0; }
@media (min-width: 761px) { .faq details[open] > .answer.r1-wait > .r1-dots { inset-block-start: 1.35rem; inset-inline-start: 1.6rem; } }