/* Shared by the Hebrew page at / and the English one at /en.
   One stylesheet rather than a copy in each: the two documents differ only in
   words, and a duplicated 400 lines of CSS would have drifted the first time
   either page was touched.

   Everything here is direction-agnostic on purpose — padding-inline,
   inset-inline-start, margin-inline, never left/right — which is what lets the
   same rules lay out an RTL Hebrew page and an LTR English one. Anything added
   later must keep to logical properties.

   Note the trap this codebase has hit before: any class sharing an element
   with .wrap must use padding-block, never the padding shorthand, or it wipes
   .wrap's gutters.

   Motion lives in landing-motion.js, which only ever adds .is-in or writes a
   transform. Nothing here depends on that script having run: without it every
   [data-reveal] element is simply visible, which is also what a crawler and a
   reduced-motion visitor get. */

:root{
  /* Neutrals carry a slight warm bias toward the accent — a pure grey on a
     pure black made everything that was not yellow read as switched off. */
  --ground:#0A0908; --surface:#141310; --raise:#1C1A16;
  --line:#2C2921; --hair:rgba(255,255,255,.055);
  --brand:#FFBF00; --brand-lift:#FFD75E; --brand-ink:#0C0B09;
  --text:#F5F2EA; --muted:#A9A396; --muted-strong:#D2CCBE;
  --display:"Secular One","Heebo",system-ui,sans-serif;
  --body:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --maxw:1080px;
  /* Shadows are warm and wide rather than black and tight. On a near-black
     ground a neutral shadow is invisible; what reads as depth is the spill of
     colour around an edge. */
  --lift:0 22px 50px -28px rgba(0,0,0,.9), 0 2px 10px -4px rgba(0,0,0,.6);
  --lift-brand:0 26px 60px -30px rgba(255,191,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
     overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
@media(max-width:560px){.wrap{padding:0 26px}}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6.2vw,64px);letter-spacing:-.02em}
h2{font-size:clamp(26px,3.8vw,40px);letter-spacing:-.01em}
h3{font-size:19px}
p{margin:0}
/* The accent line of a heading is a gradient rather than flat yellow: the
   same trick a foil-stamped cover uses, a highlight travelling across the
   letterforms so the colour is not uniform. Falls back to solid --brand
   anywhere background-clip:text is unsupported. */
.hl{color:var(--brand);
    background:linear-gradient(100deg,var(--brand) 12%,var(--brand-lift) 52%,var(--brand) 88%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hl{background:none;-webkit-text-fill-color:currentColor}
}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.18em;
         text-transform:uppercase;color:var(--brand);
         display:flex;align-items:center;gap:10px}
/* A short rule leading into the eyebrow. inline-start, so it sits to the
   right of Hebrew text and to the left of English. */
.eyebrow::before{content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(to var(--to-end,right),transparent,var(--brand))}
[dir=rtl] .eyebrow::before{--to-end:left}
.lede{color:var(--muted-strong);max-width:52ch}

/* --- atmosphere -------------------------------------------------------
   Two fixed layers: a warm glow behind the page that gives it a light source
   at the top, and a grain plate over the top of everything. The grain is what
   stops the large flat fields of near-black from banding on an OLED phone,
   and it is most of why the page reads as a printed object rather than as a
   screen of #111.

   Both are pointer-events:none and aria-hidden in the markup. They are
   separate elements rather than two pseudos on one, because one has to be
   under the content and the other over it.

   The glow is centred by symmetric inline insets rather than by a translate,
   which leaves transform free for the drift the script writes into --glow-y —
   and keeps it correct in both directions without an RTL variant. */
.atmos{position:fixed;top:0;inset-inline:0;height:100%;z-index:0;
  pointer-events:none;overflow:hidden}
.atmos::before{content:"";position:absolute;top:-42vh;inset-inline:-20vw;
  height:min(1300px,130vh);
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,191,0,.13),rgba(255,191,0,.05) 34%,transparent 64%);
  transform:translate3d(0,var(--glow-y,0px),0);will-change:transform}
/* feTurbulence desaturated to grey, one 140px tile, repeated. ~1.4 KB inline,
   so it costs no request and cannot arrive late and pop. Kept as plain
   opacity rather than a blend mode: blending a full-viewport fixed layer is
   the one thing here that showed up on a phone's scroll. */
