/* Shared by all four language pages, which is why it is a file and not
   inline. One request, cached after the first, and no chance of the
   Spanish page slowly diverging from the Hebrew one.

   Generated pages: see site/build.py. */

  :root {
    --navy: #070d1a;
    --surface: #161f32;
    --line: #202b42;
    --green: #00e676;
    --gold: #ffd700;
    --text: #f2f5fa;
    --muted: #9aa8bb;   /* lifted from the legal pages' #8a99ad: this sits on
                           smaller text and needed to clear 4.5:1 on navy. */
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--navy);
    color: var(--text);
    font: 17px/1.7 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; }
  /* Text gets a readable measure no matter how wide the shell is. The
     column is what makes a page readable; the shell is what makes it a
     page rather than a phone screen someone centred on a monitor. */
  .lede, .steps p, .card p, .safety li { max-width: 62ch; }

  /* Keyboard users have to be able to see where they are. Never removed,
     and thick enough to spot against a dark ground. */
  a:focus-visible, button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
  }
  /* Hidden by clipping, NOT by parking it off-screen at a negative offset.
     The usual `inset-inline-start: -9999px` trick is left-to-right thinking:
     in RTL that resolves to `right: -9999px`, which pushes the element nine
     thousand pixels PAST the right edge, and the whole page grows a
     horizontal scrollbar and sits shifted. Caught in the browser, not in
     review. */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: 0; overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip:focus {
    width: auto; height: auto;
    clip-path: none;
    inset-inline-start: 8px;
    top: 8px;
    z-index: 10;
    background: var(--surface);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 10px;
  }

  header { padding: 22px 0 8px; }
  .brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; letter-spacing: .5px; font-size: 18px;
  }
  .brand .star { color: var(--green); font-size: 20px; }
  .lang { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
  .lang strong { color: var(--text); }
  .lang a { color: var(--green); }

  h1 {
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.15;
    margin: 26px 0 12px;
    font-weight: 900;
  }
  h1 .accent, .as-h1 .accent { color: var(--green); }
  /* The English half is a translation of this page, not a second page, so
     it starts at h2 and the document keeps exactly one h1. It should still
     LOOK like the top of its own half — heading level is structure, size is
     for the eye, and they are allowed to disagree. */
  .as-h1 {
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.15;
    margin: 26px 0 12px;
    font-weight: 900;
  }
  #en h3 { font-size: 21px; margin: 44px 0 10px; }
  #en h4 { font-size: 17px; margin: 0 0 4px; }
  #en .safety h3 { margin-top: 0; }
  .lede { font-size: clamp(17px, 3.6vw, 20px); color: var(--text); margin: 0 0 6px; }
  .sub { color: var(--muted); margin-top: 10px; }

  h2 { font-size: 21px; margin: 44px 0 10px; }
  h3 { font-size: 17px; margin: 0 0 4px; }

  /* ---- the clip window -------------------------------------------
     The one thing the product does, drawn rather than described. Built
     from real elements and real text, not an image or an SVG with text
     baked in: it has to read correctly in Hebrew and in English, flip
     with the writing direction, and survive somebody enlarging type.
     It is also honest — this is a diagram of the mechanism, not a
     mocked-up screenshot of an app filming children. */
  .window { margin: 6px 0 0; }
  .window-bar {
    display: grid;
    grid-template-columns: 3fr auto 1fr;
    align-items: stretch;
    gap: 4px;
    height: 78px;
  }
  .seg {
    border-radius: 10px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
  }
  .seg-before { background: rgba(0, 230, 118, .14); border: 1px solid rgba(0, 230, 118, .36); }
  .seg-after  { background: rgba(0, 230, 118, .14); border: 1px solid rgba(0, 230, 118, .36); }
  .seg-tap {
    background: var(--green); color: var(--navy);
    font-weight: 900; font-size: 13px;
    padding-inline: 14px; white-space: nowrap;
  }
  .seg strong { display: block; font-size: 19px; font-weight: 900; }
  .window-rail {
    margin-top: 10px;
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, transparent, var(--line) 12%, var(--line) 88%, transparent);
  }
  .window-note { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }

  /* ---- desktop ---------------------------------------------------
     Below this width the page stays the single column it already was;
     that layout is right on a phone and nothing here touches it. */
  @media (min-width: 900px) {
    .hero {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 56px;
      align-items: center;
      margin: 8px 0 8px;
    }
    .hero > .window { margin: 0; }
    h1, .as-h1 { font-size: 52px; margin-top: 8px; }
    .lede { font-size: 20px; }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .steps li { margin: 0; }
    .site-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 26px 0 6px;
    }
    .site-head .lang { margin: 0; }
    footer .foot-row { display: flex; gap: 18px; align-items: center; }
  }

  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
  .cta {
    display: inline-flex; align-items: center; justify-content: center;
    /* 48px tall: a tap target somebody can hit on a moving bus. */
    min-height: 48px; padding: 12px 26px;
    border-radius: 12px; text-decoration: none;
    font-weight: 800; font-size: 17px;
  }
  .cta-main { background: var(--green); color: var(--navy); }
  .cta-alt {
    background: transparent; color: var(--text);
    border: 1px solid var(--line);
  }
  .cta-main:hover, .cta-alt:hover { filter: brightness(1.08); }

  .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  .steps li {
    counter-increment: s;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px 16px 18px;
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    align-items: start;
  }
  .steps li::before {
    content: counter(s);
    color: var(--navy); background: var(--green);
    font-weight: 900;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    /* Decorative numbering — the same order is carried by the list itself,
       so a screen reader loses nothing by skipping it. */
  }
  .steps p { margin: 0; color: var(--muted); }

  .cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
  }
  .card p { margin: 0; color: var(--muted); font-size: 15.5px; }

  .safety { border-color: rgba(0, 230, 118, .38); }
  .safety h2 { margin-top: 0; }
  .safety ul { margin: 0; padding-inline-start: 20px; color: var(--muted); }
  .safety li { margin: 6px 0; }

  hr.divider { border: 0; border-top: 1px solid var(--line); margin: 56px 0 0; }
  footer { margin-top: 40px; color: var(--muted); font-size: 14px; }
  footer a { color: var(--green); }

  /* Respect the setting rather than assuming everyone enjoys movement. */
  @media (prefers-reduced-motion: no-preference) {
    .cta { transition: filter .15s ease; }
  }

  /* The one control that changes the whole page, so it reads as a bar of
     choices rather than a line of prose. */
  .lang { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .lang a, .lang strong {
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    min-height: 32px;
    display: inline-flex; align-items: center;
  }
  .lang a { color: var(--muted); }
  .lang a:hover { color: var(--text); background: var(--surface); }
  .lang strong {
    color: var(--navy); background: var(--green);
    font-weight: 800;
  }
  .noscript { padding: 0 20px; }
  .studio { margin-top: 14px; }
  .studio .card-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--green); font-weight: 700; text-decoration: none;
    margin-top: 8px; min-height: 40px;
  }
  .studio .card-link:hover { text-decoration: underline; }


