/* ediscovery.co.il -- the marketing site.

   Same tokens as the gate and the upload portal, deliberately: a prospect who
   becomes a client should not feel handed to a different company the first time
   they sign in. Written RTL-first with logical properties, so the English page is
   this same stylesheet with dir="ltr" and nothing else changed.

   No framework, no web fonts, no CDN. */
:root {
  --navy:      #1B2A5E;
  --navy-soft: #2C3E7A;
  --accent:    #8A90B0;
  --ink:       #1A1D2B;
  --muted:     #5C6480;
  --line:      #E3E6EF;
  --bg:        #F7F8FB;
  --surface:   #FFFFFF;
  --ok:        #1B7F4B;
  --bad:       #B3261E;
  /* The one warm colour on the site, and it is semantic: it marks a search
     hit, in the drawings exactly as the product marks one in a document. */
  --hl:        #F2C14E;
  --radius:    12px;
  --shadow:    0 1px 2px rgba(27, 42, 94, .05);
  --shadow-lg: 0 8px 30px rgba(27, 42, 94, .08);
  --font: "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, system-ui, sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }
a  { color: var(--navy-soft); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 1.25rem; }

/* Every visible focus ring matters here: the accessibility statement claims them. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--navy-soft);
  outline-offset: 2px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* --- header ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 80px; position: relative; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--navy); }
/* 51px, half again on the 34px it was, with the bar taken from 68 to 80 so the
   logo keeps air above and below rather than filling the rule. The height is set
   and the width left to follow: the file is 560x398, near enough to square that
   fixing both would squash it. */
.brand img { height: 51px; width: auto; display: block; border-radius: 4px; }
.brand b { font-size: 1.05rem; letter-spacing: -.01em; display: block; }
.brand span { color: var(--muted); font-size: .8rem; font-weight: 400; display: block; }

nav.links { margin-inline-start: auto; display: flex; align-items: center; gap: .3rem; }
nav.links a {
  color: var(--ink); text-decoration: none; font-size: .95rem;
  padding: .5rem .7rem; border-radius: 8px;
}
nav.links a:hover { background: var(--bg); color: var(--navy); }
nav.links .lang { border: 1px solid var(--line); font-weight: 600; color: var(--navy); }

.menu-btn {
  display: none; margin-inline-start: auto;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .7rem; font-size: 1rem; cursor: pointer; color: var(--navy);
}

@media (max-width: 620px) {
  .brand img { height: 42px; }
  .top .wrap { min-height: 70px; }
}

@media (max-width: 880px) {
  .menu-btn { display: block; }
  nav.links {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1rem; box-shadow: var(--shadow-lg);
  }
  nav.links.open { display: flex; }
  nav.links a { padding: .75rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  nav.links a:last-child { border-bottom: 0; }
}

/* --- hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(44, 62, 122, .10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero .wrap { padding-block: clamp(3rem, 8vw, 5.5rem); max-width: 880px; }
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--navy-soft); background: rgba(44, 62, 122, .08);
  padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--muted); max-width: 62ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-soft); }
.btn-ghost { background: var(--surface); color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); }

/* --- sections ----------------------------------------------------------- */
section { padding-block: clamp(2.8rem, 6vw, 4.5rem); }
section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 70ch; margin-bottom: 2.2rem; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow);
}
section.alt .card { background: var(--bg); }
.card h3 { margin-bottom: .4rem; color: var(--navy); }
.card p { color: var(--muted); margin-bottom: 0; font-size: .97rem; }

/* Numbered steps. The number is decorative; the heading carries the meaning. */
.steps { counter-reset: step; }
.steps .card { position: relative; padding-block-start: 1.7rem; }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -15px; inset-inline-start: 1.4rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
}