.grain{position:fixed;top:0;inset-inline:0;height:100%;z-index:50;
  pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Everything real sits above the glow. Listed one by one rather than as
   body>*, because a blanket rule would out-specify .site-head and turn its
   position:sticky into position:relative. */
.lang-bar,main,.site-foot{position:relative;z-index:1}

/* A hairline of read-progress across the very top. Scaled by the script;
   with no script it stays at zero width and is simply never seen. */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:40;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(to right,var(--brand),var(--brand-lift));
  will-change:transform}
/* Grown from the inline start, so the filled part is always the part the
   reader has already passed — and the highlight in the gradient runs the
   same way the text does. */
[dir=rtl] .progress{transform-origin:right center;
  background:linear-gradient(to left,var(--brand),var(--brand-lift))}

/* --- motion primitives ------------------------------------------------
   Guarded by html.js, which the inline script in <head> sets before the body
   parses. If scripting is off the guard never lands, nothing is hidden, and
   the page renders exactly as it did before any of this existed. */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* Children of a revealed group come in one after another. The delay is on the
   child so a group can be reordered without renumbering anything. */
.js [data-reveal] > *{transition-delay:inherit}
.js [data-stagger] > *{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-stagger].is-in > *{opacity:1;transform:none}
.js [data-stagger].is-in > :nth-child(2){transition-delay:.08s}
.js [data-stagger].is-in > :nth-child(3){transition-delay:.16s}
.js [data-stagger].is-in > :nth-child(4){transition-delay:.24s}
.js [data-stagger].is-in > :nth-child(5){transition-delay:.32s}
.js [data-stagger].is-in > :nth-child(6){transition-delay:.4s}

/* Above the fold the cascade has to be brief. The hero copy is the largest
   contentful paint on the page, and an element at opacity 0 has not painted —
   so a 0.9s stagger there is a slow page dressed up as a deliberate one. This
   one finishes inside 0.6s. */
.js .hero-copy > *{transform:translateY(14px);transition-duration:.45s}
.js .hero-copy.is-in > :nth-child(2){transition-delay:.05s}
.js .hero-copy.is-in > :nth-child(3){transition-delay:.1s}
.js .hero-copy.is-in > :nth-child(4){transition-delay:.15s}

/* Reduced motion is absolute here: no reveal, no drift, no smooth scroll. The
   script reads the same query and never starts its loop, but the CSS has to
   stand on its own — the query can flip after load. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-stagger] > *{opacity:1!important;transform:none!important}
  [data-parallax]{transform:none!important}
  .progress{display:none}
  /* The script stops before it ever adds .is-stuck here, so the header would
     otherwise stay transparent over scrolling content for the whole visit. */
  .site-head{background:rgba(10,9,8,.92);border-bottom-color:var(--line)}
}

/* --- the English offer bar (Hebrew page only) -------------------------
   Hidden in the markup until landing.html decides the visitor is one the app
   would run in English. The element carries dir="ltr" itself, so
   border-inline-start below resolves to its left edge even though the
   document around it is RTL.

   [hidden] is a UA rule at zero specificity, so the display below would beat
   it; the explicit .lang-bar[hidden] is what actually keeps it off a Hebrew
   screen. */
.lang-bar{display:flex;align-items:center;justify-content:center;gap:6px 14px;
          flex-wrap:wrap;text-align:center;
          background:var(--surface);border-bottom:1px solid var(--line);
          border-inline-start:3px solid var(--brand);
          padding:11px 22px;color:var(--text);font-size:15px}
.lang-bar[hidden]{display:none}
.lang-bar-go{color:var(--brand);font-weight:700;white-space:nowrap}
.lang-bar:hover .lang-bar-go,
.lang-bar:focus-visible .lang-bar-go{text-decoration:underline}
@media(max-width:560px){.lang-bar{font-size:14px;padding:10px 16px}}

/* --- header: the yellow rule is the page's structural signature -------
   At the top of the page it is transparent and borderless, so the hero glow
   runs behind it uninterrupted. .is-stuck arrives from the script on the
   first pixel of scroll and gives it a frosted plate to sit on. */
.site-head{position:sticky;top:0;z-index:30;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),
             backdrop-filter .3s var(--ease)}
.site-head.is-stuck{background:rgba(10,9,8,.72);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px)}
/* No script, no scroll class — so the plate is painted unconditionally there,
   or the nav would sit on moving content with nothing behind it. */
