/* ==========================================================================
   Tripleize marketing design system (ds.css)
   Shared by every page on tripleize.co.il: home, /pricing, blog, industries,
   use-cases and the legal pages. Hand-written (no build step), RTL-first,
   logical properties only, light + dark section themes.

   Cache-busted with ?v=<sha256[0..8]> stamped into every page by
   scripts/build-marketing-chrome.mjs; nginx serves *.css immutable for a year,
   so the URL MUST change with the content (deploy-marketing.sh refuses to
   ship a stale stamp).

   Rules of the house (keep the site looking like a product, not a template):
   - One accent (--brand). The cyan->purple signature gradient appears only in
     the logo mark and tiny details, never as body text or button fills.
   - No glow drop-shadows, no glassmorphism on content, no emoji as icons.
   - Motion is short (150-600ms), eased, and disabled under reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --
   Self-hosted variable woff2 (scripts/subset-marketing-fonts.py). The
   "hebrew" files also carry ASCII and the punctuation the site uses, so the
   two of them (preloaded on every page by build-marketing-chrome.mjs) cover
   all the text; the "latin" files load only for rarer Latin characters. The
   "latin" unicode-range leaves out everything the "hebrew" file covers, so a
   "hebrew" file that misses the first paint never pulls in a "latin" one.
   font-display: optional = a web font is never swapped in after the first
   paint, so fonts cause no layout shift. The preloaded files normally arrive
   before ds.css and render from the first frame; when they are late, that
   one view keeps the metric-matched fallback below (same line heights,
   nearly the same line breaks) and the next page uses the cached files.
   The ?v= stamps are written by build-marketing-chrome.mjs. */
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400 700; font-display: optional;
  src: url("/landing/fonts/heebo-latin.woff2?v=31a2f1e4") format("woff2");
  unicode-range: U+0000-001F, U+007F-009F, U+00A1-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-200B, U+2011-2012, U+2015-2017, U+201F-2021, U+2023-2025, U+2027-206F, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400 700; font-display: optional;
  src: url("/landing/fonts/heebo-hebrew.woff2?v=c8f15596") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB, U+00D7, U+0307-0308, U+0590-05FF, U+200C-2010, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AA, U+20AC, U+2122, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 500 700; font-display: optional;
  src: url("/landing/fonts/rubik-latin.woff2?v=966ec4dc") format("woff2");
  unicode-range: U+0000-001F, U+007F-009F, U+00A1-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-200B, U+2011-2012, U+2015-2017, U+201F-2021, U+2023-2025, U+2027-206F, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 500 700; font-display: optional;
  src: url("/landing/fonts/rubik-hebrew.woff2?v=ccc78751") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB, U+00D7, U+0307-0308, U+0590-05FF, U+200C-2010, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AA, U+20AC, U+2122, U+25CC, U+FB1D-FB4F;
}
/* Metric-matched fallbacks (local Arial: Windows, macOS, iOS), listed right
   after each web font in --font-sans / --font-head. ascent/descent are the
   web font's own (Heebo 2146/862 per 2048 em, Rubik 935/250 per 1000) divided
   by size-adjust, so line boxes and baselines are identical. size-adjust is
   fitted per weight, separately for Hebrew letters and the rest, to the
   widths of the text of all pages (least squares; Heebo 400 "rest" = the
   width of "0", so ch units match). unicode-range = exactly the code points
   of the web font, so these faces never draw a character it lacks (that
   still falls through to system-ui). Re-fit when the fonts or subsets change. */
@font-face {
  font-family: "Heebo Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT");
  size-adjust: 105.03%; ascent-override: 99.77%; descent-override: 40.07%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE-05BF, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F0-05F4, U+FB1D, U+FB1F-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT");
  size-adjust: 101.05%; ascent-override: 103.70%; descent-override: 41.65%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+200C-200F, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT");
  size-adjust: 107.95%; ascent-override: 97.07%; descent-override: 38.99%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE-05BF, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F0-05F4, U+FB1D, U+FB1F-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT");
  size-adjust: 100.51%; ascent-override: 104.25%; descent-override: 41.88%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+200C-200F, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 104.61%; ascent-override: 100.17%; descent-override: 40.24%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE-05BF, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F0-05F4, U+FB1D, U+FB1F-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 97.30%; ascent-override: 107.69%; descent-override: 43.26%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+200C-200F, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 107.82%; ascent-override: 97.19%; descent-override: 39.04%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE-05BF, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F0-05F4, U+FB1D, U+FB1F-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F;
}
@font-face {
  font-family: "Heebo Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 95.37%; ascent-override: 109.87%; descent-override: 44.13%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+200C-200F, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Rubik Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 102.04%; ascent-override: 91.63%; descent-override: 24.50%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F2-05F4, U+FB2A-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4B;
}
@font-face {
  font-family: "Rubik Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.41%; ascent-override: 92.20%; descent-override: 24.65%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Rubik Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103.13%; ascent-override: 90.66%; descent-override: 24.24%; line-gap-override: 0%;
  unicode-range: U+05B0-05BC, U+05BE, U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F2-05F4, U+FB2A-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4B;
}
@font-face {
  font-family: "Rubik Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 105.81%; ascent-override: 88.37%; descent-override: 23.63%; line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0307-0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AA, U+20AC, U+2122, U+2212, U+2215;
}

:root {
  --font-sans: "Heebo", "Heebo Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Rubik", "Rubik Fallback", "Heebo", "Heebo Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* light neutrals */
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --paper-3: #eef0f4;
  --ink: #0c111d;
  --ink-2: #344054;
  --ink-3: #5b6576;
  --line: #e4e7ec;
  --line-2: #d0d5dd;

  /* dark neutrals */
  --night: #090d17;
  --night-2: #0e1320;
  --night-3: #141a2a;
  --night-4: #1b2236;
  --snow: #f2f4f8;
  --snow-2: #c3cad6;
  --snow-3: #8e98aa;
  --night-line: rgba(255, 255, 255, 0.09);
  --night-line-2: rgba(255, 255, 255, 0.16);

  /* brand + status */
  --brand: #5a4bf2;
  --brand-600: #4a3be0;
  --brand-700: #3d2fc4;
  --brand-300: #a99ffb;
  --brand-100: #e6e3fe;
  --brand-50: #f3f1ff;
  --cyan: #22c5dd;
  --cyan-700: #0e7490;
  --green: #12b76a;
  --green-700: #027a48;
  --amber: #f5a524;
  --red: #e5484d;
  --signature: linear-gradient(135deg, #06b6d4, #8b5cf6);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(16, 24, 40, 0.22), 0 6px 14px -6px rgba(16, 24, 40, 0.08);
  --shadow-dark: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 68px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);

  color-scheme: light;
}

/* -------------------------------------------------------------- themes --
   A section (or the page) opts into a theme; components read only these
   semantic variables, so the same card/button works on both. */