/* ---- language menu ------------------------------------------------
   A globe that opens. Four names in the header was a permanent row of
   choices for a decision almost nobody makes twice, and it crowded the
   one line the page has for its own name.

   <details>/<summary> and not a script: it opens on click and on Enter,
   closes on Escape, is announced as expandable, and survives JavaScript
   being off. */
.langmenu { position: relative; }
.langmenu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A real tap target, not a 19px glyph somebody has to aim at. */
  width: 42px; height: 42px;
  border-radius: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary:hover { color: var(--text); background: var(--surface); }
.langmenu[open] summary { color: var(--text); background: var(--surface); }
.langmenu-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.langmenu-list a,
.langmenu-list strong {
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.langmenu-list a { color: var(--text); }
.langmenu-list a:hover { background: rgba(255, 255, 255, .06); }
.langmenu-list strong { color: var(--navy); background: var(--green); font-weight: 800; }

/* ---- header actions -----------------------------------------------
   Studio and the language globe, at the end of the header. Studio is a
   desktop tool and the header is where somebody who already knows that
   goes looking; the card further down is what explains it to everyone
   else. */
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-link {
  display: inline-flex; align-items: center;
  /* Same 42px box as the globe, so the two read as one control group
     rather than a button and an afterthought. */
  height: 42px; padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
}
.head-link:hover { background: var(--surface); border-color: var(--green); }