html:not(.js) .site-head{background:rgba(10,9,8,.9);border-bottom-color:var(--line)}
/* flex-wrap is a safety net, not a layout: the row is meant to stay on one
   line, and it does down to about 330px. Past that the actions drop below
   the logo instead of being silently clipped by body's overflow-x:clip,
   which is how a cut-in-half demo button shipped in the first place. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
     padding-block:15px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:21px;
      color:var(--text);flex:none;min-width:19px}
.mark img{width:19px;min-width:19px;height:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:9px;flex:none}

.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:15px;
     padding:11px 22px;border:1px solid transparent;border-radius:6px;white-space:nowrap;
     cursor:pointer;position:relative;
     transition:transform .2s var(--ease),box-shadow .3s var(--ease),
                background-color .2s var(--ease),border-color .2s var(--ease),
                color .2s var(--ease)}
.btn-solid{color:var(--brand-ink);
  background:linear-gradient(180deg,var(--brand-lift),var(--brand));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px -16px rgba(255,191,0,.75)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,var(--lift-brand)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.015)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* --- hero -------------------------------------------------------------
   Two columns: the argument, and the product. The art column is the first
   thing on the page that moves, and it is the only place the drift is large
   enough to notice. */
.hero{padding-block:60px 52px;display:grid;gap:52px;
      grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center}
.hero .lede{margin:22px 0 20px;font-size:clamp(17px,2vw,20px)}
/* What actually changes, in one line, between the list of features and the
   ask. The lede says what the app does; this says what the week looks like
   afterwards. */
.outcome{color:var(--text);font-size:16px;max-width:56ch;margin-bottom:30px;
  padding-inline-start:14px;border-inline-start:2px solid var(--brand)}
.outcome strong{color:var(--brand);font-weight:700}
/* One goal above the fold, the demo. The store badges used to sit under
   these buttons; they are at the foot of the demo section now, for the
   people who already have an invitation. */
.cta-row{display:flex;gap:11px;flex-wrap:wrap}

/* Two screens, overlapped, drifting apart by about 50px over the height of
   the hero. The still carries a real alt and the loop an aria-label: nothing
   else on the page shows a finished evaluation, or the answering itself. */
.hero-copy{min-width:0}
.phone picture{display:block}
/* The ratio is dictated by the two screens inside: a 560x1217 shot at
   70% of this box is 1.52 boxes-wide tall, and the pair needs room to
   sit diagonally with a real overlap. Anything squarer clips them. */
.hero-art{position:relative;aspect-ratio:.62;align-self:center}
.phone{position:absolute;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--lift);will-change:transform}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);pointer-events:none}
.phone img,.phone-loop{width:100%;height:auto;display:block}
/* The poster only covers the first frame; give the element the same ground
   underneath so a slow decode never shows through as a white rectangle. */
.phone-loop{background:var(--surface);object-fit:cover}
.phone-back{width:64%;inset-block-start:0;inset-inline-end:0;opacity:.72;
  filter:saturate(.85)}
.phone-front{width:70%;inset-block-end:0;inset-inline-start:0;
  box-shadow:var(--lift),var(--lift-brand)}

/* --- the board: four pillars as cells of one grid, not four cards ----- */
.board{border:1px solid var(--line);border-radius:12px;overflow:hidden;
       display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;
       background:var(--surface);box-shadow:var(--lift)}
.cell{background:var(--surface);padding:28px 22px;border-inline-start:1px solid var(--line);
      display:flex;flex-direction:column;gap:9px;position:relative;
      transition:background-color .35s var(--ease)}
.cell:first-child{border-inline-start:0}
/* A hairline that lights up along the top of the cell under the pointer —
   the whole hover state, no lift and no scale, because these are cells of one
   table and a table whose cells jump is a mess. */
.cell::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(to right,transparent,var(--brand),transparent);
  opacity:0;transition:opacity .35s var(--ease)}