.theme-light, :root {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --border: var(--line);
  --border-2: var(--line-2);
  --accent-fg: var(--brand-600);
  --accent-soft: var(--brand-50);
  --focus: var(--brand);
}
.theme-light-2 {
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-3);
}
.theme-dark {
  --bg: var(--night);
  --bg-2: var(--night-2);
  --surface: var(--night-2);
  --surface-2: var(--night-3);
  --fg: var(--snow);
  --fg-2: var(--snow-2);
  --fg-3: var(--snow-3);
  --border: var(--night-line);
  --border-2: var(--night-line-2);
  --accent-fg: var(--brand-300);
  --accent-soft: rgba(90, 75, 242, 0.16);
  --focus: var(--brand-300);
  color-scheme: dark;
}
.theme-light, .theme-light-2, .theme-dark { background: var(--bg); color: var(--fg); }

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
::selection { background: rgba(90, 75, 242, 0.22); }
[hidden] { display: none !important; }
:where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 12px); }

.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-display {
  font-family: var(--font-head);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.ds-display { font-size: clamp(2.45rem, 1.5rem + 3.9vw, 4.6rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.028em; }
.ds-h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.024em; }
.ds-h2 { font-size: clamp(1.85rem, 1.35rem + 2vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.ds-h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.ds-h4 { font-size: 1.05rem; line-height: 1.4; font-weight: 600; }
.ds-lead { font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.62; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.ds-body { color: var(--fg-2); margin: 0; text-wrap: pretty; }
.ds-small { font-size: 0.875rem; line-height: 1.55; color: var(--fg-3); }
.ds-muted { color: var(--fg-3); }
.ds-accent { color: var(--accent-fg); }
.ds-mark { /* the one highlighted phrase in a headline */
  color: var(--accent-fg);
}
.ds-num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.4;
  color: var(--accent-fg);
  margin: 0 0 14px;
}
.ds-eyebrow::before {
  content: ""; inline-size: 18px; block-size: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.7;
}
.ds-eyebrow.no-rule::before { display: none; }

/* --------------------------------------------------------------- layout -- */
.container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { inline-size: 100%; max-inline-size: 820px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); position: relative; }
.section + .section.theme-light, .theme-light + .theme-light { border-block-start: 1px solid var(--border); }
.section-head { max-inline-size: 760px; margin-block-end: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .ds-lead { margin-block-start: 16px; }
.stack > * + * { margin-block-start: var(--stack, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.grid { display: grid; gap: var(--gap, 20px); }
.grid-2 { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--btn-h); padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 0.975rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn-lg { --btn-h: 54px; padding: 0 26px; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { --btn-h: 38px; padding: 0 14px; font-size: 0.9rem; border-radius: 9px; }
.btn-block { display: flex; inline-size: 100%; }
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(16, 24, 40, 0.18), 0 4px 12px -4px rgba(90, 75, 242, 0.55);
}
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-2); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--fg-3); transform: translateY(-1px); }
.theme-dark .btn-secondary { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.theme-dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg); background: var(--surface-2); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1d2433; transform: translateY(-1px); }
.theme-dark .btn-ink { background: #fff; color: var(--ink); }
.theme-dark .btn-ink:hover { background: #e9ecf2; }
.btn .i-arrow { transition: transform 200ms var(--ease); }
.btn:hover .i-arrow { transform: translateX(-3px); }
.btn svg { flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-fg); font-weight: 600; text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow svg { transition: transform 200ms var(--ease); }
.link-arrow:hover svg { transform: translateX(-3px); }
.link-arrow:focus-visible, .ds-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ds-link { color: var(--accent-fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.ds-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------- pill/badge -- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 14px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; line-height: 1.3;
  color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--border);
  text-decoration: none;
}
a.pill:hover { border-color: var(--border-2); color: var(--fg); }
.pill .dot, .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--green); flex: none; }
.dot-live { position: relative; }
.dot-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--green); opacity: 0;
  animation: ds-ping 2.2s var(--ease-out) infinite;
}
@keyframes ds-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4;
  color: var(--accent-fg); background: var(--accent-soft);
}
.badge-neutral { color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--border); }
.badge-green { color: var(--green-700); background: #e8f7ef; }
.theme-dark .badge-green { color: #6ce9a6; background: rgba(18, 183, 106, 0.14); }
.badge-amber { color: #93370d; background: #fef0c7; }
.theme-dark .badge-amber { color: #fec84b; background: rgba(245, 165, 36, 0.14); }

/* ---------------------------------------------------------------- cards -- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--shadow-xs);
}
.theme-dark .card { box-shadow: none; }
.card-hover { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.theme-dark .card-hover:hover { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); }
:where(a.card) { display: block; }
a.card { text-decoration: none; color: inherit; }
a.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.card-title { font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; line-height: 1.35; margin: 0 0 8px; color: var(--fg); }
.card-text { margin: 0; color: var(--fg-2); font-size: 0.975rem; line-height: 1.6; }
.icon-tile {
  inline-size: 44px; block-size: 44px; border-radius: 11px;
  display: inline-grid; place-items: center; flex: none;
  color: var(--accent-fg); background: var(--accent-soft);
  margin-block-end: 18px;
}
.icon-tile svg { inline-size: 22px; block-size: 22px; }
.icon-tile.neutral { color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); }

/* stroke icons: <svg class="i"> with stroke="currentColor" */
.i { inline-size: 20px; block-size: 20px; flex: none; }
.i-sm { inline-size: 16px; block-size: 16px; flex: none; }

/* check list (icon drawn with a CSS mask, colour = currentColor) */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-inline-start: 28px; color: var(--fg-2); line-height: 1.55; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em;
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--accent-soft);
}
.check-list li::after {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: calc(0.2em + 4px);
  inline-size: 10px; block-size: 10px; background: var(--accent-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-list.compact { gap: 8px; font-size: 0.95rem; }
.x-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.x-list li { position: relative; padding-inline-start: 28px; color: var(--fg-3); line-height: 1.55; }
.x-list li::before {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 0.45em;
  inline-size: 10px; block-size: 10px; background: currentColor; opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- stats -- */
.stat { display: grid; gap: 6px; }
.stat-value { font-family: var(--font-head); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--fg-3); font-size: 0.95rem; line-height: 1.45; }

/* --------------------------------------------------------------- header -- */
/* hidden by its own height (not a fixed offset), so it stays off screen at any text size */
.skip-link {
  position: absolute; inset-inline-start: 12px; inset-block-start: 0; z-index: 1000;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  background: var(--brand); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 8px));
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: -4px; }
#main:focus { outline: none; }

.site-header {
  position: sticky; inset-block-start: 0; z-index: 60;
  block-size: var(--header-h);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  border-block-end: 1px solid transparent;
  background: var(--bg);
}
.site-header.overlay { position: fixed; inset-inline: 0; background: transparent; }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-block-end-color: var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-scrolled { background: var(--bg); }
}
.site-header .bar { block-size: 100%; display: flex; align-items: center; gap: 20px; }
.site-header .bar > * { min-inline-size: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); flex: none; border-radius: 8px; }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.brand img { inline-size: 34px; block-size: 34px; border-radius: 9px; }
.brand-word { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1; direction: ltr; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 18px; }
.nav a, .nav button.nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 8px;
  color: var(--fg-2); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  background: none; border: 0; cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.nav a:hover, .nav button.nav-trigger:hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
