@font-face {
  font-family: 'lg-roi-Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiZTNzWNf72cWk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'lg-roi-Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiYTNzWNf72cWk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'lg-roi-Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72cWk.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'lg-roi-Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzWNf72cWk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'lg-roi-Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNzWNf72.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmS-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xnj-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xnx-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmQ-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmR-HYoEoeyxMI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'lg-roi-Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmf-HYoEoey.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'lg-roi-Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/Yq6W-LOTXCb04q32xlpwtsZfvRIkSYZH.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'lg-roi-Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/Yq6W-LOTXCb04q32xlpwv8ZfvRIkSYZH.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'lg-roi-Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/Yq6W-LOTXCb04q32xlpwtMZfvRIkSYZH.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'lg-roi-Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/Yq6W-LOTXCb04q32xlpwtcZfvRIkSYZH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'lg-roi-Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/Yq6W-LOTXCb04q32xlpwu8ZfvRIkSQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

/* Lingrow, on the site brand kit: #BCF2B3, #1A1A2E, #3C8701, #979897, black, white.
   Unbounded and Onest, Noto Sans Hebrew for Hebrew. Grounds hard-cut, never drift. */
:root {
  --lime: #BCF2B3; --navy: #1A1A2E; --green: #3C8701; --grey: #979897; --ink-black: #0B0B14; --white: #fff;
  --green-text: #2F6B01;

  --sc-canvas: var(--navy); --sc-surface: #24243c; --sc-ink: #fff; --sc-ink-soft: #C9CAD6;
  --sc-accent: var(--lime); --sc-accent-ink: #000;
  --sc-font-display: 'lg-roi-Unbounded', 'lg-roi-Noto Sans Hebrew', system-ui, sans-serif;
  --sc-font-text: 'lg-roi-Onest', 'lg-roi-Noto Sans Hebrew', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-track-tight: -0.03em; --sc-track-snug: -0.02em;
  --bar-h: 68px;
  --r-card: 20px;
}
:lang(he) { --sc-track-tight: -0.015em; --sc-track-snug: -0.01em; }
html { scroll-padding-top: calc(var(--bar-h) + 16px); }
body { background: var(--ink-black); }
h1, h2, h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 800; letter-spacing: var(--sc-track-tight); text-wrap: balance; }
:lang(en) h1, :lang(en) h2 { font-weight: 700; }
h3 { letter-spacing: var(--sc-track-snug); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.eyebrow { font-size: var(--sc-t-sm); font-weight: 600; color: var(--lime); margin-block-end: var(--sc-4); }
.skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 10px 18px; background: var(--lime); color: #000; border-radius: 999px; font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* ------------------------------------------------- buttons, as in the kit -- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; border: 2px solid transparent; transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--lime); color: #000; border-color: var(--lime); }
.btn--secondary { background: #000; color: var(--lime); border-color: var(--lime); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #fff; border-color: #fff; }
  .btn--secondary:hover { background: var(--lime); color: #000; }
}
.btn[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------ session bar -- */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding-inline: clamp(1rem, 3vw, 2.5rem); background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .1); }
.bar__mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; }
.bar__icon { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 12px; }
.bar__icon img { width: 30px; height: 30px; }
.bar__word { font-family: 'lg-roi-Unbounded', sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; }
.bar__nav { display: flex; gap: var(--sc-5); flex: 1; justify-content: center; }
.bar__nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 2px; border-block-end: 2px solid transparent; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { border-block-end-color: var(--lime); } }
.bar__end { display: flex; align-items: center; gap: var(--sc-3); flex: none; }
.bar__cta { min-height: 42px; padding: 6px 20px; font-size: .95rem; }
.bar__lang { display: flex; padding: 3px; gap: 2px; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; }
.bar__lang a { min-width: 36px; height: 30px; display: grid; place-items: center; padding-inline: 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.bar__lang a[aria-current] { background: var(--lime); color: #000; }
.bar__pair { position: relative; }
.bar__pair summary { display: flex; align-items: center; gap: 7px; height: 42px; padding-inline: 14px; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; font-size: .86rem; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.bar__pair summary::-webkit-details-marker, .bar__menu summary::-webkit-details-marker { display: none; }
.bar__live, .phone__live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.bar__pop { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; width: min(340px, 86vw); display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; background: var(--ink-black); border: 1px solid rgb(255 255 255 / .2); border-radius: var(--r-card); box-shadow: var(--sc-e3); }
.bar__menu { display: none; }
.bar__menu summary { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; list-style: none; }
.bar__sheet { position: fixed; inset: var(--bar-h) 0 auto; display: grid; padding: 12px var(--sc-gutter) 20px; background: var(--navy); box-shadow: var(--sc-e3); }
.bar__sheet a { padding: 14px 0; font-size: 1.1rem; font-weight: 600; text-decoration: none; border-block-end: 1px solid rgb(255 255 255 / .12); }

.chip { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out); }
.chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #000; }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]) { border-color: var(--lime); } }

/* ------------------------------------------------------------------- hero -- */
.hero__stage { --mx: 0; --my: 0; background: var(--navy); overflow: hidden; isolation: isolate; }
.hero__plate { position: absolute; inset: -3%; z-index: 0; translate: calc(var(--mx) * -5px) calc(var(--my) * -3px + var(--sc-p, 0) * -1.4svh); scale: calc(1 + var(--sc-p, 0) * .07); transform-origin: 62% 70%; }
.hero__plate img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
   linear-gradient(to bottom, rgb(26 26 46 / .94) 0, rgb(26 26 46 / .86) 44%, rgb(26 26 46 / .1) 66%),
   linear-gradient(to right, rgb(26 26 46 / .55), rgb(26 26 46 / 0) 62%); }
.hero__copy { position: absolute; z-index: 2; inset-block-start: calc(var(--bar-h) + clamp(1rem, 4svh, 3rem)); left: clamp(1.25rem, 5vw, 5.5rem); width: min(60vw, 76rem); }
.hero h1 { font-size: clamp(2.5rem, min(5.7vw, 10.4svh), 6.6rem); line-height: 1.06; color: #fff; }
.hero h1 span { display: block; }
:lang(en) .hero h1 { font-size: clamp(2.1rem, min(4.2vw, 7.8svh), 4.9rem); line-height: 1.08; }
.hero__sub { margin-block-start: var(--sc-4); max-width: 30rem; color: #E4E5EE; font-size: var(--sc-t-lg); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-block-start: var(--sc-5); }
.hero__speaker { position: absolute; z-index: 3; inset-block-end: 0; right: 11vw; height: min(86svh, 64vw); width: auto; max-width: none; transform-origin: 50% 100%; translate: calc(var(--mx) * -10px) 0; scale: calc(1 + var(--sc-p, 0) * .11); filter: drop-shadow(0 18px 34px rgb(11 11 20 / .5)); }
.hero__near { position: absolute; z-index: 6; inset-block-end: -2svh; right: -1vw; height: min(30svh, 22vw); width: auto; max-width: none; transform-origin: 100% 100%; translate: calc(var(--mx) * -22px) calc(var(--sc-p, 0) * 8svh); scale: calc(1.02 + var(--sc-p, 0) * .24); }
.hero__phone { position: absolute; z-index: 5; left: clamp(1.25rem, 6vw, 6rem); inset-block-end: 0; translate: calc(var(--mx) * -14px) calc(30% - var(--sc-p, 0) * 30%); }
/* Hebrew runs toward the foreman's raised hand, so the text under the headline steps clear of it. */
html[dir="rtl"] .hero__sub, html[dir="rtl"] .hero__actions { margin-inline-start: 13vw; }
/* English copy sits on the phone's side of the frame, so the phone moves to the gap beside it. */
html[dir="ltr"] .hero__phone { left: calc(clamp(1.25rem, 5vw, 5.5rem) + 31rem); }
html[dir="ltr"] .hero__illus { left: 60vw; }
.hero__illus { position: absolute; z-index: 7; inset-block-end: 10px; left: 50%; font-size: .72rem; color: #fff; background: rgb(11 11 20 / .72); padding: 2px 10px; border-radius: 999px; }

.phone { width: clamp(236px, 19vw, 280px); background: #05050A; padding: 9px; border-radius: 36px; box-shadow: 0 2px 0 rgb(255 255 255 / .16) inset, 0 28px 60px -12px rgb(11 11 20 / .75); color: #10101C; }
.phone__screen { background: #F8FAF7; border-radius: 28px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 9px; min-height: min(62svh, 500px); overflow: hidden; }
.phone__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .68rem; font-weight: 600; color: #4A4B5A; }
.phone__live { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--green-text); }
.phone__live i { background: var(--green); }
.phone__room { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.phone__pair { font-size: .8rem; font-weight: 700; }
.phone__lines { display: grid; gap: 7px; }
.phone__lines li { background: #fff; border-radius: 14px; padding: 8px 11px; box-shadow: 0 1px 3px rgb(26 26 46 / .12); }
.phone__lines b { display: block; font-size: .92rem; line-height: 1.32; font-weight: 700; }
.phone__lines small { display: block; margin-block-start: 2px; font-size: .74rem; line-height: 1.3; color: #4A4B5A; }
.phone__lines li[data-line="2"] { opacity: clamp(.0, calc((var(--sc-p, 0) - .3) * 6), 1); }
.phone__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.phone__chips .chip { min-height: 30px; min-width: 40px; padding: 2px 8px; color: #10101C; border-color: #979897; font-size: .74rem; }
.phone__chips .chip[aria-pressed="true"] { background: #000; border-color: #000; color: var(--lime); }
.phone__speak { margin-block-start: auto; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; font-weight: 600; color: #4A4B5A; }
.phone__speak i { width: 30px; height: 30px; border-radius: 50%; background: var(--green); }

/* ------------------------------------------------------------------ quiet -- */
.quiet { background: var(--ink-black); color: #fff; padding-block: clamp(7rem, 26svh, 15rem); }
.quiet__wrap { max-width: 56rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.quiet__line { font-size: var(--sc-t-xl); line-height: 1.5; font-weight: 500; }
.quiet__ask { margin-block-start: var(--sc-6); color: var(--sc-ink-soft); }
.quiet__ask a { color: var(--lime); font-weight: 600; margin-inline-start: var(--sc-2); }

/* ------------------------------------------------------- the room: the peak -- */
.room__stage { background: var(--ink-black); overflow: hidden; isolation: isolate; color: #fff; }
.room__said { position: absolute; inset: 0; z-index: 2; display: grid; justify-items: center; align-content: center; gap: var(--sc-4); padding-inline: var(--sc-gutter); text-align: center; pointer-events: none; }
.room__said p { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-3xl); line-height: 1.12; letter-spacing: var(--sc-track-tight); max-width: 18ch; text-wrap: balance; }
.room__said .room__who { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: 0; max-width: none; }
.room__photo { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.room__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.room__scrim { position: absolute; inset: 0; z-index: 2; opacity: 0; background: linear-gradient(to top, rgb(11 11 20 / .92), rgb(11 11 20 / 0) 34%); }
.room__bubbles { position: absolute; inset: 0; z-index: 3; }
.bubble { position: absolute; max-width: min(250px, 46vw); padding: 9px 14px; background: #fff; color: #000; border-radius: 16px; font-weight: 700; font-size: clamp(.84rem, 1.15vw, 1.02rem); line-height: 1.3; box-shadow: var(--sc-e2); opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity; }
.bubble::after { content: ''; position: absolute; inset-block-start: 100%; left: var(--tail, 50%); width: 14px; height: 9px; margin-left: -7px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bubble--yours { background: var(--lime); }
.room__title { position: absolute; z-index: 4; inset-block-end: clamp(1.25rem, 5svh, 3rem); inset-inline: var(--sc-gutter); font-size: var(--sc-t-2xl); line-height: 1.12; color: #fff; opacity: 0; pointer-events: none; }
.room__flood { position: absolute; inset: 0; z-index: 5; background: var(--lime); color: #000; clip-path: circle(0 at 50% 50%); visibility: hidden; display: grid; align-items: center; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 1.5rem; }
.room__yours { max-width: 90rem; margin-inline: auto; width: 100%; display: grid; gap: clamp(.8rem, 2.6svh, 1.6rem); }
.room__sentence { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.4rem, min(7.6vw, 14svh), 8rem); line-height: 1.08; letter-spacing: var(--sc-track-tight); text-wrap: balance; }
.room__sentence:is([lang="ar"], [lang="th"], [lang="hi"], [lang="zh"]) { font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; letter-spacing: 0; line-height: 1.22; }
.room__tag { font-size: var(--sc-t-lg); font-weight: 600; }
.room__pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); }
.room__pick > span { font-weight: 700; }
.room__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.room__chips .chip { border-color: #000; color: #000; }
.room__chips .chip[aria-pressed="true"] { background: #000; border-color: #000; color: var(--lime); }
.room__note { font-size: .8rem; color: #1E2A1B; }

/* -------------------------------------------------------------- how it works -- */
.how { background: #fff; color: #10101C; padding-block: var(--sc-section); --sc-accent: var(--green); }
.how .eyebrow { color: var(--green-text); }
.how h2 { font-size: var(--sc-t-2xl); line-height: 1.14; max-width: 24ch; }
.how__sub { margin-block-start: var(--sc-4); font-size: var(--sc-t-lg); color: #33343F; max-width: 40rem; }
.how__note { margin-block-start: var(--sc-7); font-size: var(--sc-t-xs); color: #4A4B5A; max-width: 60ch; }
.routes { display: grid; gap: var(--sc-3); }
.routes li { display: flex; align-items: center; gap: var(--sc-4); padding-block-end: var(--sc-3); border-block-end: 1px solid #D5D6DC; }
.routes li:last-child { border-block-end: 0; }
.routes__art { flex: none; width: 112px; height: 112px; display: grid; place-items: center; }
.routes__art img { width: 100%; height: 100%; object-fit: contain; }
.routes__art--link { background: var(--navy); color: var(--lime); border-radius: var(--r-card); }
.routes b { display: block; font-size: var(--sc-t-base); line-height: 1.3; }
.routes small { display: block; margin-block-start: 2px; font-size: var(--sc-t-sm); color: #4A4B5A; }
.join-demo { width: min(100%, 280px); box-shadow: 0 2px 0 rgb(255 255 255 / .2) inset; }
.phone__screen--chat { min-height: 500px; }
.device.device--natural { max-width: 280px; box-shadow: 0 2px 0 rgb(255 255 255 / .2) inset; }
.device.device--natural img { aspect-ratio: auto; height: auto; }
.chat { padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgb(26 26 46 / .12); }
.chat b { display: block; font-size: 1rem; line-height: 1.32; }
.chat small { display: block; margin-block-start: 4px; font-size: .76rem; line-height: 1.35; color: #4A4B5A; }
.chat em { display: block; font-style: normal; font-size: .72rem; font-weight: 600; margin-block-end: 2px; color: #1E2A1B; }
.chat--out { background: var(--lime); margin-inline-start: 14px; }
.chat--out small { color: #1E2A1B; }
.chat--in { margin-inline-end: 14px; }
.how__steps { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-block-start: var(--sc-8); align-items: start; }
.step { display: grid; gap: var(--sc-5); }
.step--1 { grid-column: 1 / span 4; }
.step--2 { grid-column: 5 / span 4; margin-block-start: clamp(1.5rem, 4vw, 4rem); }
.step--3 { grid-column: 9 / span 4; margin-block-start: clamp(3rem, 8vw, 8rem); }
.step__n { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-3xl); line-height: 1; color: var(--green); }
.step h3 { font-size: var(--sc-t-xl); line-height: 1.16; margin-block: var(--sc-3) var(--sc-2); }
.device { margin: 0; max-width: 300px; background: #05050A; padding: 8px; border-radius: 34px; box-shadow: 0 2px 0 rgb(255 255 255 / .2) inset, 0 24px 50px -16px rgb(26 26 46 / .55); }
.device img { width: 100%; height: auto; border-radius: 26px; aspect-ratio: 760 / 1400; object-fit: cover; object-position: 50% 0; }

/* ------------------------------------------------------------------ platform -- */
.plat { background: var(--navy); color: #fff; padding-block: var(--sc-section); }
.plat h2 { font-size: var(--sc-t-2xl); line-height: 1.14; max-width: 26ch; }
.plat__sub { margin-block-start: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.plat__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); margin-block: var(--sc-7) var(--sc-8); padding-block: var(--sc-5); border-block: 1px solid rgb(255 255 255 / .2); }
.stat__num { display: block; font-family: 'lg-roi-Unbounded', sans-serif; font-weight: 700; font-size: var(--sc-t-2xl); line-height: 1.1; color: var(--lime); text-align: start; }
html[dir="rtl"] .stat__num { text-align: right; }
.plat__stats li > span { display: block; margin-block-start: var(--sc-1); color: var(--sc-ink-soft); }
.stat--word { align-self: center; }
.stat--word b { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); line-height: 1.24; color: var(--lime); letter-spacing: var(--sc-track-snug); text-wrap: balance; }
.plat__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.feat { padding-block: clamp(2rem, 7svh, 4.5rem); border-block-end: 1px solid rgb(255 255 255 / .16); opacity: .5; transition: opacity 200ms var(--sc-ease-out); }
.feat.is-on { opacity: 1; }
.feat h3 { font-size: var(--sc-t-xl); line-height: 1.2; }
.feat.is-on h3 { color: var(--lime); }
.feat p { margin-block-start: var(--sc-3); max-width: 46ch; color: #E4E5EE; }
.feat__inline { display: none; }
.plat__rest { margin-block-start: var(--sc-5); }
.plat__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sc-2) clamp(1.5rem, 5vw, 5rem); align-items: baseline; padding-block: clamp(1.5rem, 4svh, 2.5rem); border-block-start: 1px solid rgb(255 255 255 / .16); }
.plat__row h3 { font-size: var(--sc-t-xl); line-height: 1.2; color: var(--lime); }
.plat__row p { color: #E4E5EE; max-width: 54ch; }
.plat__media { position: sticky; inset-block-start: calc(var(--bar-h) + 6svh); }
.device--stack { position: relative; aspect-ratio: 760 / 1400; max-width: none; }
.device--stack img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); opacity: 0; transition: opacity 220ms var(--sc-ease-out); aspect-ratio: auto; }
.device--stack img.is-on { opacity: 1; }

/* ------------------------------------------------------------------- sectors -- */
.sectors__stage { background: var(--green); color: #fff; overflow: hidden; display: flex; align-items: center; }
.rail { --rail-over: 0px; --rail-dir: -1; display: flex; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; padding: calc(var(--bar-h) + .5rem) var(--sc-gutter) 1rem; width: max-content; transform: translate3d(calc(var(--sc-p, 0) * var(--rail-over) * var(--rail-dir)), 0, 0); will-change: transform; }
:lang(he) .rail { --rail-dir: 1; }
.rail__lead { width: clamp(19rem, 34vw, 30rem); align-self: center; }
.rail__lead h2 { font-size: var(--sc-t-2xl); line-height: 1.14; }
.rail__lead p { margin-block-start: var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.45; }
.rail__tags { font-size: var(--sc-t-sm) !important; }
.sector { width: clamp(18rem, 33vw, 29rem); background: var(--navy); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; padding-block-end: var(--sc-5); box-shadow: var(--sc-e2); }
.sector__media { position: relative; aspect-ratio: 16 / 9; background: #000; flex: none; overflow: hidden; }
.sector__media video, .sector__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sector > p, .sector > h3 { padding-inline: var(--sc-5); }
.sector__tags { margin-block-start: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.sector h3 { font-size: var(--sc-t-lg); margin-block: var(--sc-2); line-height: 1.25; }
.sector h3 a { text-decoration: none; }
.sector > p:not([class]) { font-size: var(--sc-t-sm); line-height: 1.5; color: #E4E5EE; }
.sector__links { margin-block-start: auto; padding-block-start: var(--sc-4); display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); font-size: var(--sc-t-sm); font-weight: 600; }
.sector__links a { color: var(--lime); }
.sector__demo { color: #fff !important; }
.rail__end { width: clamp(16rem, 24vw, 22rem); align-self: center; }
.rail__end h3 { font-size: var(--sc-t-xl); }
.rail__end ul { margin-block: var(--sc-4); display: grid; gap: var(--sc-2); font-weight: 600; }
.rail__end p { font-size: var(--sc-t-sm); }

/* ---------------------------------------------------- shared discovery styles -- */
.lw-discovery-wrap { max-width: 76rem; margin-inline: auto; }
.lw-sector-eyebrow { font-size: var(--sc-t-sm); font-weight: 600; color: var(--green-text); margin-block-end: var(--sc-3); }
.lw-discovery h2 { font-size: var(--sc-t-2xl); line-height: 1.14; }
.lw-discovery-lead { margin-block: var(--sc-3) var(--sc-6); color: #4A4B5A; }

/* ----------------------------------------------------------------- solutions -- */
.lw-discovery { background: var(--ink-black); color: #fff; padding-block: var(--sc-section); padding-inline: var(--sc-gutter); }
.lw-discovery .lw-discovery-lead { color: var(--sc-ink-soft); }
.lw-discovery-definition { margin-block-start: var(--sc-5); max-width: 64ch; font-size: var(--sc-t-lg); line-height: 1.55; }
.lw-discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); margin-block: var(--sc-5) var(--sc-8); }
.lw-discovery-card { display: block; padding-block: var(--sc-4); border-block-end: 1px solid rgb(255 255 255 / .18); text-decoration: none; }
.lw-discovery-card h3, .lw-discovery-card h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-base); font-weight: 700; letter-spacing: 0; margin: 0; }
.lw-discovery-card p { margin-block-start: var(--sc-1); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lw-discovery-card:hover h3, .lw-discovery-card:hover h2 { color: var(--lime); }
.lw-discovery-faq { max-width: 56rem; margin-block-start: var(--sc-8); }
.lw-discovery-faq details { border-block-end: 1px solid rgb(255 255 255 / .18); padding-block: var(--sc-4); }
.lw-discovery-faq summary { cursor: pointer; font-weight: 700; font-size: var(--sc-t-lg); line-height: 1.4; }
.lw-discovery-faq details p { margin-block-start: var(--sc-3); line-height: 1.7; color: #E4E5EE; }
.lw-discovery-text-link { color: var(--lime); font-weight: 600; display: inline-block; margin-block-start: var(--sc-4); }

/* --------------------------------------------------------- close: join screen -- */
.close { background: var(--lime); color: #000; padding-block: clamp(5rem, 12vw, 10rem); padding-inline: var(--sc-gutter); --sc-accent: #000; }
.close__wrap { max-width: 82rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.close h2 { font-size: var(--sc-t-3xl); line-height: 1.06; }
.close__say > p { margin-block-start: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 36rem; }
.close__mail { font-size: var(--sc-t-base) !important; font-weight: 600; }
.join { background: var(--navy); color: #fff; border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--sc-e3); --sc-accent: var(--lime); }
.join__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); margin-block-end: var(--sc-5); }
.join__head .phone__live { font-family: var(--sc-font-text); font-size: .8rem; color: var(--lime); }
.join__head .phone__live i { background: var(--lime); }
.lw-contact-form { display: grid; gap: var(--sc-4); }
.lw-contact-form label:not(.join__consent) { display: grid; gap: 6px; font-weight: 600; font-size: var(--sc-t-sm); }
.lw-contact-form label i { color: var(--lime); font-style: normal; }
.lw-contact-form input:not([type="checkbox"]), .lw-contact-form select { width: 100%; min-height: 50px; padding-inline: 16px; border-radius: 12px; border: 1.5px solid #979897; background: #fff; color: #10101C; font-size: 1rem; }
.lw-contact-form input::placeholder { color: #5E5F6C; }
.lw-contact-form :is(input, select):focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.lw-contact-form em { font-style: normal; font-size: .85rem; color: var(--lime); font-weight: 600; }
.lw-contact-form em:empty { display: none; }
.join__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--sc-t-sm); line-height: 1.45; }
.join__consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.join__send-error { color: var(--lime); font-weight: 600; }
.join__privacy { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: center; }
.lw-contact-form .btn { width: 100%; white-space: normal; }
.join__ok { display: grid; gap: var(--sc-3); justify-items: start; color: #fff; }
.join__ok[hidden] { display: none; }
.join__ok svg { color: var(--lime); }
.join__ok h3 { font-size: var(--sc-t-xl); }

/* -------------------------------------------------------------------- footer -- */
.foot { background: var(--ink-black); color: #fff; padding: var(--sc-8) var(--sc-gutter) var(--sc-6); }
.foot__top { max-width: 82rem; margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sc-6); }
.foot__brand p { margin-block: var(--sc-4); color: var(--sc-ink-soft); max-width: 22rem; }
.foot__li { color: var(--lime); font-weight: 600; }
.foot h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 700; letter-spacing: 0; color: var(--sc-ink-soft); margin-block-end: var(--sc-3); }
.foot li { margin-block-end: var(--sc-2); }
.foot li a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot li a:hover { color: var(--lime); text-decoration: underline; } }
.foot__base { max-width: 82rem; margin: var(--sc-7) auto 0; padding-block-start: var(--sc-4); border-block-start: 1px solid rgb(255 255 255 / .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); padding-inline-end: 64px; }

/* ------------------------------------------------------------- content pages -- */
.page-content, .page-legal, .page-404 { background: #fff; color: #10101C; --sc-accent: var(--green); --sc-canvas: #fff; }
.page-head { background: var(--navy); color: #fff; padding: calc(var(--bar-h) + clamp(2.5rem, 7vw, 5.5rem)) var(--sc-gutter) clamp(2.5rem, 6vw, 4.5rem); --sc-accent: var(--lime); }
.page-head__in { max-width: 62rem; margin-inline: auto; }
.page-head h1 { font-size: var(--sc-t-2xl); line-height: 1.14; margin-block: var(--sc-4); }
:lang(he) .page-head h1 { font-size: clamp(2.3rem, 1.7rem + 3vw, 4rem); }
.lw-content-breadcrumbs { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lw-content-lead { font-size: var(--sc-t-lg); line-height: 1.5; color: #E4E5EE; max-width: 46rem; }
.page-body { max-width: 62rem; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) var(--sc-gutter); }
.page-body h2 { font-size: var(--sc-t-xl); line-height: 1.22; margin-block: var(--sc-7) var(--sc-3); }
.page-body h3 { font-size: var(--sc-t-lg); }
.page-body > section:first-child h2 { margin-block-start: 0; }
.page-body p, .page-body li { line-height: 1.75; overflow-wrap: anywhere; max-width: 68ch; }
.page-body p { margin-block-end: var(--sc-3); }
.page-body a { text-decoration: underline; text-underline-offset: .2em; }
.lw-scenario { background: var(--navy); color: #fff; padding: var(--sc-6); border-radius: var(--r-card); margin-block: var(--sc-7); }
.lw-scenario .lw-sector-eyebrow { color: var(--lime); }
.lw-scenario h2 { margin-block-start: 0; }
.lw-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--sc-5); }
.lw-room-card { padding-block: var(--sc-4); border-block-start: 2px solid var(--green); }
.lw-room-card h3 { margin-block-end: var(--sc-2); }
.lw-industry-video { width: 100%; height: auto; border-radius: var(--r-card); margin-block: var(--sc-4); background: #000; }
.lw-case-context { font-size: var(--sc-t-sm); color: #4A4B5A; }
.lw-content-button { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 24px; border-radius: 999px; background: #000; color: var(--lime) !important; font-weight: 700; text-decoration: none !important; margin-inline-end: var(--sc-3); }
.page-body .lw-discovery-faq details { border-block-end-color: #C9CAD6; }
.page-body .lw-discovery-faq { margin-block-start: var(--sc-7); }
.page-body .lw-discovery-faq details p { color: #2E2F3C; margin-block-end: 0; }
.page-body .lw-discovery-lead { color: #4A4B5A; }
.page-body .lw-discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 var(--sc-5); margin-block: 0 var(--sc-6); }
.page-body .lw-discovery-card { border-block-end-color: #C9CAD6; color: #10101C; text-decoration: none; }
.page-body .lw-discovery-card h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); margin: 0; }
.page-body .lw-discovery-card p { color: #4A4B5A; margin: var(--sc-2) 0 0; }
.page-body .lw-discovery-card:hover h2 { color: var(--green-text); }
.lw-content-cta { background: var(--lime); color: #000; padding: var(--sc-6); border-radius: var(--r-card); margin-block: var(--sc-7); }
.lw-content-cta h2 { margin-block-start: 0; }
.lw-content-cta a { color: #000; }
.page-body nav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sc-1) var(--sc-5); font-size: var(--sc-t-sm); }
.lw-legal-content h3 { font-size: var(--sc-t-lg); margin-block: var(--sc-6) var(--sc-2); }
.lw-legal-content h4 { font-size: var(--sc-t-base); margin-block: var(--sc-4) var(--sc-2); }
.lw-legal-content ul { list-style: disc; padding-inline-start: 1.2rem; margin-block-end: var(--sc-3); }
.lw-legal-updated { color: #4A4B5A; font-size: var(--sc-t-sm); }
.notfound { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: var(--sc-4); text-align: center; padding: var(--sc-gutter); background: var(--navy); color: #fff; }
.notfound h1 { font-size: var(--sc-t-3xl); }

/* ----------------------------------------------- cookie and accessibility UI -- */
.consent { position: fixed; z-index: 80; inset-block-end: 12px; inset-inline: 12px; display: flex; justify-content: center; pointer-events: none; }
.consent__card { pointer-events: auto; width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-4) var(--sc-5); align-items: center; padding: var(--sc-5); background: var(--navy); color: #fff; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--r-card); box-shadow: var(--sc-e3); --sc-accent: var(--lime); }
.consent__card h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-lg); font-weight: 700; letter-spacing: 0; margin-block-end: var(--sc-1); }
.consent__card p { font-size: var(--sc-t-sm); color: #E4E5EE; }
.consent__card a { color: var(--lime); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); justify-content: flex-end; }
.consent__actions .btn { min-height: 44px; font-size: .92rem; padding-inline: 18px; }
.btn--plain { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--sc-4); background: rgb(11 11 20 / .72); }
.modal[hidden] { display: none; }
.modal__box { width: min(620px, 100%); max-height: calc(100svh - 2rem); overflow: auto; background: #fff; color: #10101C; border-radius: var(--r-card); padding: var(--sc-6); --sc-accent: var(--green); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); margin-block-end: var(--sc-3); }
.modal__head h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: 0; }
.modal__x { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #E9EAEE; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.modal__box p { font-size: var(--sc-t-sm); line-height: 1.55; }
.opt { display: flex; gap: var(--sc-3); align-items: flex-start; padding: var(--sc-3); margin-block-start: var(--sc-3); background: #F2F3F0; border-radius: 12px; }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.opt strong { display: block; }
.opt span { font-size: var(--sc-t-sm); line-height: 1.5; color: #2E2F3C; }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-block-start: var(--sc-5); }
.modal__actions .btn--plain { color: #10101C; border-color: #10101C; }
.modal__box .btn--primary { background: #000; color: var(--lime); border-color: #000; }
.a11y-trigger { position: fixed; z-index: 70; inset-block-end: 14px; inset-inline-end: 14px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--lime); background: #000; color: var(--lime); cursor: pointer; box-shadow: var(--sc-e2); }
.a11y-size { display: flex; align-items: center; gap: var(--sc-2); margin-block: var(--sc-3); }
.a11y-size span { flex: 1; font-weight: 700; }
.a11y-size button, .a11y-toggle, .a11y-stack button, .a11y-stack a { min-height: 44px; border: 1.5px solid #6E6F7C; border-radius: 12px; background: #fff; color: #10101C; font-weight: 600; cursor: pointer; padding-inline: 12px; }
.a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-2); }
.a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-2); text-align: start; }
.a11y-toggle[aria-pressed="true"] { background: #000; border-color: #000; color: var(--lime); }
.a11y-toggle small { font-weight: 500; font-size: .76rem; }
.a11y-stack { display: grid; gap: var(--sc-2); margin-block-start: var(--sc-3); }
.a11y-stack a { display: grid; place-items: center; text-decoration: none; }
.reading-guide { position: fixed; inset-inline: 0; height: 3.2rem; margin-block-start: -1.6rem; z-index: 85; pointer-events: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .4); inset-block-start: 50%; }

/* Accessibility classes, same names and storage key as the previous site. */
.lw-a11y-high-contrast body, .lw-a11y-high-contrast section, .lw-a11y-high-contrast [data-sc-stage], .lw-a11y-high-contrast .bar, .lw-a11y-high-contrast .foot, .lw-a11y-high-contrast .join, .lw-a11y-high-contrast .sector, .lw-a11y-high-contrast .page-head, .lw-a11y-high-contrast .room__flood { background: #000 !important; color: #fff !important; }
.lw-a11y-high-contrast :is(p, h1, h2, h3, li, label, span, dt, dd, small, summary, output, a) { color: #fff !important; }
.lw-a11y-high-contrast a { text-decoration: underline !important; }
.lw-a11y-high-contrast .btn { background: #000 !important; color: #fff !important; border-color: #fff !important; }
.lw-a11y-high-contrast :is(.hero__plate, .hero__scrim, .room__photo, .room__scrim) { display: none !important; }
.lw-a11y-high-contrast :is(.phone__screen, .phone__lines li, .bubble) { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
.lw-a11y-high-contrast :is(.modal__box, .opt) { background: #000 !important; color: #fff !important; }
.lw-a11y-high-contrast .modal__box :is(button, a) { background: #000 !important; color: #fff !important; border-color: #fff !important; }
.lw-a11y-highlight-links :is(a, button, summary, input, select) { outline: 2px solid #FFEB3B !important; outline-offset: 2px; }
.lw-a11y-highlight-links a { text-decoration: underline !important; }
.lw-a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; }
.lw-a11y-text-spacing :is(p, li, label, summary) { line-height: 1.9 !important; letter-spacing: .06em !important; word-spacing: .16em !important; }
.lw-a11y-big-cursor, .lw-a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 13h-8l4 7-3 1.6-4-7-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important; }

/* --------------------------------- still mode: OS setting or the page's control -- */
.is-still *, .is-still *::before, .is-still *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
.is-still [data-sc-act] { height: auto !important; }
.is-still [data-sc-stage] { position: relative !important; top: auto !important; height: auto !important; }
.is-still :is([data-sc-in], [data-sc-stagger] > *, [data-sc-reveal], [data-sc-cue]) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.is-still .hero__stage { height: 100svh !important; min-height: 620px; }
.is-still :is(.hero__plate, .hero__speaker, .hero__near) { translate: none !important; scale: 1 !important; }
.is-still .hero__phone { translate: 0 42% !important; }
.is-still .phone__lines li[data-line="2"] { opacity: 1; }
.is-still .room__said { display: none; }
.is-still .room__stage { display: grid; }
.is-still .room__photo, .is-still .room__scrim { opacity: 1 !important; }
.is-still .room__photo { position: relative; height: 100svh; }
.is-still .room__scrim { height: 100svh; inset-block-end: auto; }
.is-still .room__bubbles { height: 100svh; }
.is-still .bubble { opacity: 1 !important; transform: none !important; }
.is-still .room__title { opacity: 1 !important; inset-block-end: auto; inset-block-start: calc(100svh - 6rem); }
.is-still .room__flood { position: relative; inset: auto; clip-path: none !important; visibility: visible !important; min-height: 80svh; }
.is-still .sectors__stage { overflow-x: auto !important; display: block; scroll-snap-type: x proximity; }
.is-still .rail { transform: none !important; }
.is-still .rail > * { scroll-snap-align: start; }
.is-still .feat { opacity: 1; }

/* ----------------------------------------------------------------------- mid -- */
@media (max-width: 1100px) and (min-width: 861px) {
  .hero__speaker { height: min(68svh, 52vw); right: 2vw; }
  .hero__near { display: none; }
  html[dir="rtl"] .hero__sub, html[dir="rtl"] .hero__actions { margin-inline-start: 6vw; }
  .hero__phone { translate: 0 calc(50% - var(--sc-p, 0) * 50%); }
}
@media (max-width: 1180px) {
  .bar__pair { display: none; }
  .bar__nav { gap: var(--sc-4); }
}
@media (max-width: 860px) {
  :root { --bar-h: 60px; }
  .bar__nav { display: none; }
  .bar__menu { display: block; }
  .bar__cta { display: none; }
  .bar__icon { width: 36px; height: 36px; }
  .bar__word { font-size: 1.08rem; }

  /* Hero is recomposed for a phone: type on top, foreman at the trailing edge,
     phone at the leading edge. No type passes behind the subject here. */
  .hero__plate { inset: 0; transform-origin: 60% 80%; }
  .hero__plate img { object-position: 50% 100%; }
  .hero__scrim { background: linear-gradient(to bottom, rgb(26 26 46 / .96) 0, rgb(26 26 46 / .92) 52%, rgb(26 26 46 / .1) 72%); }
  .hero__copy { inset-inline: var(--sc-gutter); left: var(--sc-gutter); right: var(--sc-gutter); width: auto; inset-block-start: calc(var(--bar-h) + 1rem); }
  .hero h1 { font-size: clamp(2.05rem, min(9.6vw, 5.4svh), 3.1rem); line-height: 1.08; }
  :lang(en) .hero h1 { font-size: clamp(1.75rem, min(7.6vw, 4.5svh), 2.6rem); }
  .eyebrow { margin-block-end: var(--sc-2); }
  .hero__sub { font-size: .98rem; line-height: 1.42; margin-block-start: var(--sc-2); }
  html[dir="rtl"] .hero__sub, html[dir="rtl"] .hero__actions { margin-inline-start: 0; }
  .hero__actions { margin-block-start: var(--sc-3); gap: var(--sc-2); }
  .hero__actions .btn { min-height: 46px; padding-inline: 18px; font-size: .95rem; }
  .hero__speaker { right: -4vw; height: 40svh; z-index: 4; }
  .hero__near { display: none; }
  .hero__phone { left: 4vw; width: 58vw; max-width: 230px; translate: 0 calc(60% - var(--sc-p, 0) * 46%); }
  html[dir="ltr"] .hero__phone { left: 4vw; }
  /* In Hebrew the accessibility button sits bottom left, so the phone takes the right and
     the foreman the left, flipped to keep him facing it. */
  html[dir="rtl"] .hero__phone { left: auto; right: 4vw; }
  html[dir="rtl"] .hero__speaker { right: auto; left: -4vw; transform: scaleX(-1); }
  .room__title { padding-inline-end: 56px; }
  .phone__screen { min-height: 330px; padding: 10px; gap: 6px; }
  .phone__lines b { font-size: .84rem; }
  .hero__illus { inset-block-end: 8px; }
  html[dir="ltr"] .hero__illus { left: auto; right: 76px; }
  html[dir="rtl"] .hero__illus { left: 76px; right: auto; }

  .quiet { padding-block: clamp(5rem, 18svh, 8rem); }
  .room__sentence { font-size: clamp(2rem, min(11vw, 7.4svh), 3.6rem); }
  .room__chips .chip { min-height: 38px; padding-inline: 10px; font-size: .8rem; }
  .room__tag { font-size: 1rem; }
  .room__title { font-size: 1.6rem; }
  .bubble { font-size: .84rem; padding: 7px 10px; }

  .how__steps { display: block; }
  .step { margin-block: 0 var(--sc-8) !important; }
  .device { max-width: 240px; }
  .routes__art { width: 92px; height: 92px; }
  .join-demo { width: min(100%, 270px); }
  .phone__screen--chat { min-height: 420px; }
  .plat__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat__grid { display: block; }
  .plat__row { grid-template-columns: minmax(0, 1fr); }
  .plat__media { display: none; }
  .feat { opacity: 1; }
  .feat h3 { color: var(--lime); }
  .feat__inline { display: block; width: min(62vw, 240px); height: auto; margin-block-start: var(--sc-4); border-radius: 22px; border: 6px solid #05050A; }
  .sectors__stage { align-items: stretch; }
  .rail { padding-block-start: calc(var(--bar-h) + .75rem); align-items: center; gap: 1rem; }
  .rail__lead { width: 84vw; }
  .sector { width: 82vw; max-height: calc(100svh - var(--bar-h) - 1.5rem); }
  .sector__media { aspect-ratio: 16 / 8; }
  .rail__end { width: 76vw; }
  .lw-discovery-grid { grid-template-columns: minmax(0, 1fr); }
  .close__wrap { grid-template-columns: minmax(0, 1fr); }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  .foot__base { flex-direction: column; }
  .consent__card { grid-template-columns: minmax(0, 1fr); padding: var(--sc-4); }
  .consent__actions { justify-content: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .consent__actions .btn { padding-inline: 8px; white-space: normal; }
  .consent__actions .btn--primary { grid-column: 1 / -1; }
  .a11y-grid { grid-template-columns: minmax(0, 1fr); }
  .is-still .hero__phone { translate: 0 50% !important; }
  .is-still .hero__speaker { translate: none !important; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__sub { font-size: .9rem; line-height: 1.35; }
  .hero h1 { font-size: clamp(1.8rem, 8.6vw, 2.4rem); }
  .hero__speaker { height: 30svh; }
  .hero__phone { translate: 0 calc(72% - var(--sc-p, 0) * 52%); }
}
@media (min-width: 861px) and (max-height: 720px) {
  .hero__sub { font-size: var(--sc-t-base); }
  .hero__phone { translate: calc(var(--mx) * -14px) calc(70% - var(--sc-p, 0) * 60%); }
}

/* Colours of the original Lingrow site, taken from its design system (tokens/colors.css)
   and section styles. Loaded last. Colour only: no size, spacing or layout lives here.
   Remove this file from the page heads to return to the brand-kit palette. */
:root {
  --lime: #BCF2B3;          /* --green-mint: the original's accent on dark grounds */
  --navy: #0E1512;          /* --slate-900 */
  --ink-black: #0E1512;
  --green: #0B6E4F;         /* --forest-700, --brand */
  --green-text: #0B6E4F;
  --forest-500: #12855F;
  --forest-900: #084C37;
  --tint-050: #F2F8F5;
  --tint-100: #E7F4EE;
  --slate-700: #3A453F;
  --slate-500: #6B776F;
  --slate-400: #98A29B;
  --line-200: #E4EAE6;
  --line-300: #D3DED8;
  --red-live: #E5484D;
  --on-dark: #F4F7F5;

  --sc-canvas: #fff; --sc-surface: #fff; --sc-ink: #0E1512; --sc-ink-soft: #3A453F;
  --sc-accent: #0B6E4F; --sc-accent-ink: #fff;
  --sc-shadow-color: 150 20% 7%;
}
body { background: #fff; color: #0E1512; }

/* Dark grounds, as in the original's regulation band, footer and cookie panel. */
.hero__stage, .quiet, .room__stage, .foot, .consent__card {
  --sc-ink: var(--on-dark); --sc-ink-soft: var(--slate-400); --sc-accent: #71E5B9; --sc-accent-ink: #0E1512;
  color: var(--on-dark);
}

.eyebrow { color: var(--green); }
.hero .eyebrow { color: var(--lime); }
.skip { background: var(--green); color: #fff; }

/* Buttons */
.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--secondary { background: #fff; color: var(--green); border-color: var(--green); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--forest-500); border-color: var(--forest-500); color: #fff; }
  .btn--secondary:hover { background: var(--tint-100); color: var(--forest-900); }
}
.btn--primary:active { background: var(--forest-900); border-color: var(--forest-900); }

/* Bar */
.bar { background: rgb(255 255 255 / .97); color: #0E1512; box-shadow: 0 1px 0 var(--line-200); }
.bar .bar__mark { color: #0E1512; }
.bar .bar__icon { background: var(--tint-050); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { border-block-end-color: var(--green); } }
.bar__lang { background: var(--tint-050); border-color: var(--line-200); }
.bar__lang a { color: var(--slate-700); }
.bar__lang a[aria-current] { background: var(--green); color: #fff; }
.bar__pair summary { border-color: var(--line-300); }
.bar__live { background: var(--green); }
.bar__pop { background: #fff; border-color: var(--line-200); }
.bar__sheet { background: #fff; }
.bar__sheet a { border-block-end-color: var(--line-200); }

/* Language chips */
.chip { border-color: var(--line-300); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]) { border-color: var(--green); } }

/* Hero */
.hero__stage { background: #0E1512; }
.hero__scrim { background:
   linear-gradient(to bottom, rgb(14 21 18 / .94) 0, rgb(14 21 18 / .86) 44%, rgb(14 21 18 / .1) 66%),
   linear-gradient(to right, rgb(14 21 18 / .55), rgb(14 21 18 / 0) 62%); }
.hero__sub { color: var(--on-dark); }
.hero__speaker { filter: drop-shadow(0 18px 34px rgb(14 21 18 / .5)); }
.hero__illus { background: rgb(14 21 18 / .72); }

/* Phones */
.phone { background: #0E1512; color: #0E1512; box-shadow: 0 2px 0 rgb(255 255 255 / .16) inset, 0 28px 60px -12px rgb(14 21 18 / .75); }
.phone__screen { background: var(--tint-050); }
.phone__top, .phone__lines small, .phone__speak { color: var(--slate-700); }
.phone__lines li { box-shadow: 0 1px 3px rgb(14 21 18 / .12); }
.phone__chips .chip { color: #0E1512; border-color: var(--line-300); background: #fff; }
.phone__chips .chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* Quiet */
.quiet { background: #0E1512; color: var(--on-dark); }

/* The room */
.room__stage { background: #0E1512; }
.room__said .room__who { color: var(--lime); }
.room__scrim { background: linear-gradient(to top, rgb(14 21 18 / .92), rgb(14 21 18 / 0) 34%); }
.bubble { color: #0E1512; }
.bubble--yours { background: var(--green); color: #fff; }
.room__flood { background: var(--green); color: #fff; }
.room__chips .chip { border-color: rgb(255 255 255 / .7); color: #fff; background: transparent; }
.room__chips .chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--green); }
.room__note { color: var(--tint-100); }

/* How it works */
.how { background: var(--tint-050); color: #0E1512; --sc-accent: var(--green); }
.how .eyebrow { color: var(--green); }
.how__sub, .how__note, .step p, .routes small { color: var(--slate-700); }
.routes li { border-block-end-color: var(--line-300); }
.routes__art--link { background: var(--green); color: #fff; }
.chat { box-shadow: 0 1px 3px rgb(14 21 18 / .12); }
.chat small, .chat em { color: var(--slate-700); }
.chat--out { background: var(--tint-100); }
.chat--out small { color: var(--slate-700); }
.step__n { color: var(--green); }
.device { background: #0E1512; box-shadow: 0 2px 0 rgb(255 255 255 / .2) inset, 0 24px 50px -16px rgb(14 21 18 / .45); }
.device.device--natural, .join-demo { box-shadow: 0 2px 0 rgb(255 255 255 / .2) inset; }

/* Platform */
.plat { background: #fff; color: #0E1512; }
.plat__sub { color: var(--slate-700); }
.plat__stats { border-block-color: var(--line-300); }
.stat__num, .stat--word b { color: var(--green); }
.plat__stats li > span { color: var(--slate-500); }
.feat { border-block-end-color: var(--line-200); }
.feat h3 { color: #0E1512; }
.feat.is-on h3 { color: var(--green); }
.feat p, .plat__row p { color: var(--slate-700); }
.plat__row { border-block-start-color: var(--line-200); }
.plat__row h3 { color: var(--green); }
@media (max-width: 860px) {
  .feat h3 { color: var(--green); }
  .feat__inline { border-color: #0E1512; }
}

/* Industries */
.sectors__stage { background: var(--tint-050); color: #0E1512; }
.rail__lead p, .rail__end p { color: var(--slate-700); }
.sector { background: #fff; border: 1px solid var(--line-200); box-shadow: 0 1px 2px rgb(14 21 18 / .04), 0 6px 18px rgb(14 21 18 / .06); }
.sector__tags { color: var(--slate-500); }
.sector > p:not([class]) { color: var(--slate-700); }
.sector__links a, .sector__demo, .rail__end a { color: var(--green) !important; }

.lw-sector-eyebrow { color: var(--green); }
.lw-discovery-lead { color: var(--slate-700); }

/* Solutions and FAQ */
.lw-discovery { background: #fff; color: #0E1512; }
.lw-discovery .lw-discovery-lead, .lw-discovery-card p, .lw-discovery-faq details p { color: var(--slate-700); }
.lw-discovery-card, .lw-discovery-faq details { border-block-end-color: var(--line-300); }
.lw-discovery-card:hover h3, .lw-discovery-card:hover h2 { color: var(--green); }
.lw-discovery-text-link { color: var(--green); }

/* Close, on the original's white-to-mint contact gradient */
.close { background: linear-gradient(180deg, #fff, #E8F0E8); color: #0E1512; --sc-accent: var(--green); box-shadow: 0 -1px 0 var(--line-200); }
.close a { color: var(--green); }
.join { background: #fff; color: #0E1512; border: 1px solid var(--line-200); box-shadow: 0 1px 2px rgb(14 21 18 / .04), 0 6px 18px rgb(14 21 18 / .06); --sc-accent: var(--green); }
.join__head .phone__live { color: var(--green); }
.join__head .phone__live i { background: var(--green); }
.lw-contact-form label i { color: var(--red-live); }
.lw-contact-form input:not([type="checkbox"]), .lw-contact-form select { border-color: var(--slate-500); color: #0E1512; }
.lw-contact-form input::placeholder { color: var(--slate-500); }
.lw-contact-form :is(input, select):focus-visible { outline-color: var(--green); }
/* The original's red fails 4.5:1 at this size, so it marks the error and the words stay dark. */
.lw-contact-form em, .join__send-error { color: #0E1512; }
.lw-contact-form em::before, .join__send-error::before { content: '● '; color: var(--red-live); }
.join__privacy { color: var(--slate-500); }
.join__ok { color: #0E1512; }
.join__ok svg { color: var(--green); }

/* Footer */
.foot { background: #0E1512; }
.foot .bar__mark { color: #fff; }
.foot__brand p, .foot h2, .foot__base { color: var(--slate-400); }

/* Content pages */
.page-content, .page-legal, .page-404 { background: #fff; color: #0E1512; --sc-accent: var(--green); }
.page-head { background: var(--tint-050); color: #0E1512; --sc-accent: var(--green); }
.lw-content-breadcrumbs, .lw-content-lead { color: var(--slate-700); }
.lw-scenario { background: var(--tint-050); color: #0E1512; }
.lw-scenario .lw-sector-eyebrow { color: var(--green); }
.lw-room-card { border-block-start-color: var(--green); }
.lw-room-card h3 { color: var(--green); }
.lw-case-context, .lw-legal-updated, .page-body .lw-discovery-lead { color: var(--slate-500); }
.lw-content-button { background: var(--green); color: #fff !important; }
.page-body .lw-discovery-faq details { border-block-end-color: var(--line-300); }
.page-body .lw-discovery-faq details p, .page-body .lw-discovery-card p { color: var(--slate-700); }
.page-body .lw-discovery-card { border-block-end-color: var(--line-300); color: #0E1512; }
.page-body .lw-discovery-card:hover h2 { color: var(--green); }
.lw-content-cta { background: var(--tint-050); color: #0E1512; border: 1px solid var(--line-200); }
.lw-content-cta a:not(.lw-content-button) { color: var(--green); }
.notfound { background: var(--tint-050); color: #0E1512; }

/* Cookie panel, exactly the original's */
.consent__card { background: rgb(27 37 32 / .98); color: #F7FAF8; border-color: rgb(255 255 255 / .16); }
.consent__card p { color: rgb(255 255 255 / .78); }
.consent__card .btn--primary { background: var(--lime); border-color: var(--lime); color: #132119; }
.btn--plain { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .consent__card .btn--primary:hover { background: #fff; border-color: #fff; color: #132119; }
}

/* Dialogs and accessibility */
.modal { background: rgb(14 21 18 / .72); }
.modal__box { color: #0E1512; --sc-accent: var(--green); }
.modal__x { background: var(--tint-100); color: #0E1512; }
.opt { background: var(--tint-050); }
.opt span { color: var(--slate-700); }
.modal__actions .btn--plain { color: #0E1512; border-color: var(--line-300); }
.modal__box .btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.a11y-trigger { background: var(--green); color: #fff; border-color: #fff; }
.a11y-size button, .a11y-toggle, .a11y-stack button, .a11y-stack a { border-color: var(--slate-500); color: #0E1512; }
.a11y-toggle[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* Performance, and phones. Loaded last.

   A pinned stage moves its planes every scroll frame. Without their own compositor layer
   each move repaints the whole image on the main thread, which a phone at 3x density cannot
   keep up with. So every plane that moves is declared up front. */
.hero__plate, .hero__speaker, .hero__near, .hero__phone { will-change: transform, translate, scale; }
.room__photo, .room__said { will-change: transform, opacity; }
.phone__lines li[data-line="2"] { will-change: opacity; }

/* The room sits low in the frame, so the crew is behind the phone and not behind the copy. */
.hero__plate img { object-position: 35% 100%; }
/* The room fills only the crew's side of the frame, so the crew stays at its true size next
   to the foreman. Past them the photo fades into the ground, and he stands against it. */
.hero__plate { inset: -3% auto -3% -3%; width: 66%; -webkit-mask-image: linear-gradient(to right, #000 68%, transparent); mask-image: linear-gradient(to right, #000 68%, transparent); }

/* The flood. A clip-path repaints the full screen on every frame, so the reveal is a solid
   disc scaled by the compositor, and the copy fades in over it once it has covered the frame. */
.room__disc { position: absolute; z-index: 5; border-radius: 50%; background: var(--green); pointer-events: none; transform: scale(0); will-change: transform; }
.room__flood { z-index: 6; background: transparent; clip-path: none; opacity: 0; will-change: opacity; }
.room__flood.is-full { background: var(--green); }
.is-still .room__disc, .lw-a11y-high-contrast .room__disc { display: none; }
.is-still .room__flood { background: var(--green); opacity: 1 !important; will-change: auto; }
.lw-a11y-high-contrast .room__flood { opacity: 1; }

@media (max-width: 860px) {
  /* Safari's toolbar collapses while scrolling. A stage sized to the small viewport then
     stops short of the screen, leaving a band of page ground below it. Sizing to the large
     viewport covers the screen in both states, and anything anchored to the bottom edge
     lifts by the toolbar's height so it is not hidden while the toolbar is showing. */
  :root { --vis: 100svh; --tb: calc(100vh - 100svh); --tb: calc(100lvh - 100svh); }
  .is-still { --tb: 0px; }
  .hero__stage, .room__stage { height: 100vh; height: 100lvh; }
  .room__title { inset-block-end: calc(1.25rem + var(--tb)); }
  .hero__illus { inset-block-end: calc(8px + var(--tb)); }
  .room__flood { padding-block-end: calc(1.5rem + var(--tb)); }

  /* A shorter peak: a thumb covers less distance per swipe than a wheel. */
  html:not(.is-still) #room { height: 400vh !important; height: 400lvh !important; }

  /* Fewer moving parts. The foreman's shadow was recalculated every frame, and the push-in
     on the plate costs far more here than the depth it adds at this size. */
  .hero__speaker { filter: none; scale: 1; translate: none; will-change: auto; }
  .hero__plate { inset: auto 0 0 0; width: auto; height: 68%; scale: 1; translate: none; will-change: auto; -webkit-mask-image: none; mask-image: none; }
  .hero__plate img { object-position: 50% 0; }
  /* The crew looks toward the foreman, so in Hebrew they turn with him. */
  html[dir="rtl"] .hero__plate { transform: scaleX(-1); }

  /* Placed from the top of the visible screen, not the bottom of the stage. The stage is
     taller than the screen while the toolbar shows, so anything anchored to its bottom edge
     would start out of sight. The foreman grows by the toolbar's height: his head stays put
     and the extra length comes into view as the toolbar collapses. */
  .hero__speaker { height: calc(var(--vis) * .44 + var(--tb)); }
  /* English copy runs a line longer, so he stands a little shorter to clear the buttons. */
  html[dir="ltr"] .hero__speaker { height: calc(var(--vis) * .36 + var(--tb)); }
  .hero__phone { box-shadow: 0 2px 0 rgb(255 255 255 / .16) inset; inset-block-end: auto; top: calc(var(--vis) - 210px); translate: 0 calc(var(--sc-p, 0) * -46%); }
  .is-still .hero__phone { top: auto; inset-block-end: 0; }
  .bubble { box-shadow: 0 2px 6px rgb(14 21 18 / .28); }
  .room__photo { will-change: opacity; }

  /* Industries: a native swipe. A pinned sideways rail needs a texture several screens wide,
     and it is the slowest thing a phone can be asked to scroll. Next card peeks to invite it. */
  #usecases { height: auto !important; }
  .sectors__stage { position: relative !important; height: auto !important; display: block; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sectors__stage::-webkit-scrollbar { display: none; }
  .rail { transform: none !important; will-change: auto; align-items: stretch; padding-block: var(--sc-7); }
  .rail > * { scroll-snap-align: center; }
  .rail > :first-child, .rail > :last-child { align-self: center; }
  .sector { max-height: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__speaker, html[dir="ltr"] .hero__speaker { height: calc(var(--vis) * .3 + var(--tb)); }
  .hero__phone { top: calc(var(--vis) - 130px); translate: 0 calc(var(--sc-p, 0) * -52%); }
}

/* A caption aligns by its own language: English left, Arabic and Hebrew right, on either page. */
.room__sentence, .bubble, .chat b, .chat small, .phone__lines b, .phone__lines small { text-align: start; }

/* A closed menu takes no room. Its links reached past the screen edge in English, which widened
   the whole page and let it drag sideways on a phone. */
.bar__menu:not([open]) .bar__sheet { display: none; }
/* Backstops, so no later overflow can bring the drag back. Clip keeps sticky stages working. */
html { overflow-x: clip; overscroll-behavior-x: none; }
@media (max-width: 860px) {
  main > section:not(#usecases), .foot, .bar { touch-action: pan-y pinch-zoom; }
}

@media (max-width: 860px) {
  /* Unbounded runs wide: "conversation" at the desktop minimum was cut off at the screen edge. */
  :lang(en) .close h2 { font-size: clamp(1.75rem, 9.2vw, 2.6rem); }
}