.cell:hover{background:var(--raise)}
.cell:hover::before{opacity:1}
.cell .tag{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
/* The loop sits at the foot of the cell, and margin-block-start:auto is what
   lines all four up with each other however long the paragraph above runs —
   these are cells of one table, and a row of screens at four different heights
   would read as a mistake. */
.cell-screen{margin-block-start:auto;padding-block-start:22px}
.cell-loop{width:100%;display:block;border-radius:14px;border:1px solid var(--line);
  background:var(--ground);box-shadow:var(--lift)}
.cell p{color:var(--muted-strong);font-size:15px}
em{font-style:normal;font-weight:500;color:var(--text)}

/* scroll-margin keeps an anchor jump (#demo from every CTA, #faq) from
   parking the eyebrow under the sticky header on a phone, where the section's
   top padding is shorter than the header is tall. */
section{padding:78px 0;border-top:1px solid var(--hair);position:relative;
        scroll-margin-top:28px}
section.tight{padding-top:52px}
.section-head{margin-bottom:34px;display:flex;flex-direction:column;gap:11px}

/* --- arbox split ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:center}
.split .shot{border-radius:18px;border:1px solid var(--line);box-shadow:var(--lift);
  will-change:transform}
/* --- the coach's report ----------------------------------------------
   .flip puts the image on the other side from the Arbox split that follows,
   so two splits in a row do not stack the same way. Desktop only: on a phone
   every split reads text first. The report is paper, not a screen — square
   corners, no border, and the page fading out below the first category so it
   reads as the top of a longer document. */
.split.flip{grid-template-columns:400px 1fr}
.split.flip > picture{order:-1}
.split .doc{border-radius:4px;box-shadow:var(--lift),0 34px 70px -34px rgba(0,0,0,.85);
  will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,#000 70%,transparent)}

.checks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.checks li{padding-inline-start:26px;position:relative;color:var(--muted-strong);font-size:16px}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
                   width:11px;height:2px;background:var(--brand)}

/* --- trust ------------------------------------------------------------ */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:220px 1fr;gap:26px;padding:24px 0;
     border-bottom:1px solid var(--line);
     transition:padding-inline-start .35s var(--ease)}
.row:hover{padding-inline-start:10px}
.row:hover h3{color:var(--brand)}
.row h3{transition:color .3s var(--ease)}
.row p{color:var(--muted-strong);font-size:16px}

/* --- demo form --------------------------------------------------------
   The form sits on its own raised plate. It is the one thing on the page
   actually being asked for, and giving it a surface is the cheapest way to
   say so. Safe to use the padding shorthand here: .form-grid never shares an
   element with .wrap. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:660px;margin-top:26px;padding:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--lift)}
/* The submit is a flex child of .field, so it stretches to the column unless
   told otherwise — justify-self, which the markup carries, does nothing in a
   flex container. */
.form-grid .btn{align-self:flex-start}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
label{font-size:14px;color:var(--muted)}
/* background-color, never the background shorthand: the select below draws
   its chevron as a background-image, and a shorthand on :focus would wipe it
   the moment the field is tapped. */
input,textarea,select{width:100%;padding:13px 15px;border-radius:8px;
  background-color:var(--surface);
  border:1px solid var(--line);color:var(--text);font:inherit;font-size:16px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),
             box-shadow .25s var(--ease)}
input:hover,textarea:hover,select:hover{border-color:#3d382e}
input:focus,textarea:focus,select:focus{background-color:var(--raise);border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,191,0,.1)}
textarea{min-height:104px;resize:vertical}
/* Native select, restyled only as far as the closed box. iOS otherwise draws
   a light grey pill on this dark plate. color-scheme gives the open list a
   dark menu on desktop; a phone opens its own picker either way. The chevron
   sits at the inline end, so it flips sides with the page. */
select{-webkit-appearance:none;appearance:none;color-scheme:dark;cursor:pointer;
  padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9A396' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:12px 8px;
  background-position:right 16px center}
[dir=rtl] select{background-position:left 16px center}
/* The disabled "choose" option is the placeholder: muted until something
   real is picked, which is when the required field turns valid. */
select:invalid{color:var(--muted)}
select option{color:var(--text);background:var(--surface)}

/* For the people who already have an invitation: the store badges, at the
   foot of the one section a prospect is sent to. Out of the hero so the top
   of the page asks for one thing. */
.get-app{margin-top:34px;padding-top:26px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  color:var(--muted);font-size:15px}
/* Official store badges, used unmodified per Apple's and Google's brand
   guidelines. Google's PNG carries ~33% built-in clear space, so it is set
   taller than Apple's to make the two artworks read the same size. */
.stores{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stores a{display:inline-flex;transition:transform .2s var(--ease);will-change:transform}
.stores a:hover{transform:translateY(-2px)}
.stores img{display:block;width:auto}
.badge-apple{height:42px}
.badge-google{height:62px;margin:-10px}

/* --- faq --------------------------------------------------------------
   Native <details>, so it opens with no script, from the keyboard, and in a
   browser's find-in-page. The marker is replaced by a plus that turns into a
   cross; it sits at the inline end, which is the left edge in Hebrew. */
.faq{border-top:1px solid var(--line);max-width:780px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding-block:20px;
  font-family:var(--display);font-size:19px;line-height:1.3;
  transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--brand);font-family:var(--body);
  font-size:26px;font-weight:400;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--brand)}
.faq details p{color:var(--muted-strong);font-size:16px;max-width:64ch;
  padding-block-end:22px}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
     clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- founders ---------------------------------------------------------
   One paragraph and a signature, set a size up from body copy and on no
   plate: a note from two people, not another feature block. The heading is
   a real h2 wearing the eyebrow style, so the outline still has it. A photo
   is meant to join this later; the block is text-only until then. */