/* on /industries/* and /use-cases/* the open section is the "פתרונות" trigger */
.nav-item:has(a[aria-current="page"]) .nav-trigger { color: var(--fg); background: var(--surface-2); }
.theme-dark .nav-item:has(a[aria-current="page"]) .nav-trigger { background: rgba(255, 255, 255, 0.06); }
.nav-menu a[aria-current="page"] { background: var(--accent-soft); }
.theme-dark .nav a:hover, .theme-dark .nav button.nav-trigger:hover { background: rgba(255, 255, 255, 0.06); }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.nav-item { position: relative; }
/* invisible bridge over the 8px gap, so moving the pointer into the menu never closes it */
.nav-item[data-open="true"] .nav-menu::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 12px; }
.nav-trigger svg { transition: transform 200ms var(--ease); }
.nav-item[data-open="true"] .nav-trigger svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: -8px;
  min-inline-size: 520px; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
}
.theme-dark .nav-menu { background: var(--night-3); box-shadow: var(--shadow-dark); }
.nav-item[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-menu-title { grid-column: 1 / -1; font-size: 0.78rem; font-weight: 600; color: var(--fg-3); padding: 8px 12px 4px; }
.nav-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.nav-menu a strong { font-weight: 600; color: var(--fg); font-size: 0.95rem; }
.nav-menu a span { font-size: 0.83rem; color: var(--fg-3); line-height: 1.4; }
.menu-btn {
  display: none; inline-size: 44px; block-size: 44px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-2); color: var(--fg); cursor: pointer;
}
.menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1023px) {
  .nav, .nav-actions .hide-mobile { display: none; }
  .menu-btn { display: inline-flex; }
}
/* the accessibility menu text size (130% and up): keep the phone header inside the screen */
@media (max-width: 480px) {
  .a11y-font-lg .site-header .brand-word { display: none; }
  .a11y-font-lg .site-header .bar { gap: 8px; }
  .a11y-font-lg .site-header .nav-actions { gap: 6px; }
  .a11y-font-lg .site-header .nav-actions .btn-sm { padding: 0 10px; font-size: 0.8rem; white-space: nowrap; }
}
@media (max-width: 360px) {
  .a11y-font-lg .site-header .nav-actions .btn-primary { display: none; }
}
@media (max-width: 400px) {
  .site-header .bar { gap: 10px; }
  .site-header .nav-actions .btn-sm { padding: 0 11px; font-size: 0.86rem; }
  .site-header .brand-word { font-size: 1.08rem; }
}