/* The differentiator band. Dark on purpose: it is the one claim to remember. */
.band { background: var(--navy); color: #fff; }
.band h2 { color: #fff; }
.band p { color: #C9CFE4; }
.band .wrap { max-width: 900px; }
.band ul { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.band li { padding-inline-start: 1.9rem; position: relative; color: #E6E9F4; }
.band li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 9px; height: 9px; border-radius: 50%; background: #7E8AB8;
}
.band strong { color: #fff; }

/* --- contact ------------------------------------------------------------ */
.contact-grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

form.contact { display: grid; gap: 1rem; }
form.contact label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .3rem; }
form.contact .req { color: var(--bad); }
form.contact input, form.contact textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
form.contact textarea { min-height: 130px; resize: vertical; }
form.contact input:hover, form.contact textarea:hover { border-color: var(--accent); }

/* The bot trap. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { font-size: .86rem; color: var(--muted); }

.msg { border-radius: 10px; padding: .85rem 1rem; border: 1px solid; font-size: .95rem; }
.msg-ok  { background: #EAF6EF; border-color: #BCE0CA; color: var(--ok); }
.msg-bad { background: #FDECEA; border-color: #F3C3BE; color: var(--bad); }

.direct { display: grid; gap: .8rem; }
.direct a {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  color: var(--ink); padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface);
}
.direct a:hover { border-color: var(--accent); }
.direct .k { color: var(--muted); font-size: .82rem; display: block; }
.direct .v { font-weight: 600; }

/* --- footer ------------------------------------------------------------- */
footer { background: var(--navy); color: #C9CFE4; padding-block: 2.2rem; font-size: .92rem; }
footer a { color: #fff; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer .fl { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* --- legal pages -------------------------------------------------------- */
.doc { max-width: 760px; padding-block: 3rem; }

/* Running text inside a section. Narrower than the section that holds it,
   because a paragraph read across the full 1080px is a paragraph nobody
   finishes -- the measure is what makes four paragraphs readable where four
   cards would have been skimmed. */
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--navy); font-weight: 650; }
.back { margin-top: 2rem; }

/* The icon sprite is a definitions block, never drawn.
   This lives HERE and not in a style attribute on the element, because the
   Content-Security-Policy in .htaccess says style-src 'self' -- which blocks
   `style="..."` attributes too, not only <style> blocks. The policy did exactly
   what it was written to do; the page was the thing that had to change. An SVG
   with no size then renders at its 300x150 default, which is how a hidden
   definitions block became an empty box above the header. */
.sprite { display: none; }
.doc h2 { margin-top: 2rem; font-size: 1.3rem; }
.doc ul, .doc ol { padding-inline-start: 1.3rem; color: var(--muted); }
.doc li { margin-bottom: .5rem; }

/* --- drawn marks ---------------------------------------------------------
   Every icon on this site is drawn here, as one inline sprite per page. No
   icon font, no external file, nothing to hotlink -- which is also the only
   way to satisfy the img-src 'self' policy in .htaccess without exceptions.
   The shapes inherit `currentColor`, so a card and its mark cannot drift
   apart when the palette changes. */
.ico {
  width: 26px; height: 26px; display: block; margin-bottom: .75rem;
  color: var(--navy-soft);
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* --- the pipeline strip --------------------------------------------------
   An ordered list, because the stages ARE ordered and a screen reader should
   say so. The chevrons are decoration on top of that, and they turn to point
   down when the row stacks -- an arrow still pointing sideways down a column
   is the detail that gives a diagram away as an image someone pasted in. */
.pipe {
  list-style: none; margin: 0 0 2.2rem; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pipe li {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
section.alt .pipe li { background: var(--bg); }
.pipe b { display: block; color: var(--navy); font-size: 1rem; }
.pipe span { display: block; color: var(--muted); font-size: .86rem; margin-top: .15rem; }

/* The chevron sits between items, so the last one does not get it.

   Physical borders here rather than logical ones, deliberately. A chevron is made
   from two adjacent borders plus a rotation, and the rotation cannot be expressed
   logically -- so `border-inline-start` alone flips the borders for Hebrew while
   leaving the angle behind, and the arrow comes out pointing up instead of along
   the flow. Each direction therefore states both halves. */
.pipe li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  inset-inline-end: -.62rem; top: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg);   /* points left, the way Hebrew runs */
}
html[dir="ltr"] .pipe li:not(:last-child)::after {
  border-left: 0; border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);    /* points right */
}

/* Stacked: the arrow has to point down the column. An arrow still pointing
   sideways is what gives away a diagram that was pasted in as a picture. */
@media (max-width: 660px) {
  .pipe li:not(:last-child)::after,
  html[dir="ltr"] .pipe li:not(:last-child)::after {
    inset-inline-end: 50%; top: auto; bottom: -.62rem;
    border-left: 0; border-right: 2px solid var(--accent);
    transform: translateX(50%) rotate(135deg);
  }
}

/* --- drawn screens -------------------------------------------------------
   Mockups of the real screens with no content in them: the structure is the
   product's, every line of text is a grey bar, and the amber marks are where
   a search hit would sit. Nothing here is a screenshot, so nothing here can
   leak a document, a custodian or a matter number.

   There is no text inside them either, which is what lets the English page
   simply mirror them so the panes land on the side that language reads from. */
.mock { width: 100%; height: auto; display: block; border-radius: var(--radius); }
html[dir="ltr"] .mock { transform: scaleX(-1); }

.hero .wrap {
  max-width: var(--wrap);
  display: grid; align-items: center; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2rem; }
}
.hero-art, .mock-wide { filter: drop-shadow(0 10px 30px rgba(27, 42, 94, .10)); }
.mock-wide { max-width: 720px; margin: 0 auto 2.6rem; }

/* --- the accessibility menu ----------------------------------------------
   Written here rather than bought in. The commercial accessibility widgets are
   third-party scripts: adding one means opening script-src in the
   Content-Security-Policy and loading code we do not control onto every page of
   an e-discovery company's site. Four controls that genuinely help are worth
   more than a toolbar of thirty that arrives with a tracker.

   The preferences live in the visitor's own browser and are never sent
   anywhere -- which is why the cookie policy can still say what it says. */
.a11y { position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 60; }

.a11y-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
}
.a11y-btn:hover { background: var(--navy-soft); }
.a11y-btn svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.a11y-btn .a11y-head { fill: currentColor; stroke: none; }

.a11y-panel {
  position: absolute; bottom: 58px; inset-inline-start: 0;
  width: 246px; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: grid; gap: .5rem;
}
/* display:grid above would otherwise beat the browser's own [hidden] rule. */
.a11y-panel[hidden] { display: none; }

.a11y-title { font-size: .95rem; margin: 0 0 .2rem; color: var(--navy); }

.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.a11y-row > span { font-size: .92rem; color: var(--muted); }
.a11y-grp { display: flex; gap: .3rem; }

.a11y-panel button {
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--navy); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .4rem .7rem; cursor: pointer; text-align: start;
}
.a11y-panel button:hover { border-color: var(--accent); }
.a11y-panel button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.a11y-grp button { padding: .3rem .6rem; min-width: 38px; text-align: center; }

.a11y-link { font-size: .88rem; color: var(--navy-soft); margin-top: .15rem; }

@media print { .a11y { display: none; } }

/* --- what the controls actually do --------------------------------------
   The root font-size carries everything set in rem -- the headings, the
   spacing scale -- and body is set in px, so both are moved together. */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-1 body { font-size: 19px; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-2 body { font-size: 21px; }

html.a11y-underline a { text-decoration: underline; }

/* Contrast is raised by redefining the tokens, so every component follows
   without a single component rule being touched. */
html.a11y-contrast {
  --ink:       #000000;
  --muted:     #24242c;
  --line:      #6f6f86;
  --bg:        #ffffff;
  --surface:   #ffffff;
  --navy:      #000d45;
  --navy-soft: #000d45;
  --accent:    #45455a;
}
html.a11y-contrast .band p,
html.a11y-contrast .band li { color: #ffffff; }
html.a11y-contrast .card p,
html.a11y-contrast .section-head p,
html.a11y-contrast .note { color: var(--ink); }

/* --- the explainer film ---------------------------------------------------
   Subtitles are burned into the video, so it reads with the sound off too.
   Hebrew only: the narration and subtitles are Hebrew, so en/ does not get it. */
.film .wrap { max-width: 960px; }
.film-box {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9; max-width: 100%;
}
.film-box video { display: block; width: 100%; height: 100%; }