.founder{max-width:720px;display:flex;flex-direction:column;gap:18px}
.founder-note{font-size:clamp(18px,2.2vw,22px);line-height:1.6;color:var(--text)}
.founder-note a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--brand);text-underline-offset:3px}
.founder-sign{font-family:var(--display);font-size:19px;color:var(--brand)}

/* --- footer ----------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding:38px 0 50px;color:var(--muted);font-size:15px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.foot-links a{color:var(--muted);transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--brand)}

@media(max-width:960px){
  /* The art column goes before the copy in the source order sense — no: it
     stays after, so a phone reads the argument first and meets the product
     underneath it, which is the order the desktop eye takes them in too. */
  .hero{grid-template-columns:1fr;gap:44px;padding-block:56px 44px}
  .hero h1{max-width:none}
  .hero-art{max-width:340px;margin-inline:auto;width:100%}
}
@media(max-width:860px){
  /* One or two columns wide, a full-height phone per cell would be about
     three thousand pixels of video to scroll past before the next section.
     Crop to the top of the screen instead: that is where every one of these
     clips does its work, and the part lost at the bottom is the nav bar. */
  .cell-loop{max-height:460px;object-fit:cover;object-position:top}
  .board{grid-template-columns:repeat(2,1fr)}
  .cell:nth-child(3){border-inline-start:0}
  .cell:nth-child(3),.cell:nth-child(4){border-top:1px solid var(--line)}
  /* minmax(0,…), not a bare 1fr: a 1fr track never shrinks below its
     widest child, and the report image's 880px intrinsic width would
     otherwise hold the column wider than a phone. */
  .split,.split.flip{grid-template-columns:minmax(0,1fr);gap:30px}
  /* min(…,100%): a bare pixel max-width here replaces img{max-width:100%}
     rather than adding to it, and the image then overflows any column
     narrower than the cap. */
  .split .shot{max-width:min(300px,100%);margin-inline:auto}
  .split.flip > picture{order:0}
  .split .doc{max-width:min(420px,100%);margin-inline:auto}
  .row{grid-template-columns:1fr;gap:7px}
  .row:hover{padding-inline-start:0}
  .form-grid{grid-template-columns:1fr;padding:22px}
  section{padding:62px 0}
}
@media(max-width:560px){
  .board{grid-template-columns:1fr}
  .cell{border-inline-start:0}
  .cell+.cell{border-top:1px solid var(--line)}
  /* The demo button leaves the header here for the bar at the bottom edge
     (.sticky-cta below), which is where a thumb is. The sign-in stays: an
     existing customer opening this on their phone is here to sign in, so it
     loses its border and tightens up instead of going.
     With the demo button gone, the Hebrew header has room for its wordmark
     again — three actions and a logotype did not fit across a 402pt iPhone,
     and the word used to be dropped under 480px to make them. */
  .nav{gap:10px}
  .nav-links{gap:2px}
  .nav-links .btn-solid{display:none}
  .btn{font-size:14px;padding:10px 14px}
  .nav-links .btn-ghost{border-color:transparent;background:none;padding-inline:8px;color:var(--muted-strong)}
  .mark{font-size:18px}
  .hero{padding-block:44px 32px;gap:38px}
}
@media(max-width:480px){
  .btn{font-size:13px;padding:9px 12px}
  .nav-links .btn-ghost{padding-inline:6px}
}

/* --- the phone CTA ----------------------------------------------------
   Phones only. landing-motion.js adds .is-shown between the hero's buttons
   leaving the screen and the demo section arriving. With no script the bar
   is simply always there, and the page gets room underneath it so the
   footer is never covered. visibility rides along with the slide so a
   hidden bar cannot take focus, and waits for the slide to finish before
   it applies. Safe to use the padding shorthand: this never carries .wrap. */
.sticky-cta{display:none}
@media(max-width:560px){
  .sticky-cta{display:block;position:fixed;inset-inline:0;bottom:0;z-index:30;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(10,9,8,.84);border-top:1px solid var(--line);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    backdrop-filter:saturate(160%) blur(14px);
    transition:transform .35s var(--ease),visibility 0s linear 0s}
  .sticky-cta .btn{display:block;width:100%;text-align:center;
    font-size:16px;padding:13px 16px}
  .js .sticky-cta:not(.is-shown){transform:translateY(110%);visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s}
  html:not(.js) body{padding-bottom:76px}
}