/* mobile sheet */
.mnav {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden; pointer-events: none;
}
.mnav[data-open="true"] { visibility: visible; pointer-events: auto; }
.mnav-backdrop { position: absolute; inset: 0; background: rgba(9, 13, 23, 0.55); opacity: 0; transition: opacity 220ms var(--ease); }
.mnav[data-open="true"] .mnav-backdrop { opacity: 1; }
.mnav-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: min(380px, 88vw);
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms var(--ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.mnav[data-open="true"] .mnav-panel { transform: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.mnav-close { inline-size: 44px; block-size: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: none; display: inline-grid; place-items: center; color: var(--ink); cursor: pointer; }
.mnav-links { padding: 10px 8px; display: grid; }
.mnav-links a { display: flex; align-items: center; justify-content: space-between; min-block-size: 48px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.mnav-links a:hover, .mnav-links a:focus-visible { background: var(--paper-2); outline: none; }
.mnav-links a:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.mnav-links a[aria-current="page"] { color: var(--brand-600); background: var(--brand-50); font-weight: 600; }
.mnav-group { padding: 6px 20px 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.mnav-cta { margin-block-start: auto; padding: 16px; display: grid; gap: 10px; border-block-start: 1px solid var(--line); }
body.ds-lock { overflow: hidden; }

/* --------------------------------------------------------------- footer -- */
/* the bottom padding grows with the cookie bar (--cookie-h) so the legal row is never hidden under it */
.site-footer { background: var(--night); color: var(--snow-2); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) calc(28px + var(--cookie-h, 0px)); }
/* phones: room for the floating WhatsApp / accessibility buttons below the last footer row */
@media (max-width: 640px) { .site-footer { padding-block-end: calc(84px + var(--cookie-h, 0px)); } }
.site-footer a { color: var(--snow-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; border-radius: 4px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
.footer-about p { margin: 14px 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--snow-3); max-inline-size: 34ch; }
.footer-col h3 { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: #fff; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-col li a { display: inline-flex; align-items: center; min-block-size: 32px; font-size: 0.93rem; }
.footer-bottom {
  margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid var(--night-line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--snow-3);
}
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-bottom .legal-links a { color: var(--snow-3); min-block-size: 32px; display: inline-flex; align-items: center; }
.site-footer .brand { color: #fff; }
.footer-contact { display: grid; gap: 6px; margin-block-start: 18px; font-size: 0.93rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px; }
.footer-hours { color: var(--snow-3); font-size: 0.88rem; }
.footer-linkbtn { background: none; border: 0; padding: 0; min-block-size: 32px; color: var(--snow-3); font: inherit; font-size: 0.85rem; cursor: pointer; }
.footer-linkbtn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-linkbtn:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ backdrops -- */
.bg-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.theme-light .bg-grid, .theme-light-2 .bg-grid { background-image: linear-gradient(rgba(12, 17, 29, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 17, 29, 0.05) 1px, transparent 1px); }
.bg-spot { position: absolute; pointer-events: none; z-index: 0; inset-inline: 0; inset-block-start: 0; block-size: 80%;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(90, 75, 242, 0.22), transparent 70%), radial-gradient(ellipse 35% 35% at 70% 20%, rgba(34, 197, 221, 0.10), transparent 70%);
}
.above { position: relative; z-index: 1; }
.hairline { block-size: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------------------------------------------------------------- tabs -- */
.tabs-list {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs-list::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1; flex: none;
  min-block-size: 40px; padding: 0 16px; border-radius: 9px; border: 0;
  background: transparent; color: var(--fg-3); font-weight: 600; font-size: 0.93rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: color 180ms var(--ease);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tabs-ink {
  position: absolute; z-index: 0; inset-block: 4px; left: 0;
  inline-size: var(--ink-w, 0px); transform: translateX(var(--ink-x, 0px));
  border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 320ms var(--ease-out), inline-size 320ms var(--ease-out);
}
.theme-dark .tabs-ink { background: var(--night-4); box-shadow: 0 0 0 1px var(--night-line-2); }
.tab-panel[hidden] { display: none !important; }
.tab-panel.is-entering { animation: ds-fade-up 420ms var(--ease-out) both; }

/* ----------------------------------------------------------- accordion -- */
.acc { border-block-end: 1px solid var(--border); }
.acc:first-child { border-block-start: 1px solid var(--border); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 4px; min-block-size: 56px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: var(--fg);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.acc summary .acc-icon {
  flex: none; inline-size: 28px; block-size: 28px; border-radius: 8px;
  display: inline-grid; place-items: center; color: var(--fg-3);
  border: 1px solid var(--border); transition: transform 240ms var(--ease), background-color 200ms var(--ease);
}
.acc[open] summary .acc-icon { transform: rotate(45deg); color: var(--accent-fg); background: var(--accent-soft); border-color: transparent; }
.acc-body { padding: 0 4px 22px; color: var(--fg-2); line-height: 1.7; max-inline-size: 70ch; }
.acc-body p { margin: 0 0 10px; }
.acc-body p:last-child { margin: 0; }

/* -------------------------------------------------------------- marquee -- */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; inline-size: max-content; animation: ds-marquee var(--marquee-dur, 38s) linear infinite; }
.marquee-group { display: flex; flex: none; align-items: center; gap: 48px; padding-inline-end: 48px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--fg-3); font-weight: 600; font-size: 1.02rem; }
.marquee-item svg { inline-size: 22px; block-size: 22px; opacity: 0.9; }
@keyframes ds-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* --------------------------------------------------------------- tables -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.ds-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; font-size: 0.95rem; }
.ds-table th, .ds-table td { padding: 14px 18px; text-align: start; border-block-end: 1px solid var(--border); vertical-align: middle; }
.ds-table thead th { font-weight: 600; color: var(--fg); background: var(--surface-2); font-size: 0.9rem; }
.ds-table tbody tr:last-child td { border-block-end: 0; }
.ds-table td { color: var(--fg-2); }
.ds-table .hl { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.ds-table .yes, .ds-table .no { display: inline-flex; align-items: center; gap: 6px; }
.ds-table .yes { color: var(--green-700); }
.theme-dark .ds-table .yes { color: #6ce9a6; }
.ds-table .no { color: var(--fg-3); }
/* .table-wrap.table-stack: under 640px every row becomes a card (the row header, then
   one "column name / value" line per cell), so all columns are readable on a phone
   instead of one visible column and a hidden sideways scroll. Each td carries its
   column name in data-label; the explicit ARIA roles in the markup keep the table
   semantics that display:block would otherwise drop in some browsers. */
@media (max-width: 640px) {
  .table-wrap.table-stack { overflow: visible; border: 0; border-radius: 0; background: none; }
  .table-stack .ds-table { min-inline-size: 0; }
  .table-stack .ds-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-stack .ds-table tbody { display: grid; gap: 12px; }
  .table-stack .ds-table tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .table-stack .ds-table tbody th[scope="row"] { display: block; position: static; padding: 14px 16px 8px; border: 0; background: none; font-family: var(--font-head); font-size: 1.02rem; }
  .table-stack .ds-table td { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 16px; border-block-start: 1px solid var(--border); border-block-end: 0; line-height: 1.5; }
  .table-stack .ds-table td::before { content: attr(data-label); content: attr(data-label) / ""; font-size: 0.82rem; font-weight: 600; color: var(--fg-3); }
  .table-stack .ds-table td.hl::before { color: var(--accent-fg); }
  /* large text: the label sits above its value */
  .a11y-font-lg .table-stack .ds-table td { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- callouts -- */
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-2); }
.callout strong { color: var(--fg); }
.kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-2); background: var(--surface-2); }

/* ------------------------------------------------------- product mockups --
   Stylised product UI used for hero / feature visuals. Always dark,
   whatever the section theme, because the real app is dark. */
.mock, .phone {
  --m-bg: #0d1220; --m-panel: #121829; --m-panel-2: #182036; --m-line: rgba(255, 255, 255, 0.07);
  --m-fg: #e9edf5; --m-fg-2: #aab3c3; --m-fg-3: #7d879a;
}
.phone { color: var(--m-fg); font-size: 0.875rem; line-height: 1.5; text-align: start; }
.mock {
  color: var(--m-fg); background: var(--m-bg);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
  box-shadow: var(--shadow-dark);
  overflow: hidden; position: relative; font-size: 0.875rem; line-height: 1.5;
  text-align: start;
}
.theme-light .mock, .theme-light-2 .mock { box-shadow: 0 40px 80px -30px rgba(16, 24, 40, 0.45), 0 0 0 1px rgba(16, 24, 40, 0.06); }
.mock-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-block-end: 1px solid var(--m-line); background: #0b101c; }
.mock-dots { display: inline-flex; gap: 6px; direction: ltr; }
.mock-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #2a3247; display: block; }
.mock-url { flex: 1; max-inline-size: 320px; margin-inline: auto; padding: 4px 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: var(--m-fg-3); font-size: 0.75rem; text-align: center; direction: ltr; }
.mock-body { display: grid; grid-template-columns: 200px 270px minmax(0, 1fr); min-block-size: 440px; }
.mock-side { border-inline-end: 1px solid var(--m-line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: #0b101c; }
.mock-side .m-label { font-size: 0.7rem; color: var(--m-fg-3); padding: 10px 10px 6px; font-weight: 600; }
.mock-side .m-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--m-fg-2); font-size: 0.82rem; }
.mock-side .m-item.on { background: rgba(255, 255, 255, 0.06); color: var(--m-fg); }
.mock-side .m-item .m-count { margin-inline-start: auto; font-size: 0.72rem; color: var(--m-fg-3); font-variant-numeric: tabular-nums; }
.mock-side .m-item svg { inline-size: 16px; block-size: 16px; }
.mock-list { border-inline-end: 1px solid var(--m-line); display: grid; align-content: start; }
.mock-list .m-search { margin: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--m-line); color: var(--m-fg-3); font-size: 0.8rem; }
.m-conv { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 14px; border-block-start: 1px solid var(--m-line); align-items: center; }
.m-conv.on { background: rgba(90, 75, 242, 0.12); box-shadow: inset -2px 0 0 var(--brand); }
.m-avatar { inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: #fff; grid-row: span 2; position: relative; }
.m-avatar .m-ch { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; inline-size: 15px; block-size: 15px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--m-bg); }
.m-avatar .m-ch svg { inline-size: 8px; block-size: 8px; }
.m-name { font-weight: 600; font-size: 0.84rem; color: var(--m-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-time { font-size: 0.7rem; color: var(--m-fg-3); font-variant-numeric: tabular-nums; }
.m-preview { grid-column: 2 / 4; font-size: 0.78rem; color: var(--m-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.m-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
.m-tag.ai { color: #c4bdfd; background: rgba(90, 75, 242, 0.2); }
.m-tag.lead { color: #6ce9a6; background: rgba(18, 183, 106, 0.16); }
.m-tag.human { color: #fec84b; background: rgba(245, 165, 36, 0.15); }
.mock-main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden; position: relative; background: var(--m-bg); }
.m-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--m-line); }
.m-head .m-title { font-weight: 600; font-size: 0.9rem; }
.m-head .m-sub { font-size: 0.74rem; color: var(--m-fg-3); }
.m-head .m-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.m-btn { font-size: 0.74rem; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--m-line); color: var(--m-fg-2); background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.m-call { margin: 14px 16px 4px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(90, 75, 242, 0.14), rgba(90, 75, 242, 0.06)); border: 1px solid rgba(90, 75, 242, 0.28); display: flex; align-items: center; gap: 12px; }
.m-call .m-call-ico { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; flex: none; }
.m-call .m-call-ico svg { inline-size: 16px; block-size: 16px; color: #fff; }
.m-call .m-call-t { font-size: 0.82rem; font-weight: 600; }
.m-call .m-call-s { font-size: 0.72rem; color: var(--m-fg-2); }
.m-timer { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--m-fg-2); direction: ltr; }
.wave { display: inline-flex; align-items: center; gap: 2px; block-size: 22px; direction: ltr; }
.wave i { display: block; inline-size: 3px; border-radius: 2px; background: var(--cyan); block-size: 100%; transform: scaleY(0.3); animation: ds-wave 1.1s ease-in-out infinite; transform-origin: center; will-change: transform; }
.wave i:nth-child(2n) { animation-delay: -0.35s; }
.wave i:nth-child(3n) { animation-delay: -0.7s; background: #8b9dff; }
.wave i:nth-child(4n) { animation-delay: -0.15s; }
.wave i:nth-child(5n) { animation-delay: -0.55s; }
@keyframes ds-wave { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
.wave.paused i { animation-play-state: paused; }
.m-thread { flex: 1; padding: 12px 16px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; min-block-size: 0;
 }
/* the oldest bubble fades out at the top instead of being cut in half
   (not on threads that hold a toast: the mask would hide it) */
.m-thread:not(:has(.m-toast)) { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px); mask-image: linear-gradient(to bottom, transparent 0, #000 32px); }
.m-msg { max-inline-size: 82%; padding: 9px 12px; border-radius: 12px; font-size: 0.84rem; line-height: 1.5; }
.m-msg .m-who { display: block; font-size: 0.72rem; font-weight: 600; margin-block-end: 2px; opacity: 0.75; }
.m-msg.cust { align-self: flex-start; background: var(--m-panel-2); border-start-start-radius: 4px; color: var(--m-fg); }
.m-msg.bot { align-self: flex-end; background: rgba(90, 75, 242, 0.22); border: 1px solid rgba(90, 75, 242, 0.3); border-start-end-radius: 4px; color: #eceafe; }
.m-msg.sys { align-self: center; max-inline-size: 100%; font-size: 0.72rem; color: var(--m-fg-3); background: transparent; padding: 2px 8px; }
.m-typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(90, 75, 242, 0.16); }
.m-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #b9b2fb; animation: ds-typing 1.2s infinite ease-in-out; }
.m-typing i:nth-child(2) { animation-delay: 0.15s; }
.m-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.m-lead { align-self: stretch; margin-block-start: 4px; border: 1px solid rgba(18, 183, 106, 0.32); background: rgba(18, 183, 106, 0.08); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.m-lead .m-lead-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #a6f4c5; }
.m-lead dt { font-size: 0.68rem; color: var(--m-fg-3); }
.m-lead dd { margin: 0; font-size: 0.8rem; color: var(--m-fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-toast {
  position: absolute; inset-block-end: 18px; inset-inline-end: 18px; z-index: 3;
  display: flex; align-items: center; gap: 10px; max-inline-size: 300px;
  padding: 10px 14px; border-radius: 12px;
  background: #ffffff; color: var(--ink); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  font-size: 0.8rem; line-height: 1.4;
}
.m-toast b { display: block; font-size: 0.82rem; }
.m-toast .m-toast-ico { inline-size: 30px; block-size: 30px; border-radius: 8px; display: grid; place-items: center; background: #e8f7ef; color: var(--green-700); flex: none; }
.m-composer { margin: 0 16px 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(255, 255, 255, 0.03); color: var(--m-fg-3); font-size: 0.8rem; display: flex; align-items: center; gap: 10px; }
.m-composer .m-ai-chip { margin-inline-start: auto; font-size: 0.7rem; color: #c4bdfd; }
/* sequence states (driven by ds.js [data-seq]): items appear in order and
   push older ones up, like a real chat; .gone removes transient items.
   data-at="0" items are pre-filled: on screen from the first paint (before
   ds.js runs or the mock scrolls into view) and never re-animated on a loop,
   so an above-the-fold mockup is never empty.
   No layout shift (CLS) while a sequence plays: a chat thread (.m-thread /
   .wa-chat) in a playing sequence keeps its size from the first paint (size
   containment), and ds.js moves its bubbles into .seq-track inside a
   zero-height .seq-pin at the bottom of the thread. The track is laid out
   from the pin downwards (a new bubble never moves the older ones) and lifted
   by its own height with a transform. A transient item that leaves while
   later ones are shown is .held (hidden, keeps its box) and the older items
   slide over it with `translate`. The oldest bubbles leave at the top, as in a
   real chat. A list that adds items between others (calendar slots, rows) is
   .keep-space (on the [data-seq] or a container in it): every item keeps its
   box from the first paint and only fades in or out. */
html.js [data-seq]:not(.seq-static) .seq-item:not(.on):not(.held):not([data-at="0"]):not(.keep-space *) { display: none; }
html.js .keep-space[data-seq]:not(.seq-static) .seq-item:not(.on):not([data-at="0"]),
html.js [data-seq]:not(.seq-static) .keep-space .seq-item:not(.on):not([data-at="0"]) { visibility: hidden; }
html.js [data-seq] .seq-item.on:not([data-at="0"]) { animation: ds-fade-up 420ms var(--ease-out) both; }
html.js [data-seq] .seq-item.gone:not(.keep-space *) { display: none; }
html.js [data-seq] .seq-item.held, html.js .keep-space .seq-item.gone { visibility: hidden; }
html.js :is(.m-thread, .wa-chat):is([data-seq]:not(.seq-static), [data-seq]:not(.seq-static) *) { contain: size; }
.seq-pin { flex: none; block-size: 0; margin-block-start: auto; gap: inherit; align-items: inherit; }
.seq-track { display: flex; flex-direction: column; gap: inherit; align-items: inherit; transform: translateY(-100%); }
@media (max-width: 1100px) { .mock-body { grid-template-columns: 240px minmax(0, 1fr); } .mock-side { display: none; } }
@media (max-width: 720px) { .mock-body { grid-template-columns: minmax(0, 1fr); min-block-size: 420px; } .mock-list { display: none; } .mock-url { display: none; } .m-toast { inset-inline: 12px; max-inline-size: none; } .m-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* phone frame (mobile-style mockups) */
.phone {
  inline-size: min(320px, 100%); margin-inline: auto;
  border-radius: 40px; padding: 10px; background: #05070d;
  box-shadow: var(--shadow-dark), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
.phone-screen { border-radius: 31px; overflow: hidden; background: #0d1220; min-block-size: 560px; display: flex; flex-direction: column; position: relative; }
.phone-notch { position: absolute; inset-block-start: 8px; inset-inline: 0; margin-inline: auto; inline-size: 96px; block-size: 26px; border-radius: 16px; background: #05070d; z-index: 2; }

/* --------------------------------------------------------------- motion -- */
@keyframes ds-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-scale { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .reveal-scale.is-in { opacity: 1; transform: none; }
.tilt-in { transform-origin: 50% 0%; }
@media (prefers-reduced-motion: no-preference) {
  html.js .tilt-in { transform: perspective(1600px) rotateX(var(--tilt, 0deg)) translateY(var(--tilt-y, 0px)); will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html.js .reveal, html.js .reveal-scale { opacity: 1; transform: none; }
  .marquee-track { animation: none; inline-size: auto; justify-content: center; }
  .marquee-group { flex-wrap: wrap; justify-content: center; gap: 14px 32px; padding: 0; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
@media print {
  html.js .reveal, html.js .reveal-scale { opacity: 1 !important; transform: none !important; }
  .site-header, .mnav, .a11y-fab, .wa-fab, #tz-cookie-banner { display: none !important; }
}

/* ------------------------------------------------------- floating actions -- */
.wa-fab {
  position: fixed; inset-block-end: calc(20px + var(--cookie-h, 0px)); inset-inline-end: 20px; z-index: 55;
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 180ms var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.wa-fab svg { inline-size: 28px; block-size: 28px; }
@media (max-width: 640px) {
  .wa-fab { inline-size: 48px; block-size: 48px; inset-block-end: calc(14px + var(--cookie-h, 0px)); inset-inline-end: 14px; }
  .wa-fab svg { inline-size: 25px; block-size: 25px; }
  .a11y-fab { inline-size: 44px; block-size: 44px; inset-block-end: calc(16px + var(--cookie-h, 0px)); inset-inline-start: 14px; }
}

/* -------------------------------------------- a11y widget + cookie banner --
   Injected on every page by ds.js (IS 5568 / Israeli privacy law). */
.a11y-fab {
  position: fixed; inset-block-end: calc(20px + var(--cookie-h, 0px)); inset-inline-start: 20px; z-index: 56;
  inline-size: 48px; block-size: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: #fff; border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  transition: transform 180ms var(--ease);
}
.a11y-fab:hover { transform: scale(1.05); }
.a11y-fab:focus-visible { outline: 3px solid #f5a524; outline-offset: 3px; }
.a11y-fab svg { inline-size: 24px; block-size: 24px; }
.a11y-backdrop { position: fixed; inset: 0; z-index: 57; background: rgba(9, 13, 23, 0.35); opacity: 0; pointer-events: none; transition: opacity 180ms; }
.a11y-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.a11y-panel {
  position: fixed; inset-block-end: calc(80px + var(--cookie-h, 0px)); inset-inline-start: 20px; z-index: 58;
  inline-size: 340px; max-inline-size: calc(100vw - 32px); max-block-size: min(72vh, 620px); overflow-y: auto;
  padding: 16px; border-radius: 16px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.4;
}
.a11y-panel[aria-hidden="true"] { display: none; }
@media (max-width: 480px) {
  .a11y-panel { inset-inline: 0; inset-block-end: 0; inline-size: 100%; max-inline-size: 100%; border-radius: 18px 18px 0 0; max-block-size: 85vh; }
}
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block-end: 10px; margin-block-end: 6px; border-block-end: 1px solid var(--line); }
.a11y-head h2 { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.a11y-close { inline-size: 44px; block-size: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.a11y-close:focus-visible, .a11y-opt:focus-visible, .a11y-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.a11y-sec { margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.a11y-grid.three { grid-template-columns: repeat(3, 1fr); }
.a11y-opt {
  min-block-size: 44px; padding: 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-align: center;
}
.a11y-opt:hover { border-color: var(--ink-3); }
.a11y-opt[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.a11y-reset { margin-block-start: 12px; inline-size: 100%; min-block-size: 44px; border-radius: 10px; cursor: pointer; border: 1px solid #f3c6c7; background: #fff5f5; color: #b42318; font: inherit; font-weight: 600; }
.a11y-foot { margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.a11y-foot a { color: var(--brand-600); }
.a11y-reading-guide { position: fixed; inset-inline: 0; block-size: 40px; pointer-events: none; z-index: 9998; display: none; background: rgba(90, 75, 242, 0.12); border-block: 2px solid rgba(90, 75, 242, 0.6); }
body.a11y-reading-guide-on .a11y-reading-guide { display: block; }
body.a11y-contrast > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.a11y-reading-guide) { filter: contrast(1.45) !important; }
body.a11y-grayscale > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.a11y-reading-guide) { filter: grayscale(100%) !important; }
body.a11y-inverted > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.a11y-reading-guide) { filter: invert(1) hue-rotate(180deg) !important; }
body.a11y-grayscale.a11y-inverted > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.a11y-reading-guide) { filter: grayscale(100%) invert(1) hue-rotate(180deg) !important; }
body.a11y-grayscale.a11y-contrast > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.a11y-reading-guide) { filter: grayscale(100%) contrast(1.45) !important; }
body.a11y-readable, body.a11y-readable * { font-family: Arial, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.08em !important; }
body.a11y-highlight-links a { background: #fef08a !important; color: #000 !important; text-decoration: underline !important; outline: 2px solid #ca8a04 !important; }
body.a11y-pause-animation *, body.a11y-pause-animation *::before, body.a11y-pause-animation *::after { animation-play-state: paused !important; animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
body.a11y-pause-animation .reveal, body.a11y-pause-animation .reveal-scale { opacity: 1 !important; transform: none !important; }
body.a11y-big-cursor, body.a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 4 l32 20 -16 4 -8 16 z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/></svg>") 4 4, auto !important; }
body.a11y-stop-sound video, body.a11y-stop-sound audio { display: none !important; }

.cookie-bar {
  position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 70;
  max-inline-size: 760px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px 18px; border-radius: 14px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem; line-height: 1.5;
}
.cookie-bar p { margin: 0; flex: 1 1 320px; color: var(--ink-2); }
.cookie-bar strong { color: var(--ink); }
.cookie-bar a { color: var(--brand-600); }
.cookie-bar .row { gap: 8px; }
.cookie-bar .btn { --btn-h: 44px; }

/* ------------------------------------------------------------ pricing --
   Plan cards + billing switch, shared by the home page and /pricing. */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button {
  min-block-size: 40px; padding: 0 18px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--fg-3); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg .save { font-size: 0.75rem; font-weight: 600; color: var(--green-700); background: #e8f7ef; padding: 2px 7px; border-radius: 6px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1000px) { .plans { grid-template-columns: minmax(0, 1fr); max-inline-size: 540px; margin-inline: auto; } }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-xs); }
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg); }
.plan-flag { position: absolute; inset-block-start: -12px; inset-inline-start: 24px; padding: 4px 11px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.4; }
.plan-kicker { font-size: 0.85rem; font-weight: 500; color: var(--fg-3); }
.plan-name { margin: 2px 0 8px; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.plan-desc { margin: 0; color: var(--fg-2); font-size: 0.95rem; line-height: 1.55; min-block-size: 3.1em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 2px; }
.plan-price .amt { font-family: var(--font-head); font-size: clamp(2.3rem, 2rem + 1vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; direction: ltr; }
.plan-price .per { color: var(--fg-3); font-size: 0.95rem; }
.plan-note { margin: 0; min-block-size: 1.5em; font-size: 0.85rem; color: var(--fg-3); }
.plan-meta { display: grid; gap: 9px; margin: 18px 0; padding: 16px 0; border-block: 1px solid var(--border); }
.plan-meta div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.93rem; color: var(--fg-2); }
.plan-meta strong { color: var(--fg); font-weight: 600; text-align: end; }
.plan .check-list { margin-block-end: 22px; }
.plan-more { font-size: 0.9rem; margin-block: auto 22px; }
.plan-more ~ .plan-cta { margin-block-start: 0; }
.plan-cta { margin-block-start: auto; display: grid; gap: 10px; }
.plan-fine { margin: 0; font-size: 0.82rem; color: var(--fg-3); text-align: center; }
.plan-wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-block-start: 20px; padding: 24px 28px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.plan-wide .plan-name { margin: 0; }

/* ------------------------------------------------------- content pages --
   Page hero band (industries / use-cases / blog / legal), breadcrumbs and
   long-form article typography (.prose). */
.page-hero { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem)) clamp(3rem, 2rem + 4vw, 5rem); }
.page-hero .ds-lead { max-inline-size: 680px; margin-block-start: 18px; }
.page-hero .row { margin-block-start: 28px; }
.page-hero.center { text-align: center; }
.page-hero.center .ds-lead { margin-inline: auto; }
.page-hero.center .row { justify-content: center; }
.page-hero-plain { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
/* One H1 size for every page hero, and one product-hero grid for the industry and
   use-case pages: copy beside a mockup, the copy column the wider one so the two
   CTAs sit side by side on desktop. The copy helpers are wrapped in :where() so a
   page's own CSS can still restyle them (the centered hubs do). */
.page-hero .ds-h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-grid h1 .kw { display: block; font-family: var(--font-sans); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem); font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--fg-3); margin-block-end: 14px; }
.hero-grid h1 .ds-mark { display: block; }
.hero-grid .ds-lead { max-inline-size: 600px; }
:where(.page-hero) .hero-fine { margin: 16px 0 0; font-size: 0.9rem; color: var(--fg-3); }
:where(.page-hero) .hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--fg-2); font-size: 0.93rem; }
:where(.page-hero) .hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
:where(.page-hero) .hero-proof svg { color: var(--brand-300); }
@media (max-width: 520px) { .page-hero .row .btn { inline-size: 100%; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.875rem; color: var(--fg-3); }
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: 0.6; }
.crumbs [aria-current="page"] { color: var(--fg-2); }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--fg-3); font-size: 0.9rem; margin-block-start: 16px; }

.prose { color: var(--fg-2); font-size: 1.075rem; line-height: 1.8; max-inline-size: 72ch; }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { font-family: var(--font-head); color: var(--fg); font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin-block-start: 2.2em; }
.prose h3 { font-family: var(--font-head); color: var(--fg); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.35; font-weight: 600; margin-block-start: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-block-start: 0.6em; }
.prose p { margin: 0; }
.prose p + p { margin-block-start: 1em; }
.prose a { color: var(--accent-fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0; }
.prose li + li { margin-block-start: 0.45em; }
.prose li::marker { color: var(--fg-3); }
.prose blockquote { margin: 1.6em 0; padding: 4px 18px; border-inline-start: 3px solid var(--brand); color: var(--fg); font-size: 1.1rem; }
.prose hr { border: 0; block-size: 1px; background: var(--border); margin: 2.4em 0; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; }
.prose thead th { color: var(--fg); font-weight: 600; background: var(--surface-2); }
.prose .table-wrap { margin-block: 1.6em; }
.prose .table-wrap table { min-inline-size: 560px; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }
.prose .callout { margin-block: 1.6em; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { margin-block-start: 8px; font-size: 0.875rem; color: var(--fg-3); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.article-aside { position: sticky; inset-block-start: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
@media (max-width: 1000px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .article-aside { position: static; } }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.93rem; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--fg-2); text-decoration: none; border-inline-start: 2px solid transparent; }
.toc a:hover { background: var(--surface-2); color: var(--fg); }
.cta-band { border-radius: 20px; padding: clamp(28px, 4vw, 48px); background: var(--night); color: var(--snow); position: relative; overflow: hidden; }
.cta-band .ds-h2, .cta-band .ds-h3 { color: #fff; }
.cta-band .ds-lead, .cta-band .ds-body { color: var(--snow-2); }
.cta-band .row { margin-block-start: 22px; }
/* first column of comparison tables stays visible while the rest scrolls */
.ds-table tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); font-weight: 600; color: var(--fg); }
.ds-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------- tech polish --
   Familiar "product site" details: a light edge on product windows, a
   pointer-following spotlight on dark cards, and a beam on step lines. */
.mock::before {
  content: ""; position: absolute; inset-inline: 12%; inset-block-start: 0; block-size: 1px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(169, 159, 251, 0.85), rgba(34, 197, 221, 0.7), transparent);
}
.theme-dark .card.spot, .theme-dark .int-item.spot, .stats .stat.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity 260ms var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(90, 75, 242, 0.16), transparent 45%);
}
.spot:hover::after { opacity: 1; }
.spot { --spot-border: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 159, 251, 0.55), transparent 60%); }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
    background: var(--spot-border); opacity: 0; transition: opacity 260ms var(--ease);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .spot:hover::before { opacity: 1; }
}
.beam { position: relative; overflow: hidden; }
.beam::after {
  content: ""; position: absolute; inset-block: 0; inline-size: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: ds-beam 3.6s var(--ease) infinite;
}
@keyframes ds-beam { from { transform: translateX(120%); } to { transform: translateX(-560%); } }
.mono { font-family: var(--font-mono); font-size: 0.8em; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .beam::after { animation: none; display: none; } }
@media (hover: none) { .spot::after, .spot::before { display: none; } }
/* names in mockups can be Latin ("Daniel K."): let each one pick its own direction */
.m-name, .kan-card b, .m-title, .m-lead dd { unicode-bidi: plaintext; }

/* ------------------------------------------------------ verified badges --
   Meta verification (Tech Provider + Business Verification + official
   WhatsApp Business Platform). Text badges only - no Meta logo artwork. */
.verify-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.verify {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 12px;
  border: 1px solid var(--border-2); background: var(--surface);
  color: var(--fg); text-decoration: none; text-align: start;
}
.theme-dark .verify { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
.verify-ico {
  inline-size: 32px; block-size: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #0866ff, #5a4bf2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.verify-ico svg { inline-size: 18px; block-size: 18px; }
.verify b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.verify small { display: block; font-size: 0.76rem; line-height: 1.3; color: var(--fg-3); }
a.verify:hover { border-color: var(--accent-fg); }
a.verify:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.meta-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 40px; align-items: center; }
@media (max-width: 860px) { .meta-card { grid-template-columns: minmax(0, 1fr); } }
.meta-card .verify-row { justify-content: flex-start; }
.footer-verified { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--night-line-2); color: var(--snow-2); font-size: 0.82rem; }
.footer-verified svg { color: #6aa8ff; }
/* footer: the Meta Tech Provider credential, as a prominent badge */
.footer-verify {
  display: flex; align-items: center; gap: 12px; inline-size: fit-content; max-inline-size: 100%;
  margin-block-start: 20px; padding: 12px 18px 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 102, 255, 0.16), rgba(90, 75, 242, 0.16));
  border: 1px solid rgba(106, 168, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff; text-decoration: none;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.site-footer a.footer-verify:hover { color: #fff; text-decoration: none; border-color: rgba(106, 168, 255, 0.85); transform: translateY(-1px); }
.footer-verify .verify-ico { inline-size: 40px; block-size: 40px; border-radius: 11px; }
.footer-verify .verify-ico svg { inline-size: 22px; block-size: 22px; }
.footer-verify > span { min-inline-size: 0; }
/* one line when it fits, balanced wrap at large text sizes (never pushes the page wider) */
.footer-verify b { display: block; font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: #fff; text-wrap: balance; }
.footer-verify small { display: block; margin-block-start: 2px; font-size: 0.8rem; line-height: 1.35; color: var(--snow-2); }

/* accessibility menu text size 130% and up, on phones: buttons and label / value rows
   wrap instead of pushing the page wider than the screen */
@media (max-width: 640px) {
  .a11y-font-lg .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; max-inline-size: 100%; }
  .a11y-font-lg .ex-rows div { flex-wrap: wrap; }
  .a11y-font-lg .ex-rows dd { white-space: normal; }
  html.a11y-font-lg .badge { white-space: normal; max-inline-size: 100%; }
}

/* ------------------------------------------------- QA pass 2026-10-15 -- */
.nw { white-space: nowrap; }
.card-title, .plan-name, .prose h2, .prose h3 { text-wrap: balance; }
.card-text, .prose p, .prose li { text-wrap: pretty; }

/* hero copy is the LCP element: it paints at once and only slides in
   (an opacity fade held LCP back by about a second) */
html.js :is(.hero, .page-hero) .reveal { opacity: 1; transition: transform 640ms var(--ease-out); transition-delay: var(--d, 0ms); }

/* a scrolled dark header stays dark over light sections */
.site-header.theme-dark.is-scrolled { background: color-mix(in srgb, var(--night) 94%, transparent); }
.site-footer { border-block-start: 1px solid var(--night-line); }

/* tablets: a 3-card grid never leaves one card alone on its row */
@media (min-width: 681px) and (max-width: 1024px) {
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .site-header .nav-actions .btn-sm { --btn-h: 44px; }
}

@media (max-width: 640px) {
  /* product tabs: every tab visible (2 per row), 44px targets */
  .tabs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; overflow: visible; }
  .tabs-list .tab { justify-content: center; min-block-size: 44px; padding: 0 10px; }
  .tabs-list button.tab:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .tabs-list .tabs-ink { display: none; }
  .tabs-list .tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
  .theme-dark .tabs-list .tab[aria-selected="true"] { background: var(--night-4); box-shadow: 0 0 0 1px var(--night-line-2); }

  /* compact cookie bar: two equal buttons, less of the first screen */
  .cookie-bar { inset-inline: 8px; inset-block-end: 8px; padding: 12px 14px; gap: 10px; font-size: 0.84rem; }
  .cookie-bar p { flex-basis: 100%; }
  .cookie-bar .row { inline-size: 100%; flex-wrap: nowrap; }
  .cookie-bar .btn { flex: 1; }

  /* the WhatsApp button waits until the hero is scrolled past */
  .wa-fab { transition: transform 180ms var(--ease), opacity 180ms var(--ease), visibility 0s linear 0s; }
  html:not(.fab-in) .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: transform 180ms var(--ease), opacity 180ms var(--ease), visibility 0s linear 180ms; }
  .a11y-font-lg .plan-price { flex-wrap: wrap; }
}

/* ------------------------------------------ IS 5568 audit 2026-10-25 -- */
/* Reflow (WCAG 1.4.10): at 320 CSS px (a 1280px window zoomed to 400%, with a
   classic scrollbar) a long CTA label wraps inside its button instead of
   running off the screen. Single-line buttons keep their size (min-block-size). */
@media (max-width: 400px) {
  .btn:not(.btn-sm) { white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; max-inline-size: 100%; }
}

/* Pause / play for a looping product mockup (ds.js sequences, WCAG 2.2.2).
   Sits over the mockup's top corner, outside its role="img". */
.seq-host { position: relative; }
.seq-pause {
  position: absolute; z-index: 5; inset-block-start: 6px; inset-inline-end: 10px;
  inline-size: 36px; block-size: 36px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(9, 13, 23, 0.78); color: #fff; border: 1px solid rgba(255, 255, 255, 0.34);
  transition: background-color 160ms var(--ease);
}
.seq-pause::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* 44px touch target */
.seq-pause:hover { background: rgba(9, 13, 23, 0.95); }
.seq-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--brand); }
.seq-pause svg { inline-size: 14px; block-size: 14px; }
.seq-pause .i-play, .seq-pause[aria-pressed="true"] .i-pause { display: none; }
.seq-pause[aria-pressed="true"] .i-play { display: block; }
/* the phone frame is centered and at most 320px wide: sit inside its rounded screen corner */
.seq-pause.on-phone { inset-block-start: 16px; inset-inline-end: calc(50% - min(160px, 50%) + 16px); }
.seq-paused *, .seq-paused *::before, .seq-paused *::after { animation-play-state: paused !important; }
.seq-paused .seq-item { animation: none !important; } /* the final frame shows at once, never frozen mid-fade */
/* the accessibility menu's "עצירת אנימציות" already stops every mockup */
body.a11y-pause-animation .seq-pause { display: none; }

/* scrollable tables made focusable by ds.js (scrollRegions) */
.table-wrap[data-ds-scroll]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Windows high-contrast (forced colors): states shown only by a fill colour
   get an outline, so "pressed" / "selected" stays visible. */
@media (forced-colors: active) {
  .a11y-opt[aria-pressed="true"], .seg button[aria-pressed="true"], .tab[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
  .seq-pause { border-color: ButtonText; }
}