/*
Theme Name: Bramy Technologies
Theme URI: https://bramy-technology.com
Author: Bramy Group
Description: תבנית ייעודית לבראמי טכנולוגיות — סוכני AI ומערכות אוטומציה לעסקים. עברית RTL, ללא תלות בתוספים.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bramytech
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   One place for every value that repeats. A colour or a size that appears in
   two rules is a colour that will drift; here it can only be changed once.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── colour ──────────────────────────────────────────────────────────────
     The navy carries the brand and the blue carries every action, so the two
     are never used for each other's job. Cyan appears only as an accent on
     dark - on white it fails contrast at small sizes. */
  /* ── colour ──────────────────────────────────────────────────────────────
     One blue, four steps of it, and nothing else chromatic. The earlier build
     ran three darks and an accent cyan; every section that touched another
     needed a decision, and the decisions drifted. A single hue removes the
     question - depth comes from tint and shadow, never from a second colour. */
  --blue-700:#1B4FB8;
  --blue-600:#2670EE;      /* THE blue - buttons, links, active states */
  --blue-500:#3B82F6;
  --blue-400:#7FB0FA;
  --blue-100:#DCE9FE;
  --blue-50:#EFF5FF;

  --navy-900:#0B1B37;      /* headings only - blue-black, not grey */
  --navy-800:#12294C;

  --bg:#FFFFFF;
  --bg-mist:#F6F9FE;       /* a band, barely lifted off white */
  --bg-sky:#EFF5FF;        /* the most tinted band */
  --panel:#FFFFFF;

  --ink:#132441;
  --ink-soft:#5A6C89;
  --ink-faint:#93A2B8;
  --line:#DCE6F4;
  --line-soft:#EAF0FA;
  --white:#fff;
  --cyan-400:var(--blue-600);   /* kept as an alias so nothing dangles */

  /* ── type ────────────────────────────────────────────────────────────────
     Heebo for Hebrew: it was drawn as a Hebrew companion to a geometric sans,
     so its Latin and Hebrew share a skeleton and a mixed line does not look
     like two fonts fighting. Inter handles Latin-only strings (the wordmark,
     "AI", version numbers) where Heebo's Latin is a little narrow.

     Hebrew has no ascenders/descenders to speak of and no capitals, so it
     needs MORE leading than Latin at the same size, and NEVER negative
     tracking - letters that touch stop being readable. Both are set below. */
  --font:'Heebo','Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-latin:'Inter','Heebo',-apple-system,'Segoe UI',Arial,sans-serif;
  /* The wordmark alone. Poppins is drawn on true circles - its O, R and Y have
     rounded, open shapes where Inter's are squared off - so the name reads
     softer without losing authority. Kept OFF the interface: at 13px those same
     round counters cost legibility, which is exactly where Inter wins. */
  /* Manrope. Poppins was too generic - a perfect-circle geometric sans that
     half the startups on the internet use as their default. Space Grotesk
     went too far the other way: its curves are cut flat and its R and Y are
     mannered, which reads as a design studio rather than as a company.

     Manrope sits between them. Semi-geometric, slightly squared terminals,
     a very even colour across a word set in caps - which is exactly what a
     five-letter wordmark needs, since every flaw in the spacing shows. */
  --font-logo:'Manrope','Inter',-apple-system,'Segoe UI',Arial,sans-serif;

  /* A 1.25 scale, rounded to whole pixels so nothing lands on a half-pixel. */
  --t-hero:clamp(30px,4.6vw,52px);
  --t-h2:clamp(25px,3.1vw,36px);
  --t-h3:19px;
  --t-lead:clamp(15px,1.6vw,18px);
  --t-body:16px;
  --t-sm:14.5px;
  --t-xs:13px;
  --t-eyebrow:13px;

  --lh-tight:1.28;         /* headlines: Hebrew still needs air */
  --lh-body:1.85;          /* body: generous, Hebrew reads slower when packed */

  /* ── space & shape ───────────────────────────────────────────────────── */
  --maxw:1160px;
  --gut:22px;
  --sec:clamp(56px,7vw,92px);
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(19,36,65,.05),0 2px 8px rgba(19,36,65,.04);
  --shadow:0 6px 16px rgba(19,36,65,.07),0 18px 40px rgba(19,36,65,.09);
  --shadow-lg:0 12px 28px rgba(19,36,65,.10),0 34px 70px rgba(19,36,65,.14);
  --ring:0 0 0 3px rgba(38,112,238,.28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Matches the footer's last stop, so the elastic area past the end reads as
     more page rather than a white gap. The top overscrolls into the same dark,
     which suits the hero above it. */
  /* The page colour lives HERE, not on body: body::before draws the starfield
     at a negative z-index, which paints behind body's own background - so an
     opaque body hid the field completely. */
  background:var(--bg)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* One wash, not a starfield. The dotted field was doing the work of a colour
   and reading as a fifth surface; on white a single soft tint in one corner is
   enough to keep a tall page from being flat. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 620px at 88% -6%,rgba(38,112,238,.06),transparent 62%),
             radial-gradient(760px 560px at 4% 84%,rgba(38,112,238,.045),transparent 66%);
}

body{
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:400;
  color:var(--ink);
  /* Transparent, so the tint painted on <html> shows through the strip the
     rail floats over. An opaque body covered that tint edge to edge - including
     the channel beside the rail - which is the white band that made the card
     look socketed into the page instead of resting on it. Every section that
     needs a surface (the hero, the footer, the article sheet) paints its own. */
  background:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Hebrew numerals and Latin fragments inside Hebrew text keep their own
     direction without the paragraph flipping around them. */
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px}

/* Latin strings inside Hebrew: isolate so a trailing bracket or digit does not
   jump to the wrong end of the line. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--blue-600);
  color:#fff;padding:11px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:700}
.skip:focus{inset-inline-start:0}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4{
  line-height:var(--lh-tight);
  font-weight:800;
  color:var(--navy-900);
  /* Hebrew is an unicase script: -0.02em that flatters a Latin headline just
     closes the counters here. Zero, deliberately. */
  letter-spacing:0;
  text-wrap:balance;
}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:700}
p{text-wrap:pretty}

.eyebrow{
  font-size:var(--t-eyebrow);
  font-weight:700;
  color:var(--blue-600);
  letter-spacing:.06em;   /* small caps-ish rhythm; safe because it is Latin */
  text-transform:uppercase;
  font-family:var(--font-latin);
  margin-bottom:12px;
  display:block;
}
.eyebrow--he{font-family:var(--font);letter-spacing:.02em;text-transform:none;font-size:14px}
.eyebrow--cyan{color:var(--cyan-400)}

.sec-head{text-align:center;margin-bottom:clamp(30px,4vw,46px)}
.sec-head p{color:var(--ink-soft);font-size:var(--t-lead);max-width:56ch;margin:14px auto 0}
/* A rule under the heading, not a full-width divider: it marks the heading, so
   it is the width of a word and not the width of the page. */
.sec-head h2::after{
  content:"";display:block;width:54px;height:3px;border-radius:2px;
  background:var(--blue-600);
  margin:16px auto 0;
}
.sec-head--start{text-align:start}
.sec-head--start h2::after{margin-inline:0}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:var(--t-sm);font-weight:700;line-height:1;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--blue-600);color:#fff;
  border:1.5px solid transparent;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s,border-color .2s;
  box-shadow:0 4px 14px rgba(29,95,216,.28);
}
.btn:hover{background:var(--blue-500);transform:translateY(-2px);box-shadow:0 8px 22px rgba(29,95,216,.36)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:#fff;color:var(--blue-600);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--bg-sky);border-color:var(--blue-400);color:var(--blue-700)}
.btn--on-dark{background:#fff;color:var(--navy-800);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn--on-dark:hover{background:#EAF1FD;color:var(--navy-800)}
.btn--sm{padding:10px 18px;font-size:var(--t-xs)}
.btn--block{width:100%}
/* A text link that behaves like a button but does not compete with one. */
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:var(--t-sm);
  color:var(--blue-600);border-bottom:1.5px solid var(--blue-100);padding-bottom:3px;transition:border-color .2s,gap .2s}
.tlink:hover{border-color:var(--blue-600);gap:11px}
.tlink svg{width:20px;height:20px;flex:0 0 auto}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   A rail down the inline-start edge - the RIGHT in Hebrew. A back-office or a
   product site is read in long sessions, and a vertical list holds every
   destination at a fixed, memorised height while leaving the horizontal band
   to the content. The bar carries its own font-size so section scaling never
   changes the width the body is offset by.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 264px was too narrow once the labels grew: "קורסים והדרכות" and
     "מאמרים ועדכונים" wrapped onto two lines, which made the rows uneven and
     the whole column read as cramped. Widened so every label holds one line,
     and expressed as a clamp so it gives width back on a small laptop instead
     of eating the page. */
  --rail:clamp(272px,21vw,318px);
}

/* ── wordmark ──────────────────────────────────────────────────────────────
   These rules were lost when the top header was replaced by the rail, which is
   why the mark rendered full-width: an <svg> with no flex parent and no width
   falls back to filling its container. Restored here, where the rail lives. */
/* direction:ltr on the LOCKUP, not just on the text. The page is RTL, so the
   flex row was reversing and putting the mark to the LEFT of the name - the
   mirror image of the brand file, where the name leads and the cluster
   follows. A wordmark is an image of itself and does not flip with the page. */
/* A VERTICAL lockup: mark on top, name beneath, both centred on one axis. The
   row version is gone. direction:ltr stays - the Latin name must not reorder
   with the RTL page - and column-flex makes the rail's narrow measure an
   advantage instead of the constraint it was for a wide horizontal mark. */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  flex:0 0 auto;line-height:1;direction:ltr;text-align:center}
/* In the rail the mark is the masthead of the column, so it is scaled to it.
   The header bar and the footer keep the smaller size, which is why this is an
   override and not a change to the base. */
.rail .logo{gap:10px}
/* The mark leads the stack, so it is bigger than it was beside the name - and
   the box is now taller than wide because the diamond is. */
.rail .logo__mark{width:54px;height:54px}
/* "BRAMY GROUP" is nearly twice the width of "BRAMY", so the size that fitted
   the old one-word name overflows the rail. Sized to the column, not to the
   old lockup. */
.rail .logo__txt b{font-size:19px}
.rail .logo__txt span{font-size:8px;letter-spacing:.26em;text-indent:.26em;margin-top:5px}
.logo__mark{width:46px;height:46px;flex:0 0 auto;display:block}
.logo__txt{font-family:var(--font-logo);line-height:1;direction:ltr;display:block}
/* Poppins' caps are wide and round, so the name needs slightly NEGATIVE
   tracking to hold together as one shape - the opposite of the Hebrew rule.
   700 not 800: at this size the heaviest weight closes the counters of B and R. */
/* Both lines in the same weight now. 700 over a tracked 600 made the name and
   the descriptor look like two different typefaces stacked; at 600 they are
   plainly one mark, and the size difference alone does the ranking. */
/* Heavy, tight and dark - the reference mark carries its weight in the name
   and lets the dot cluster be the light part. */
/* Navy, not blue: the name is the anchor and the dot cluster is the colour.
   Two blues side by side made the lockup read as one soft blue smear - the
   dark name is what gives the mark somewhere to sit. */
.logo__txt b{display:block;font-size:18px;font-weight:700;letter-spacing:-.008em;color:var(--navy-900)}
/* The sub-line is short under a long word, so it is tracked wide to span the
   same measure. text-indent compensates for the trailing space tracking adds,
   which would otherwise push the word visibly off-centre. */
.logo__txt span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.30em;
  color:var(--navy-900);margin-top:5px;text-indent:.30em;white-space:nowrap}



.rail{
  /* Inset and rounded rather than flush to the edge: it reads as a panel the
     page is beside, not a chrome bar bolted to the window. The inset is part
     of --rail so the body's padding still clears it exactly. */
  position:fixed;inset-block:14px;inset-inline-start:14px;
  width:calc(var(--rail) - 28px);z-index:100;border-radius:24px;
  background:#fff;color:var(--ink-soft);border:1px solid var(--line-soft);
  box-shadow:0 10px 34px rgba(19,36,65,.09);overflow:hidden;
  display:flex;flex-direction:column;
  border-inline-end:0;
  font-size:15px;
}
/* The same constellation as the hero, so the rail reads as part of the same
   surface rather than a panel bolted onto it. */
/* Centred in the rail. Flush to the start edge, the mark's own diagonal made it
   look as though it had drifted left of the column it heads. */
/* The bottom padding is now the LARGER of the two. The lockup went vertical and
   gained a second text line, so its old clearance put "TECHNOLOGIES" almost
   against the active nav card - close enough that the two blocks read as one
   collided element even though nothing actually overlapped. A mark needs more
   air beneath it than above it to sit as a masthead rather than as a first
   list item. */
.rail__top{padding:clamp(14px,2vh,22px) 16px clamp(20px,3vh,32px);
  position:relative;z-index:1;display:flex;justify-content:center}
/* `safe center`, not plain `center`. This is the actual cause of the first nav
   item appearing to slide under the logo: a centred flex column whose content
   is TALLER than the box overflows in BOTH directions, so the top of the list
   is pushed above the container - clipped, and unreachable by scrolling, since
   scroll only ever reveals the bottom. The taller vertical lockup is what made
   the content exceed the box. `safe` keeps the centring while there is room and
   falls back to flex-start the moment there is not. */
.rail__scroll{flex:1 1 auto;overflow-y:auto;padding:2px 14px;position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:safe center;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail__scroll::-webkit-scrollbar{width:5px}
.rail__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail__foot{padding:clamp(12px,1.8vh,18px) 14px clamp(14px,2.2vh,22px);
  position:relative;z-index:1}

/* One tone for both lines; the size difference alone does the ranking. */



.rnav{display:grid;gap:2px}
.rnav a{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:clamp(7px,1.1vh,11px) 12px;border-radius:14px;color:var(--ink-soft);
  transition:background .2s,color .2s,padding-inline-start .22s;
}
/* The icon sits in its own tile. A bare glyph beside text floats; a tile gives
   every item the same optical start, which is what makes a vertical list scan. */
.rnav__ic{width:clamp(34px,4.6vh,42px);height:clamp(34px,4.6vh,42px);flex:0 0 auto;
  border-radius:13px;display:grid;place-items:center;
  background:var(--bg-sky);color:var(--blue-600);
  transition:background .22s,color .22s,transform .22s}
/* The mark is a filled cluster, not a stroked glyph, so it needs a little more
   of the tile than a line icon did to carry the same weight. */
.rnav__ic svg{width:66%;height:66%}
/* In the rail the mark stands on its own, so it wears the wordmark's own
   cyan-to-periwinkle ramp rather than one flat blue - the nav then repeats the
   identity down the column instead of eight generic chevrons. */
.rnav__ic svg circle{fill:var(--c,currentColor)}
/* Except on the active row, where the tile turns solid blue: there the cluster
   goes white, because the ramp has nothing left to sit on. */
.rnav a.is-active .rnav__ic svg circle{fill:#fff}
/* With one icon repeated, the active row has to be told apart by its state
   alone - so it is stronger here than it needed to be before. */
.rnav a.is-active{box-shadow:inset 0 0 0 1px var(--blue-100)}
.rnav a.is-active .rnav__t b{font-weight:700}
.rnav__t{min-width:0}
.rnav__t b{display:block;font-size:15.5px;font-weight:600;line-height:1.35}
.rnav a:hover{background:#fff;color:var(--navy-900);padding-inline-start:16px;
  box-shadow:0 4px 14px rgba(19,36,65,.08)}
.rnav a:hover .rnav__ic{background:var(--blue-100)}
.rnav a.is-active{background:#fff;color:var(--navy-900);
  box-shadow:0 6px 18px rgba(19,36,65,.10)}
.rnav a.is-active .rnav__ic{background:var(--blue-600);color:#fff;
  box-shadow:0 6px 16px rgba(38,112,238,.32)}
.rnav a.is-active::before{content:"";position:absolute;inset-inline-start:-13px;top:50%;
  transform:translateY(-50%);width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--blue-600)}
html[dir="ltr"] .rnav a.is-active::before{border-radius:3px 0 0 3px}

/* ── the rail's call to action ────────────────────────────────────────────
   Not the pill used everywhere else. This one names the commitment - a quarter
   of an hour, free - because the objection to "book a demo" is never the demo,
   it is not knowing what it costs in time. */
.railcta{display:flex;align-items:center;gap:12px;padding:clamp(10px,1.5vh,14px) 15px;border-radius:16px;
  background:linear-gradient(135deg,#2670EE,#1D5FD8);color:#fff;
  box-shadow:0 10px 26px rgba(29,95,216,.36);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s}
.railcta:hover{transform:translateY(-2px);background:linear-gradient(135deg,#3B82F6,#2670EE);
  box-shadow:0 14px 32px rgba(29,95,216,.46)}
.railcta__t{flex:1 1 auto;min-width:0}
/* One line each, and neither is allowed to break - a two-word label that wraps
   is what left "כאן" sitting alone under the rest. */
.railcta__t b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.railcta__t i{white-space:nowrap}
.railcta__t i{display:block;font-style:normal;font-size:11px;opacity:.82;margin-top:2px}
.railcta__go{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);transition:transform .22s}
.railcta__go svg{width:19px;height:19px}
.railcta:hover .railcta__go{transform:translateX(-4px)}
html[dir="ltr"] .railcta:hover .railcta__go{transform:translateX(4px)}

.rail__meta{margin-bottom:14px;display:grid;gap:9px}
.rail__meta a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);transition:color .2s}
.rail__meta a:hover{color:var(--blue-600)}
.rail__meta svg{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.rail__foot .btn{width:100%}

/* The page sits beside the rail. A margin (not a transform) so a long page
   still scrolls normally and nothing is dragged underneath the bar. */
body{padding-inline-start:var(--rail)}
/* The strip the rail floats over takes the page's own tint. Left white it read
   as a rectangle behind the card - which is what "the rail went rectangular
   again" actually was. */
html{background:linear-gradient(180deg,var(--blue-50),#fff 60%) fixed}
/* And stop the elastic bounce past the end, which reads as more page. */
html{overscroll-behavior-y:none}

/* ── the bar that appears only when the rail is off-canvas ─────────────── */
.topbar{display:none;position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-soft)}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.burger{width:42px;height:42px;border-radius:var(--r-sm);display:inline-flex;align-items:center;
  justify-content:center;color:var(--navy-900);margin-inline-start:auto}
.burger svg{width:23px;height:23px}

@media(max-width:1080px){
  body{padding-inline-start:0}
  .topbar{display:block}
  .rail{inset:0;border-radius:0;border:0;transform:translateX(100%);
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
    box-shadow:-14px 0 44px rgba(19,36,65,.18);width:min(288px,86vw)}
  html[dir="ltr"] .rail{transform:translateX(-100%)}
  .rail.is-open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(7,18,41,.6);opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s;z-index:99}
  .scrim.is-open{opacity:1;visibility:visible}
}
@media(min-width:1081px){.scrim{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
/* `slice` on the SVG makes the circle field cover the section at any ratio, so
   it crops rather than distorts - the same behaviour as a background-size:cover
   image, without the image. */
.hero{position:relative;background:linear-gradient(180deg,var(--blue-50),#fff 78%);color:var(--ink);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-8% -6%;width:112%;height:116%;z-index:-1;
  color:var(--blue-600);opacity:.09;pointer-events:none;
  /* Two motions at once, at different speeds: the whole field drifts on a long
     cycle while each circle breathes on its own. One movement alone reads as a
     slide; two at odds read as something alive. */
  animation:bgDrift 46s ease-in-out infinite;
  transform-origin:60% 40%;
  will-change:transform;
}
.hero__bg circle{animation:bgBreathe 18s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
/* Prime-ish delays so the circles never fall into step and start pulsing as a
   group - that is what makes a background look like a loading animation. */
.hero__bg circle:nth-child(2){animation-delay:-2.3s;animation-duration:21s}
.hero__bg circle:nth-child(3){animation-delay:-5.1s;animation-duration:16s}
.hero__bg circle:nth-child(4){animation-delay:-7.7s;animation-duration:23s}
.hero__bg circle:nth-child(5){animation-delay:-1.4s;animation-duration:19s}
.hero__bg circle:nth-child(6){animation-delay:-9.2s;animation-duration:17s}
.hero__bg circle:nth-child(7){animation-delay:-3.8s;animation-duration:24s}
.hero__bg circle:nth-child(8){animation-delay:-6.6s;animation-duration:20s}
.hero__bg circle:nth-child(9){animation-delay:-11.3s;animation-duration:15s}
.hero__bg circle:nth-child(10){animation-delay:-4.5s;animation-duration:22s}
.hero__bg circle:nth-child(11){animation-delay:-8.9s;animation-duration:18s}
.hero__bg circle:nth-child(12){animation-delay:-2.9s;animation-duration:25s}
.hero__bg circle:nth-child(13){animation-delay:-10.4s;animation-duration:19s}

@keyframes bgDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-1.6%,1.2%,0) scale(1.035)}
  66%    {transform:translate3d(1.3%,-1.5%,0) scale(1.015)}
}
@keyframes bgBreathe{
  0%,100%{transform:translateY(0) scale(1);opacity:1}
  50%    {transform:translateY(-6px) scale(1.07);opacity:.82}
}
/* A decorative background is exactly what a motion-sensitivity setting is for. */
@media(prefers-reduced-motion:reduce){
  .hero__bg,.hero__bg circle{animation:none}
}
@media(max-width:900px){.hero__bg{opacity:.06}}

/* The page heads carry the same mark, so they drift too - slower, because they
   sit under a heading someone is trying to read. */
.phead__mark{animation:bgDrift 64s ease-in-out infinite;transform-origin:30% 50%;will-change:transform}
@media(prefers-reduced-motion:reduce){.phead__mark{animation:none}}
/* Two washes and a constellation, all painted rather than loaded: the hero is
   the first thing rendered, and an image here delays it for nothing. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(720px 420px at 30% 16%,rgba(38,112,238,.10),transparent 66%);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:center;padding-block:clamp(44px,6vw,80px)}
.hero h1{color:var(--navy-900);margin-bottom:18px}
/* "העסק שלכם" is one idea and must break as one. */
.hero h1 em{font-style:normal;color:var(--blue-600);white-space:nowrap}
.hero h1{text-wrap:normal}
.hero p.lead{color:var(--ink-soft);font-size:var(--t-lead);max-width:46ch;margin-bottom:28px}
.hero__acts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* ── the illustration ────────────────────────────────────────────────────── */
.hero__art{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.hero__art svg{width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(19,36,65,.16))}

/* The capability chips sit BESIDE the artwork in their own column, not on top
   of it. Overlapping them was costing the screen its subject: the cards covered
   the very thing they annotate, and a negative offset put them under the text
   column at some widths. A grid column cannot collide with anything. */
.chips{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);flex:0 0 auto}
.chip{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;
  font-size:var(--t-sm);font-weight:700;color:var(--navy-900);white-space:nowrap;
  box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.chip:nth-child(2){animation-delay:-2s}
.chip:nth-child(3){animation-delay:-4s}
.chip svg{width:19px;height:19px;color:var(--blue-600);flex:0 0 auto}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.chip{animation:none}}

/* ── the home page: one section, the whole window ────────────────────────── */
/* The height was measured against the dock's TAB (74px) and the dock then grew
   into an open panel roughly 240px tall - so the buttons ended up underneath
   it. The section is a full viewport with the dock's real footprint reserved as
   padding, and the content centres in what is left above it. */
.home .hero{
  min-height:100dvh;display:flex;align-items:center;
  padding-bottom:clamp(190px,25vh,265px);
}
/* min-height is a FLOOR, and that is what left the home page with ten-odd
   pixels of scroll: the content ran past the window and the section grew with
   it. On a desktop window there is room, so the height becomes exact - the page
   is the window, and nothing moves. Left as a floor below 1024px, where the
   hero genuinely cannot fit and hiding the CTA would be worse than scrolling. */
@media (min-width:1024px){
  /* Capping the SECTION was not enough: the scrollbar belongs to the document,
     and anything else in the page - the fixed dock, the fab column - could
     still push it past the window. So the document itself is pinned to the
     window on the home page, which is the only way to guarantee zero scroll
     rather than merely make it unlikely. */
  html:has(body.home),body.home{height:100%;overflow:hidden}
  .home .hero{height:100dvh;overflow:hidden}
  /* The wrap gives back the few pixels the cap now needs, so the tightening is
     paid for in whitespace rather than in clipped content. */
  .home .hero .wrap{padding-block:clamp(12px,2vw,32px)}
}
/* Closed, the dock only needs room for its pill. */
body:has(.qlead:not(.is-open)) .home .hero{padding-bottom:clamp(70px,9vh,96px)}
/* The page-wide 1160px measure is right for a reading column and wrong for a
   composition meant to hold a screen - on a wide monitor it marooned both
   halves in the middle with dead margins. The hero gets its own measure. */
.home .hero .wrap{
  width:100%;max-width:1620px;
  padding-block:clamp(24px,3vw,44px);
  padding-inline:clamp(20px,4.5vw,64px);
  /* Text first and wider: four words of Hebrew headline at 60px need room, and
     the earlier near-equal split is what forced it onto four cramped lines. */
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
}
.home .hero h1{font-size:clamp(30px,3.9vw,56px);margin-bottom:18px}
.home .hero p.lead{font-size:clamp(15px,1.2vw,18.5px);max-width:44ch;margin-bottom:24px}
.home .hero .eyebrow{font-size:clamp(12px,.85vw,14px);margin-bottom:12px}
.home .chip{font-size:clamp(13px,1vw,15px);padding:14px 18px}
.home .chip svg{width:21px;height:21px}

@media(min-width:1900px){.home .hero .wrap{max-width:1760px}}

@media(max-width:1100px){
  /* Below this the chips column squeezes the artwork; they go under it. */
  .hero__art{flex-direction:column}
  .chips{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}
  .chip{flex:1 1 auto}
}
@media(max-width:900px){
  .hero .wrap,.home .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin-inline:auto}
  .hero__acts{justify-content:center}
  .hero__art{order:-1;max-width:560px;margin-inline:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.stats{background:var(--bg-mist);border-block:1px solid var(--line-soft)}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr);padding-block:34px}
.stats li{text-align:center;padding-inline:16px;position:relative}
/* Hairlines BETWEEN items only. A border on every item leaves a stray rule at
   the edge of the row. */
.stats li+li::before{content:"";position:absolute;inset-inline-end:100%;top:12%;height:76%;
  width:1px;background:var(--line)}
.stats svg{width:30px;height:30px;color:var(--blue-600);margin:0 auto 10px}
.stats b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--navy-900)}
@media(max-width:760px){
  .stats ul{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .stats li:nth-child(odd)+li::before{inset-inline-end:100%}
  .stats li:nth-child(3)::before{display:none}
}
@media(max-width:400px){.stats ul{grid-template-columns:1fr}.stats li+li::before{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.sec{padding-block:var(--sec)}
.sec--mist{background:var(--bg-mist);position:relative}
.sec--mist::before,.sec--sky::before,.sec--mist::after,.sec--sky::after{
  content:"";position:absolute;inset-inline:0;height:1px;background:var(--line-soft)}
.sec--mist::before,.sec--sky::before{top:0}
.sec--mist::after,.sec--sky::after{bottom:0}
.sec--sky{background:var(--bg-sky);position:relative}

/* ── solution cards ──────────────────────────────────────────────────────
   Rebuilt. The first version was the shape every AI landing page ships with:
   a rounded-square icon, a title, three lines and a blue pill. It read as a
   template because it WAS one. This one earns its space - the icon sits on the
   same line as a numbered label, the promise is broken into checkable points,
   and the action is a link with an arrow, so three cards side by side are not
   three blue buttons demanding to be pressed at once. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-soft);border-radius:22px;
  padding:28px 26px 24px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
/* A wash that grows from the corner on hover instead of the whole card
   changing colour - it suggests depth without repainting the page. */
.card::after{content:"";position:absolute;inset-inline-end:-30%;top:-45%;width:74%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(38,112,238,.14),transparent 66%);
  opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.card:hover::after{opacity:1;transform:scale(1)}

.card__top{display:flex;align-items:center;gap:13px;margin-bottom:16px;position:relative;z-index:1}
.card__ic{
  width:52px;height:52px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;
  box-shadow:0 8px 18px rgba(29,95,216,.30);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__ic{transform:rotate(-6deg) scale(1.06)}
.card__ic svg{width:25px;height:25px;stroke-width:1.7}
/* The number is the quiet part: it orders the set without being read first. */
.card__n{font-family:var(--font-latin);font-size:12px;font-weight:700;color:var(--ink-faint);
  letter-spacing:.14em;margin-inline-start:auto}
.card h3{margin-bottom:10px;position:relative;z-index:1}
.card p{color:var(--ink-soft);font-size:var(--t-sm);position:relative;z-index:1}

.card__pts{margin:16px 0 20px;display:grid;gap:9px;position:relative;z-index:1}
.card__pts li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.card__pts svg{width:17px;height:17px;flex:0 0 auto;color:var(--blue-600);margin-top:3px}

.card__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1;
  font-size:var(--t-sm);font-weight:700;color:var(--blue-600);transition:gap .22s}
.card__go svg{width:20px;height:20px;transition:transform .22s}
.card:hover .card__go{gap:12px}
@media(max-width:900px){.cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ── technology band ───────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.split__art svg{width:100%;height:auto}
.ticks{margin:22px 0 28px;display:grid;gap:13px}
.ticks li{display:flex;align-items:center;gap:11px;font-weight:600;font-size:var(--t-sm);color:var(--ink-soft)}
.ticks svg{width:21px;height:21px;color:var(--blue-600);flex:0 0 auto}
.split p{color:var(--ink-soft)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split__art{order:-1;max-width:460px;margin-inline:auto}}

/* ── process ───────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;max-width:1080px;margin-inline:auto}
/* One connector behind the row, clipped to stop under the first and last dot -
   a line per step leaves a tail hanging off both ends. */
.steps::before{content:"";position:absolute;top:29px;inset-inline:16.6%;height:3px;
  background:linear-gradient(90deg,var(--line),var(--blue-400),var(--line));z-index:0}
.step{text-align:center;position:relative;z-index:1}
.step__n{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;
  background:var(--blue-600);color:#fff;font-weight:800;font-size:21px;
  box-shadow:0 0 0 9px var(--bg-mist),0 8px 22px rgba(38,112,238,.34);font-family:var(--font-latin)}

.step__ic{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;margin:0 auto 18px;
  background:#fff;border:1px solid var(--line-soft);color:var(--blue-600);box-shadow:var(--shadow-sm)}
.step__ic svg{width:36px;height:36px;stroke-width:1.6}
.step b{display:block;font-size:21px;font-weight:800;color:var(--navy-900)}
.step span{display:block;font-size:15px;color:var(--ink-soft);margin-top:9px;line-height:1.75;max-width:30ch;margin-inline:auto}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:40px}.steps::before{display:none}}

/* ── testimonials ────────────────────────────────────────────────────────
   A marquee rather than a grid of two. Six quotes read as a business with
   customers; two read as two. It scrolls on its own so the section is alive
   without asking anyone to press a control, and pauses on hover so a quote
   that caught the eye can actually be finished. Duplicated in the markup and
   translated -50%, which is what makes the loop seamless. */
/* The RAIL is LTR, not just the track. In an RTL parent a max-content flex row
   is laid out from the right edge leftwards, so the visible window fell on the
   far end of the duplicated content and the section looked empty. Forcing LTR
   here makes it an ordinary marquee; each card is set back to RTL below. */
.qrail{position:relative;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* LTR on the track even in Hebrew: an RTL flex row reverses the duplicated
   halves and the seam opens up on every loop. The cards are set back to RTL. */
.qrail__track{display:flex;gap:20px;width:max-content;
  animation:qscroll 46s linear infinite}
.qrail:hover .qrail__track,.qrail__track:focus-within{animation-play-state:paused}
@keyframes qscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.qrail__track{animation:none;overflow-x:auto;width:auto}}

.quote{direction:rtl;flex:0 0 auto;width:min(400px,84vw);
  background:#fff;border:1px solid var(--line-soft);border-radius:22px;padding:26px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.qstars{display:flex;gap:3px;margin-bottom:14px}
.qstars svg{width:16px;height:16px;color:#F5A524;fill:#F5A524;stroke-width:1.2}
.quote p{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.9;flex:1 1 auto}
.quote footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px}
/* Initials instead of a stock portrait: an invented face is a lie, and a
   grey placeholder avatar is worse than none. */
.qav{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;font-weight:800;font-size:15px}
.quote footer b{display:block;font-size:13.5px;color:var(--navy-900)}
.quote footer span{display:block;font-size:12px;color:var(--ink-faint);font-weight:500;margin-top:2px}

/* ── faq ───────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--blue-100);box-shadow:var(--shadow)}
.faq summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:17px 22px;font-weight:700;font-size:var(--t-sm);color:var(--navy-900)}
.faq summary::-webkit-details-marker{display:none}
/* A plus that becomes a minus. The rotation says "this opened" more clearly
   than a chevron flip at this size. */
.faq summary::after{content:"";inline-size:13px;block-size:13px;margin-inline-start:auto;flex:0 0 auto;
  background:currentColor;color:var(--blue-600);transition:transform .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{padding:0 22px 20px;color:var(--ink-soft);font-size:var(--t-sm)}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA + FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.cta{background:linear-gradient(170deg,var(--blue-50),#fff 60%,var(--blue-50));color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(640px 380px at 68% 18%,rgba(38,112,238,.09),transparent 64%)}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-block:var(--sec)}
.cta h2{color:var(--navy-900)}
.cta p{color:var(--ink-soft);margin-top:14px}
.cta .ticks li{color:var(--ink-soft)}
.cta .ticks svg{color:var(--blue-600)}

/* A glass panel, not a white sheet. A flat white card on a navy band is a hole
   punched in the section; this one is tinted, translucent and hairlined so it
   sits ON the surface instead of cutting through it. */
.form{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:26px;padding:30px 28px;display:grid;gap:15px;
  box-shadow:var(--shadow-lg);
}
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.form input,.form textarea{
  width:100%;background:var(--bg-mist);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;font-size:var(--t-sm);color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue-500);
  background:#fff;box-shadow:var(--ring)}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-faint)}
.form textarea{min-height:104px;resize:vertical;line-height:1.7}
.form .hp{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.form__note{font-size:var(--t-xs);min-height:19px;font-weight:600}
.form__legal{font-size:11.5px;color:var(--ink-faint);line-height:1.6;text-align:center}


@media(max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.ftr{background:var(--bg-mist);border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:var(--t-sm);position:relative}
/* The same dot field as the rail and the hero, fading out downwards, so the
   footer reads as the bottom of one surface rather than a separate black band. */
/* The CTA band above is the same navy, so the two need no seam between them. */
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-block:clamp(40px,5vw,60px)}
.ftr h4{color:var(--navy-900);font-size:var(--t-sm);font-weight:700;margin-bottom:16px}
.ftr__about{margin-top:16px;font-size:var(--t-xs);line-height:1.8;max-width:34ch}
.ftr__badges{margin-top:14px;display:grid;gap:8px}
.ftr__badges li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
.ftr__badges svg{width:15px;height:15px;color:var(--blue-600);flex:0 0 auto}
.ftr__contact p{font-size:12.5px;line-height:1.75;margin-bottom:14px;color:var(--ink-soft)}
.ftr__lines{display:grid;gap:11px;margin-bottom:18px}
.ftr__lines li{font-size:12.5px}
.ftr__lines li,.ftr__lines li>a{display:flex;align-items:center;gap:9px;white-space:nowrap}
.ftr__lines svg{width:15px;height:15px;flex:0 0 auto;color:var(--blue-600)}
.ftr ul{display:grid;gap:10px}
.ftr a{font-size:var(--t-xs);transition:color .2s}
.ftr a:hover{color:var(--blue-600)}
.social{display:flex;gap:9px;margin-top:18px}
.social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--blue-600);transition:background .2s,transform .2s,color .2s}
.social a:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px)}
.social svg{width:16px;height:16px}
/* The clearance for the fixed dock lives INSIDE the footer, not on the body.
   On the body it was padding below the last background - a white strip under a
   tinted footer. Here the footer's own surface extends behind the dock and the
   page ends where it looks like it ends. */
/* The legal links live on the same line as the copyright - they are notices,
   not navigation, and a row of their own would give them weight they have not
   earned. */
.ftr__legal{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.ftr__legal a{border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.ftr__legal a:hover{color:var(--blue-600);border-color:var(--blue-600)}
.a11y__note a{border-bottom:1px solid transparent}
.a11y__note a:hover{border-color:var(--blue-600)}
.ftr__base{border-top:1px solid var(--line);padding-top:18px;padding-bottom:92px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-faint)}
/* The parent brand, stated as a credit rather than buried in a sentence. The
   name is Latin and set in the wordmark face, so it reads as the mark it is. */
.powered{display:inline-flex;align-items:center;gap:7px;font-size:11px;
  direction:ltr;unicode-bidi:isolate;
  color:var(--ink-faint);transition:color .2s}
.powered:hover{color:var(--blue-600)}
.powered b{font-family:var(--font-logo);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--navy-900);direction:ltr}
.powered .dot{width:5px;height:5px;border-radius:50%;background:var(--blue-600);flex:0 0 auto}
@media(max-width:560px){.ftr__base{justify-content:center;text-align:center}}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES
   The first attempt banded each h2 and its following siblings into a card with
   `h2 ~ *`. That selector matches EVERY later sibling, not the ones belonging
   to that heading, so borders bled across sections and only the final element
   ever closed a card. This version puts the whole article on ONE surface and
   styles the elements inside it - no sibling gymnastics, nothing to misfire,
   and an editor can add any block without breaking the layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.prose{
  max-width:1400px;margin-inline:auto;
  padding-block:clamp(34px,4.5vw,56px);
}
.prose__in{
  position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:26px;
  box-shadow:var(--shadow);
  padding:clamp(28px,3.4vw,60px);
  /* 900px was a reading measure for a bare column of text. The sheet is a
     surface with structure on it - numbered headings, list rows, a spine - and
     at that width it sat as a narrow strip in the middle of a wide screen.
     The SHEET is wide; the paragraphs inside it keep their own measure below. */
  max-width:1240px;margin-inline:auto;overflow:hidden;
}
/* A brand rule across the top of the sheet - the one place the page needs a
   line, and it says which site this is. */
.prose__in::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-400) 60%,transparent)}

/* The opening paragraph, set as a standfirst and separated by a rule rather
   than by empty space. */
/* The standfirst as a panel, not a paragraph with a rule under it. It is the
   one piece of the page that has to be read, so it is given a surface. */
.prose .lead-p{
  font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.85;color:var(--navy-800);
  font-weight:500;margin:0 0 34px;padding:22px 24px 22px 26px;max-width:none;
  background:var(--blue-50);border-radius:16px;
  border-inline-start:4px solid var(--blue-600);
}

/* Headings are numbered by CSS - the editor writes a plain h2 and the page
   gains a visible spine down the article without anyone maintaining it. */
.prose{counter-reset:sec}
.prose h2{
  counter-increment:sec;
  font-size:clamp(19px,2.1vw,25px);color:var(--navy-900);
  margin:44px 0 16px;padding-inline-start:52px;position:relative;min-height:38px;
  display:flex;align-items:center;
}
.prose h2:first-child{margin-top:0}
.prose h2::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:0;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;
  font-family:var(--font-latin);font-size:13px;font-weight:700;
  box-shadow:0 6px 14px rgba(38,112,238,.28);
}
/* A hairline that runs from the heading to the edge of the sheet, so each
   section visibly starts rather than just continuing. */
.prose h2::after{content:"";position:absolute;inset-inline-end:0;top:50%;
  width:calc(100% - 68px);height:1px;background:var(--line-soft)}

.prose h3{font-size:16.5px;color:var(--navy-900);margin:26px 0 8px;
  display:flex;align-items:center;gap:9px}
.prose h3::before{content:"";width:6px;height:6px;flex:0 0 auto;
  background:var(--blue-400);transform:rotate(45deg)}

/* The line length stays readable even though the sheet grew - a paragraph
   running the full 1240px would be unreadable no matter how well it is set. */
.prose p{margin-bottom:15px;color:var(--ink-soft);font-size:15.5px;line-height:1.9;max-width:78ch}
.prose strong{color:var(--navy-900);font-weight:700}

/* Lists become rows on a tinted surface - a claim you can run your eye down. */
.prose ul{margin:0 0 20px;display:grid;gap:9px;padding:0}
.prose ul li{
  position:relative;padding:14px 48px 14px 18px;font-size:14.8px;line-height:1.75;max-width:none;
  background:var(--bg-mist);border:1px solid var(--line-soft);border-radius:13px;
  color:var(--ink-soft);
}
.prose ul li::before{content:"";position:absolute;inset-inline-start:14px;top:14px;
  width:20px;height:20px;border-radius:6px;background:var(--blue-100)}
.prose ul li::after{content:"";position:absolute;inset-inline-start:19px;top:20px;
  width:10px;height:6px;border-inline-start:2px solid var(--blue-600);
  border-bottom:2px solid var(--blue-600);transform:rotate(-45deg)}
.prose ul li strong{color:var(--navy-900)}

.prose a{color:var(--blue-600);font-weight:600;border-bottom:1px solid var(--blue-100)}
.prose a:hover{border-color:var(--blue-600)}

/* The page head sits directly on the article, so it does not need to reserve
   half a screen of its own. */
.phead{padding-block:clamp(34px,4.2vw,56px);overflow:hidden}
.phead .wrap{position:relative;z-index:1}
/* Bled off the start edge and faded, so it is scenery and never competes with
   the title sitting on it. */
.phead__mark{position:absolute;inset-block:-18%;inset-inline-start:-4%;
  height:136%;width:auto;color:var(--blue-600);opacity:.10;z-index:0;pointer-events:none}
@media(max-width:900px){.phead__mark{opacity:.06;inset-inline-start:-24%}}

/* The article overlaps the head slightly - it reads as one continuous page
   rather than two stacked bands with a gap between them. */
.prose{padding-block:0 clamp(34px,4.5vw,56px);margin-top:clamp(-40px,-3.4vw,-24px);position:relative;z-index:2}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DOCK — quick lead, floating controls, accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
.rnav__grp{display:block;padding:clamp(8px,1.4vh,15px) 14px 5px;font-size:10.5px;font-weight:700;
  letter-spacing:.10em;color:var(--ink-faint)}

/* ── quick lead ──────────────────────────────────────────────────────────
   Pinned, and collapsed to a single line by default. A form that covers the
   page it is trying to sell is a form people close. */
.qlead{position:fixed;inset-inline:0;bottom:14px;z-index:95;pointer-events:none;
  padding-inline-start:var(--rail);display:flex;flex-direction:column;align-items:center}
.qlead__pull,.qlead__body{pointer-events:auto}
/* Chevron only, and a pill rather than a welded tab: the panel is a floating
   card now, so a square-shouldered tab attached to its top edge read as a
   different object stuck onto it. */
.qlead__pull{display:grid;place-items:center;margin-inline:auto;
  background:var(--blue-600);color:#fff;
  border-radius:var(--r-pill);padding:9px 30px;margin-bottom:-16px;
  position:relative;z-index:1;border:3px solid var(--bg);
  box-shadow:0 6px 18px rgba(38,112,238,.34);transition:background .2s}
.qlead__pull:hover{background:var(--blue-500)}
.qlead__pull svg{width:20px;height:20px;stroke-width:2.8;transition:transform .3s}
.qlead.is-open .qlead__pull svg{transform:rotate(180deg)}

.qlead__body{
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:26px;
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 14px 44px rgba(19,36,65,.18);
  padding:0 clamp(18px,3vw,30px);
  display:grid;grid-template-columns:auto 1fr;gap:8px 26px;align-items:center;
  width:min(1160px,calc(100% - 28px));
  /* Collapsed by height, not display:none - a hidden panel cannot animate, and
     a panel that appears without motion reads as a page jump. */
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .38s cubic-bezier(.2,.8,.2,1),opacity .28s,padding .38s}
.qlead.is-open .qlead__body{max-height:380px;opacity:1;padding:30px clamp(18px,3vw,30px) 26px}
.qlead__intro b{display:block;font-size:18px;font-weight:800;color:var(--navy-900)}
.qlead__intro span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.qlead__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Four fields and a button on one line at desktop widths: the button was
   wrapping because the inputs were each allowed to grow past their share.
   :not(.hp) matters - the honeypot is an input too, and giving it a width and
   a flex share is exactly what put an empty fifth box on the row. */
.qlead__form input:not(.hp){flex:1 1 0;min-width:118px}
/* Belt and braces, since the trap only works while nobody can see it. */
.qlead__form .hp{position:absolute!important;width:1px!important;height:1px!important;
  min-width:0!important;flex:0 0 0!important;opacity:0;padding:0;border:0;pointer-events:none}
/* Right-aligned like the rest of the page. A phone number typed into an RTL
   field still reads correctly - the browser resolves digits on its own - so the
   field does not need to be LTR, and making it LTR only pushed its Hebrew
   placeholder to the wrong edge. */
.qlead__form input:not(.hp){text-align:start;direction:rtl;background:var(--bg-mist);
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:14px 20px;font-size:14.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.qlead__form input:focus{outline:none;border-color:var(--blue-500);background:#fff;box-shadow:var(--ring)}
.qlead__form input::placeholder{color:var(--ink-faint)}
.qlead__form .btn{flex:0 0 auto;padding:14px 34px;font-size:15px}
.qlead__legal{grid-column:1/-1;font-size:11px;color:var(--ink-faint);line-height:1.6;text-align:center;margin-top:6px}
@media(max-width:1080px){.qlead{padding-inline-start:0}}
@media(max-width:1180px){.qlead__form input{flex:1 1 140px}}
@media(max-width:820px){
  .qlead__body{grid-template-columns:1fr;gap:12px}
  .qlead.is-open .qlead__body{max-height:80vh;overflow-y:auto}
  .qlead__form input,.qlead__form .btn{flex:1 1 100%}
}

/* ── floating controls ───────────────────────────────────────────────────── */
/* Just above the dock, not floating halfway up the screen. The offset tracks
   the dock's state through a variable so the button drops when the panel is
   closed and rises only as far as it has to when it is open. */
.fabs{position:fixed;inset-inline-end:20px;bottom:var(--fab-b,252px);z-index:96;
  display:flex;flex-direction:column;gap:11px;transition:bottom .38s cubic-bezier(.2,.8,.2,1)}
.qlead:not(.is-open) ~ .fabs,.qlead:not(.is-open) ~ .a11y{--fab-b:64px}
.fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:linear-gradient(145deg,#2670EE,#1D5FD8);color:#fff;
  border:1px solid rgba(160,205,255,.30);box-shadow:0 10px 26px rgba(29,95,216,.42);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.fab:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(29,95,216,.55);
  background:linear-gradient(145deg,#3B82F6,#2670EE)}
.fab svg{width:25px;height:25px}
.fab--wa{background:linear-gradient(145deg,#1FA855,#128C3E);border-color:rgba(255,255,255,.2)}
.fab--wa svg{fill:currentColor;stroke:none}
.fab__dot{position:absolute;top:3px;inset-inline-end:3px;width:11px;height:11px;border-radius:50%;
  background:#4ADE80;border:2px solid #fff}

/* ── accessibility panel ─────────────────────────────────────────────────── */
/* The panel opens upward from the button, and is capped so a long list of
   toggles can never run off the top of the screen - it scrolls inside instead. */
.a11y{position:fixed;inset-inline-end:20px;bottom:calc(var(--fab-b,252px) + 62px);z-index:97;width:min(330px,90vw);
  max-height:calc(100dvh - var(--fab-b,252px) - 84px);display:flex;flex-direction:column;
  transition:bottom .38s cubic-bezier(.2,.8,.2,1);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.a11y[hidden]{display:none}
.a11y__hd{display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;background:var(--bg-mist);border-bottom:1px solid var(--line-soft)}
.a11y__hd b{font-size:14.5px;color:var(--navy-900)}
.a11y__hd button{width:28px;height:28px;border-radius:8px;color:var(--ink-soft);font-size:20px;line-height:1}
.a11y__hd button:hover{background:var(--blue-100);color:var(--navy-900)}
.a11y__bd{padding:14px 16px 16px;overflow-y:auto;flex:1 1 auto;min-height:0}
.a11y__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.a11y__row>span{font-size:13px;font-weight:600;color:var(--ink-soft)}
.a11y__steps{display:flex;align-items:center;gap:8px}
.a11y__steps button{width:34px;height:30px;border-radius:9px;background:var(--bg-mist);
  border:1px solid var(--line);color:var(--navy-900);font-size:12.5px;font-weight:700}
.a11y__steps button:hover{background:var(--blue-100);border-color:var(--blue-400)}
.a11y__steps b{font-size:12.5px;color:var(--blue-600);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.a11y__grid button{padding:9px 8px;border-radius:11px;background:var(--bg-mist);
  border:1px solid var(--line);color:var(--ink-soft);font-size:11.5px;font-weight:600;
  min-height:38px;display:grid;place-items:center;line-height:1.25;
  text-align:center;transition:background .18s,border-color .18s,color .18s}
.a11y__grid button:hover{background:var(--blue-50);color:var(--navy-900)}
.a11y__grid button.is-on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.a11y__reset{width:100%;margin-top:9px;padding:9px;border-radius:11px;
  background:var(--bg-mist);border:1px solid var(--line);color:var(--ink-soft);
  font-size:12px;font-weight:700}
.a11y__reset:hover{background:#FEF2F2;border-color:#FCA5A5;color:#B91C1C}
.a11y__note{margin-top:11px;font-size:10.5px;line-height:1.5;color:var(--ink-faint);text-align:center}
.a11y__note a{color:var(--blue-600)}
.a11y__guide{position:fixed;inset-inline:0;height:44px;z-index:98;pointer-events:none;
  border-block:2px solid rgba(38,112,238,.7);background:rgba(38,112,238,.06)}
.a11y__guide[hidden]{display:none}

/* ── what the toggles actually do ────────────────────────────────────────
   Applied to <html> so a preference survives every element on the page,
   including anything added later. */
html.a11y-contrast{filter:contrast(1.32)}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-contrast.a11y-grayscale{filter:contrast(1.32) grayscale(1)}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px!important}
html.a11y-readable *{font-family:Arial,'Assistant',sans-serif!important;letter-spacing:.01em!important}
html.a11y-spacing p,html.a11y-spacing li{line-height:2.2!important}
html.a11y-nomotion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* A light mode for anyone who cannot read light-on-dark. Inverting hue-rotates
   back so the blues stay blue instead of turning orange. */
html.a11y-dark-off{filter:invert(1) hue-rotate(180deg)}   /* a dark mode, now that the site is light */
html.a11y-dark-off img,html.a11y-dark-off svg,html.a11y-dark-off video{filter:invert(1) hue-rotate(180deg)}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES — structure instead of a wall of text
   A long article set as one column of paragraphs reads as a document, not a
   page. These rules give the SAME markup visible structure: every h2 opens a
   card, lists become checkable rows, and the first paragraph is set larger so
   the eye has somewhere to land.
   ═══════════════════════════════════════════════════════════════════════════ */
.prose{max-width:none;padding-block:var(--sec)}

/* The opening paragraph, set as a standfirst. */
.prose .lead-p{font-size:clamp(16px,1.9vw,19.5px);line-height:1.8;color:var(--navy-800);
  font-weight:500;max-width:64ch;margin:0 auto 34px;text-align:center}

/* Each h2 and the content that follows it, banded as a card. Built with a
   sibling selector rather than a wrapper so the editor keeps writing plain
   headings and paragraphs and never has to think about markup. */
.prose h2{
  position:relative;font-size:clamp(21px,2.5vw,27px);margin:0;
  padding:26px 26px 0;background:#fff;
  border:1px solid var(--line-soft);border-bottom:0;border-radius:20px 20px 0 0;
  max-width:80ch;margin-inline:auto;
}
/* A rule under the heading, the width of a word. */
.prose h2::after{content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--blue-600);margin-top:14px}
.prose h2 ~ *{max-width:80ch;margin-inline:auto;background:#fff;
  border-inline:1px solid var(--line-soft);padding-inline:26px}
/* The last block before the next heading closes the card. */
.prose h2 ~ *:last-child{border-bottom:1px solid var(--line-soft);
  border-radius:0 0 20px 20px;padding-bottom:26px}
.prose h2 + p,.prose h2 + ul,.prose h2 + h3{padding-top:16px}

.prose h3{font-size:17px;color:var(--navy-900);margin:22px 0 8px;
  display:flex;align-items:center;gap:10px}
.prose h3::before{content:"";width:7px;height:7px;border-radius:2px;
  background:var(--blue-400);flex:0 0 auto;transform:rotate(45deg)}

.prose p{margin-bottom:16px;color:var(--ink-soft);font-size:15.5px}
.prose ul{margin:0 0 18px;display:grid;gap:10px;padding-inline-start:0}
.prose ul li{position:relative;padding:12px 44px 12px 16px;font-size:14.5px;
  background:var(--bg-mist);border:1px solid var(--line-soft);border-radius:12px;
  color:var(--ink-soft);line-height:1.7}
/* A tick in a tile, not a bullet - it makes a list of claims look checkable. */
.prose ul li::before{content:"";position:absolute;inset-inline-start:14px;top:13px;
  width:20px;height:20px;border-radius:6px;background:var(--blue-100);
  -webkit-mask:none;mask:none}
.prose ul li::after{content:"";position:absolute;inset-inline-start:19px;top:19px;
  width:10px;height:6px;border-inline-start:2px solid var(--blue-600);
  border-bottom:2px solid var(--blue-600);transform:rotate(-45deg)}
.prose ul li strong{color:var(--navy-900)}
.prose ol{counter-reset:s;display:grid;gap:12px;margin-bottom:18px}

@media(max-width:760px){
  .prose h2,.prose h2 ~ *{padding-inline:18px}
}

/* ── social row in the rail ───────────────────────────────────────────────
   Icon-only and evenly divided, so four marks fill the column exactly. A
   channel with no address yet is shown faded and not clickable - it says the
   channel is planned without sending anyone to a dead link. */
/* The CTA now sits first in the foot, so the two rows under it need the gap
   above them instead of below. */
.railcta{margin-bottom:14px}
.railsoc{display:flex;gap:6px;margin-bottom:9px}
.railsoc__b{flex:1 1 0;display:grid;place-items:center;height:clamp(32px,4vh,38px);border-radius:11px;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.railsoc__b svg{width:18px;height:18px}
.railsoc__b:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff;transform:translateY(-2px)}
.railsoc__b.is-soon{opacity:.42;pointer-events:none}

/* ── language buttons ─────────────────────────────────────────────────────
   In the rail, so they sit with navigation rather than with the small print.
   Two-letter codes, not full names: four language names do not fit a 264px
   column without wrapping into a block that competes with the menu above it. */
.langs{display:flex;align-items:center;gap:9px;margin-bottom:0}
.langs>svg{width:16px;height:16px;color:var(--ink-faint);flex:0 0 auto}
.langs__set{display:flex;gap:5px;flex:1 1 auto}
.langs__set a,.langs__set button{flex:1 1 0;padding:6px 0;border-radius:9px;font-size:11.5px;font-weight:700;
  color:var(--ink-soft);background:#fff;border:1px solid var(--line);
  transition:background .18s,color .18s,border-color .18s}
.langs__set a,.langs__set button:hover{background:var(--blue-50);color:var(--navy-900);border-color:var(--blue-400)}
.langs__set a,.langs__set button.is-on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.langs__set a,.langs__set button[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.langs__set a,.langs__set button[aria-disabled="true"]:hover{background:var(--bg-mist);color:var(--ink-soft);border-color:var(--line)}

/* The social row grows with the number of channels. */
.social{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.social svg{width:17px;height:17px}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE
   The layout is fluid to begin with - clamp() on type and spacing, grids that
   fall to one column - so this section is not a second design. It is the
   handful of places where a phone needs a DIFFERENT decision, not a smaller
   version of the same one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tablet and below: the rail goes off-canvas ─────────────────────────── */
@media(max-width:1080px){
  .topbar .wrap{min-height:60px}
  .topbar .logo__mark{width:32px;height:32px}
  .topbar .logo__txt b{font-size:20px}
  .topbar .logo__txt span{font-size:8px;letter-spacing:.30em;text-indent:.30em}
  /* The panel is a sheet now, so its contents get room rather than being
     squeezed to fit a narrow column. */
  .rail__top{border-bottom:1px solid var(--line-soft)}
  .rail .logo__mark{width:38px;height:38px}
  .rail .logo__txt b{font-size:23px}
  .rnav a{padding:12px 14px}
  .rnav__ic{width:40px;height:40px}
}

/* ── phones ─────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  :root{--gut:16px}

  /* The hero stops trying to be a two-column composition. */
  .hero .wrap{padding-block:26px 34px;gap:24px}
  .home .hero{min-height:auto}
  .home .hero h1{font-size:clamp(28px,7.6vw,38px)}
  .home .hero p.lead{font-size:16px}
  .hero__acts{gap:14px}
  .hero__acts .btn{flex:1 1 100%;justify-content:center}
  .hero__acts .tlink{margin-inline:auto}
  /* The chips sit under the artwork rather than over it - overlapping cards on
     a 360px screen cover the thing they are meant to annotate. */
  .chips{gap:9px}
  .chip{min-width:0;flex:1 1 46%;justify-content:center;font-size:13px;padding:10px 12px}

  /* One surface, less padding, same reading measure. */
  .prose{padding-block:22px}
  .prose__in{padding:22px 18px;border-radius:20px}
  .prose ul li{padding:12px 42px 12px 14px;font-size:14px}
  .phead{padding-block:26px 30px}

  /* Cards and quotes are already single-column; the marquee gets a narrower
     card so a whole quote is visible at once. */
  .quote{width:min(300px,86vw);padding:20px}
  .cards{gap:16px}

  .sec-head{margin-bottom:26px}
  .steps{gap:32px}

  /* Footer: two columns is too tight for Hebrew headings at this width. */
  .ftr__grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .ftr__brand .logo,.social{justify-content:center}
  .ftr__about{margin-inline:auto}
  .ftr__badges li,.ftr__lines li,.ftr__lines li>a{justify-content:center}
  .ftr__base{flex-direction:column;gap:10px;text-align:center;padding-bottom:110px}

  /* The dock is a sheet on a phone: fields stack, and it can scroll if the
     keyboard takes half the screen. */
  .qlead__body{width:100%;border-radius:22px}
  .qlead.is-open .qlead__body{max-height:70dvh;overflow-y:auto;padding:20px 16px 22px}
  .qlead__form{gap:9px}
  .qlead__form input:not(.hp),.qlead__form .btn{flex:1 1 100%}
  .qlead__intro b{font-size:16px}
  .qlead__legal{font-size:10.5px}

  /* Floating controls move in from the edge and shrink a little. */
  .fabs{inset-inline-end:14px;bottom:var(--fab-b,86px)}
  .qlead:not(.is-open) ~ .fabs,.qlead:not(.is-open) ~ .a11y{--fab-b:78px}
  .fab{width:48px;height:48px}
  .fab svg{width:23px;height:23px}
  .a11y{inset-inline:14px;width:auto;bottom:calc(var(--fab-b,86px) + 58px);
    max-height:calc(100dvh - var(--fab-b,86px) - 78px)}
  .a11y__grid{grid-template-columns:1fr 1fr}
}

/* ── small phones ───────────────────────────────────────────────────────── */
@media(max-width:400px){
  .chip{flex:1 1 100%}
  .prose__in{padding:18px 14px}
  .a11y__grid{grid-template-columns:1fr}
}

/* ── landscape phones: vertical room is the scarce one ──────────────────── */
@media(max-height:520px) and (orientation:landscape){
  .home .hero{min-height:auto;padding-block:18px}
  .qlead.is-open .qlead__body{max-height:64dvh}
  .a11y{max-height:calc(100dvh - 96px)}
}

/* Anything a finger has to hit is at least 44px, per WCAG 2.5.8. */
@media(pointer:coarse){
  .rnav a,.langs__set a,.langs__set button,.railsoc__b{min-height:44px}
  .btn,.qlead__pull{min-height:44px}
  .faq summary{padding-block:15px}
}

/* The three reassurances under the hero paragraph. Not a feature list - each
   line answers a question the visitor is already asking, in the order they ask
   it: how fast, will it fit, and what if it does not. */
.hero__pts{display:grid;gap:9px;margin:0 0 26px}
.hero__pts li{display:flex;align-items:center;gap:11px;font-size:clamp(14px,1.05vw,16px);
  color:var(--ink-soft);line-height:1.6}
.hero__pts li strong{color:var(--navy-900);font-weight:700}
.hero__pts svg{width:21px;height:21px;flex:0 0 auto;color:var(--blue-600)}
.hero p.lead strong{color:var(--navy-900);font-weight:700}
@media(max-width:900px){
  .hero__pts{justify-items:center}
  .hero__pts li{justify-content:center;text-align:start}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE COLLAPSED RAIL
   Icons only, at 82px. Everything that carries a label either hides or centres;
   nothing is merely squeezed, because a label at half width is worse than no
   label at all - the tooltip carries it instead.
   ═══════════════════════════════════════════════════════════════════════════ */
.rail__cl{position:fixed;top:50%;z-index:101;
  inset-inline-start:calc(var(--rail) - 28px);transform:translate(50%,-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--blue-600);background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(19,36,65,.14);
  transition:background .18s,color .18s,transform .28s cubic-bezier(.2,.8,.2,1),inset-inline-start .28s}
html[dir="ltr"] .rail__cl{transform:translate(-50%,-50%)}
.rail__cl svg{width:15px;height:15px}
.rail__cl:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
/* The chevron points the way the bar will move. */
html.rail-mini .rail__cl{transform:translate(50%,-50%) rotate(180deg)}
html[dir="ltr"].rail-mini .rail__cl{transform:translate(-50%,-50%) rotate(180deg)}

html.rail-mini{--rail:96px}
html.rail-mini .rail__top{padding-inline:8px;justify-content:center}
html.rail-mini .logo__txt{display:none}
html.rail-mini .rail .logo__mark{width:34px;height:34px}

html.rail-mini .rail__scroll{padding-inline:10px}
html.rail-mini .rnav a{justify-content:center;padding-inline:0}
html.rail-mini .rnav__t{display:none}
html.rail-mini .rnav__grp{
  /* A heading with no room for words becomes a divider - it still separates the
     two groups, which is the only job it can still do. */
  height:1px;padding:0;margin:12px 8px;overflow:hidden;text-indent:-999px;
  background:var(--line-soft)}
html.rail-mini .rnav a.is-active::before{inset-inline-start:-10px}

html.rail-mini .railcta{justify-content:center;padding-inline:0}
html.rail-mini .railcta__t{display:none}
html.rail-mini .railcta__go{width:34px;height:34px}
html.rail-mini .railsoc{flex-wrap:wrap;gap:5px}
html.rail-mini .railsoc__b{flex:1 1 40%}
html.rail-mini .langs>svg{display:none}
html.rail-mini .langs__set{flex-wrap:wrap}
html.rail-mini .langs__set a,.langs__set button{flex:1 1 40%;font-size:10.5px;padding:5px 0}
html.rail-mini .rail__foot{padding-inline:10px}

/* Native tooltips carry the labels the collapsed bar cannot show. */
html.rail-mini .rnav a{position:relative}

@media(max-width:1080px){
  /* Off-canvas already, so collapsing would only make the sheet unreadable. */
  html.rail-mini{--rail:0px}
  html.rail-mini .rail{width:min(288px,86vw)}
  html.rail-mini .logo__txt,html.rail-mini .rnav__t,html.rail-mini .railcta__t{display:block}
  html.rail-mini .rnav a{justify-content:flex-start;padding-inline:12px}
  .rail__cl{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION MOTION — a system that behaves like the product it sells
   The site is selling automation, so the interface should look like something
   that RUNS rather than something that was laid out. Everything here is CSS on
   markup that already exists: no library, no per-element JavaScript, and all of
   it stops dead under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the spine ────────────────────────────────────────────────────────────
   A line down the numbered headings, with a pulse travelling along it. It is
   the visual claim of the whole company - steps connected into one flow - and
   it costs one pseudo-element. */
.prose__in{position:relative}
.prose h2{position:relative}
.prose h2::before{z-index:2}
/* The connector between one numbered badge and the next. */
.prose h2 + *::before{content:none}
.prose__in > h2:not(:last-of-type)::after{
  content:"";position:absolute;inset-inline-start:18px;top:38px;
  width:2px;height:calc(100% + 44px);
  background:linear-gradient(180deg,var(--blue-100),transparent);
  z-index:0;
}
/* A packet running down the line - slow, and only one at a time. */
.prose__in > h2:not(:last-of-type)::after{
  background-image:linear-gradient(180deg,var(--blue-100),transparent),
                   linear-gradient(180deg,transparent,var(--blue-600),transparent);
  background-size:2px 100%,2px 42px;
  background-repeat:no-repeat;
  animation:spinePulse 4.2s linear infinite;
}
@keyframes spinePulse{
  from{background-position:0 0,0 -60px}
  to  {background-position:0 0,0 calc(100% + 60px)}
}

/* ── list rows behave like a running process ─────────────────────────────── */
.prose ul li{transition:transform .22s cubic-bezier(.2,.8,.2,1),
  background .22s,border-color .22s,box-shadow .22s}
.prose ul li:hover{transform:translateX(-4px);background:#fff;
  border-color:var(--blue-100);box-shadow:0 6px 18px rgba(19,36,65,.07)}
html[dir="ltr"] .prose ul li:hover{transform:translateX(4px)}
/* The tick draws itself when the row scrolls in, instead of being there from
   the start - it reads as a check being completed. */
.prose ul li::after{transition:opacity .3s ease}

/* ── section reveal, staggered by position ──────────────────────────────── */
html.js .prose__in > h2,
html.js .prose__in > p,
html.js .prose__in > ul{animation:secIn .55s cubic-bezier(.2,.8,.2,1) both}
html.js .prose__in > *:nth-child(1){animation-delay:.02s}
html.js .prose__in > *:nth-child(2){animation-delay:.06s}
html.js .prose__in > *:nth-child(3){animation-delay:.10s}
html.js .prose__in > *:nth-child(4){animation-delay:.14s}
html.js .prose__in > *:nth-child(n+5){animation-delay:.18s}
@keyframes secIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── the badge reads as a live node ─────────────────────────────────────── */
.prose h2::before{position:relative}
.prose h2{isolation:isolate}
.prose h2::before{box-shadow:0 6px 14px rgba(38,112,238,.28),0 0 0 0 rgba(38,112,238,.35);
  animation:nodePulse 3.4s ease-out infinite}
@keyframes nodePulse{
  0%  {box-shadow:0 6px 14px rgba(38,112,238,.28),0 0 0 0 rgba(38,112,238,.30)}
  70% {box-shadow:0 6px 14px rgba(38,112,238,.28),0 0 0 12px rgba(38,112,238,0)}
  100%{box-shadow:0 6px 14px rgba(38,112,238,.28),0 0 0 0 rgba(38,112,238,0)}
}

/* ── the standfirst gets a moving edge ──────────────────────────────────── */
.prose .lead-p{position:relative;overflow:hidden}
.prose .lead-p::after{content:"";position:absolute;inset-inline-start:0;top:0;
  width:4px;height:40%;background:var(--blue-400);
  animation:edgeRun 5.5s ease-in-out infinite}
@keyframes edgeRun{0%,100%{transform:translateY(-20%)}50%{transform:translateY(180%)}}

@media(prefers-reduced-motion:reduce){
  .prose__in > h2::after,.prose h2::before,.prose .lead-p::after,
  html.js .prose__in > *{animation:none!important}
}

/* ── the hero's proof points ──────────────────────────────────────────────
   Numbered chips instead of circled ticks. A tick says "included"; a running
   index says "here is the order things happen in", which is what an automation
   company is actually selling. It also stops the three lines reading as a
   feature list, which is where the generic look was coming from. */
.hero__pts{display:grid;gap:12px;margin:0 0 30px;padding:0}
.hero__pts li{display:flex;align-items:flex-start;gap:13px;
  font-size:clamp(14.5px,1.08vw,16.5px);color:var(--ink-soft);line-height:1.6}
.hero__pts li strong{color:var(--navy-900);font-weight:700}
.hero__n{
  flex:0 0 auto;width:30px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-600);
  font-family:var(--font-latin);font-size:11px;font-weight:700;letter-spacing:.04em;
  margin-top:2px;transition:background .2s,color .2s,transform .2s}
.hero__pts li:hover .hero__n{background:var(--blue-600);color:#fff;transform:translateY(-1px)}

/* ── the two calls to action ──────────────────────────────────────────────
   One is a decision, the other is a question - so they are different objects,
   not the same pill twice. The underlined text link the secondary used to be
   read as a footnote and got ignored. */
.btn--lg{padding:17px 32px;font-size:15.5px;border-radius:var(--r-pill)}
.btn--lg svg{width:20px;height:20px}
.btn2{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 26px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700;color:var(--navy-900);
  background:#fff;border:1.5px solid var(--line);
  transition:border-color .2s,box-shadow .2s,transform .2s,color .2s}
.btn2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-600);
  box-shadow:0 0 0 0 rgba(38,112,238,.45);animation:btn2Ping 2.6s ease-out infinite}
.btn2:hover{border-color:var(--blue-400);color:var(--blue-700);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(19,36,65,.08)}
@keyframes btn2Ping{
  0%  {box-shadow:0 0 0 0 rgba(38,112,238,.40)}
  70% {box-shadow:0 0 0 8px rgba(38,112,238,0)}
  100%{box-shadow:0 0 0 0 rgba(38,112,238,0)}
}
@media(prefers-reduced-motion:reduce){.btn2::before{animation:none}}
@media(max-width:760px){
  .hero__acts .btn--lg,.hero__acts .btn2{flex:1 1 100%;justify-content:center}
}

/* ── the hero has to FIT, not just be tall ────────────────────────────────
   Reserving padding for the dock is only half the job: the type was sized
   against the viewport's WIDTH alone, so on a wide-but-short window the block
   grew past the space that was left and slid under the quick-lead bar.

   Every measure below is min(vw, vh): the composition now answers to whichever
   axis is scarce, which is the only way a single full-window section can hold
   its own on a laptop, a desktop and a 21:9 monitor without three sets of
   breakpoints. */
.home .hero .wrap{
  max-width:1780px;
  /* Near-even split. The copy no longer needs the extra 12% now that it wraps
     at a sane measure, and the artwork stops looking like an afterthought. */
  /* The art column is the wider of the two now. The 360 is the only picture
     of what the company sells, and it was the narrower half of the row. */
  grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  align-items:center;
}
.home .hero h1{
  font-size:clamp(30px,min(4.1vw,7.4vh),58px);
  line-height:1.12;                 /* Hebrew: tight, but never below 1.1 */
  letter-spacing:normal;            /* never negative on Hebrew */
  margin-bottom:clamp(10px,1.6vh,20px);
  text-wrap:balance;
}
.home .hero p.lead{
  font-size:clamp(15px,min(1.15vw,2.35vh),19px);
  line-height:1.75;
  /* Wider measure so the sentence spreads across the column instead of
     stacking into a narrow ribbon down the middle of the screen. */
  max-width:54ch;
  margin-bottom:clamp(12px,2vh,26px);
}
.home .hero__pts{
  gap:clamp(6px,1vh,12px);
  margin-bottom:clamp(14px,2.4vh,30px);
}
.home .hero__pts li{font-size:clamp(14px,min(1.05vw,2vh),16.5px);line-height:1.6}
.home .hero .eyebrow{margin-bottom:clamp(8px,1.4vh,14px)}

/* The floor. The dock is ~240px open and the buttons must clear it with air to
   spare - a CTA that touches the bar above it reads as part of the bar. */
.home .hero{padding-bottom:clamp(200px,26vh,280px)}
@media(max-height:760px){
  .home .hero{padding-bottom:clamp(186px,25vh,230px)}
  .home .hero__art{max-width:100%;margin-inline:auto}
}

/* ── one screen, no scroll ────────────────────────────────────────────────
   The home page is a SINGLE section, so anything that pushes past the fold is
   not "below" - it is lost. Three things were doing the pushing: the actions
   wrapped onto two rows, the lead ran to three lines, and the type answered to
   width only. All three are pinned to the height that is actually available. */
.home .hero__acts{
  gap:clamp(10px,1.2vw,18px);
  flex-wrap:nowrap;              /* two buttons, one row - always */
  margin-top:clamp(4px,1vh,10px);
}
.home .hero__acts .btn--lg,
.home .hero__acts .btn2{
  flex:0 1 auto;min-width:0;
  padding-block:clamp(11px,1.5vh,16px);
  font-size:clamp(14px,min(1vw,1.9vh),16.5px);
  white-space:nowrap;
}
/* Short viewports give the artwork up before they give up a word of the copy -
   the illustration is decoration and the sentence is the argument. */
@media(max-height:820px){
  .home .hero p.lead{margin-bottom:clamp(10px,1.6vh,18px)}
  .home .hero__art{max-width:96%;margin-inline:auto}
}
@media(max-height:680px){
  .home .hero__art{max-width:86%}
  .home .hero .eyebrow{margin-bottom:6px}
}
/* Below 760px the row is impossible - two full-width buttons stack, as before. */
@media(max-width:760px){
  .home .hero__acts{flex-wrap:wrap}
  .home .hero__acts .btn--lg,.home .hero__acts .btn2{flex:1 1 100%;white-space:normal}
}

/* ── the accessibility panel has to FEEL like controls ───────────────────
   Every button here already worked - each one toggled its class on the first
   click. What it did not do was SAY so: no pointer, no press, and a state that
   only showed after the effect had already been applied. On a panel whose whole
   audience is people who cannot rely on subtle feedback, that is a defect. */
.a11y button{cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.a11y button:active{transform:scale(.97)}
/* ת״י 5568 requires a visible keyboard focus. Stated on the panel too, because
   its buttons sit on a tinted surface where the page-wide ring is faint. */
.a11y button:focus-visible{outline:3px solid var(--blue-600);outline-offset:2px}

/* A pressed toggle carries a tick, not just a colour: colour alone fails
   WCAG 1.4.1, and a person using the grayscale mode sees no colour at all. */
.a11y__grid button{position:relative;padding-inline:22px 8px}
.a11y__grid button.is-on::before{
  content:"✓";position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:800;line-height:1}
.a11y__grid button:hover{border-color:var(--blue-400);transform:translateY(-1px)}
.a11y__grid button.is-on:hover{background:#1B5CD6}

/* A control that cannot act must look like it cannot, or it reads as broken -
   which is exactly how A− looked while the scale sat at its 100% floor. */
.a11y__steps button[disabled]{opacity:.42;cursor:not-allowed}
.a11y__steps button[disabled]:hover{background:var(--bg-mist);border-color:var(--line)}
.a11y__steps button:not([disabled]):hover{transform:translateY(-1px)}

/* 44px is the WCAG 2.5.5 target size. The grid was at 38 and the steppers at
   30 - fine for a mouse, too small for the tremor this panel exists to serve. */
.a11y__grid button{min-height:44px}
.a11y__steps button{width:44px;height:38px;font-size:13.5px}
.a11y__reset{min-height:44px}

/* ── contrast failures found by measuring, not by eye ─────────────────────
   Measured against their real backgrounds on the rendered page:

     .a11y__note   2.59:1   .qlead__legal  2.59:1   .hero__n  4.14:1

   AA wants 4.5:1 for text this size. The two legal notes were also set at
   10.5-11px, which is below what ת״י 5568 treats as readable body text in
   Hebrew regardless of what the contrast comes out at - Hebrew has no
   ascenders to carry a small size the way Latin does. */
.a11y__note{color:#54627A;font-size:12px;line-height:1.65}   /* 2.59 → 6.0 */
.qlead__legal{color:#54627A;font-size:12.5px;line-height:1.6} /* 2.59 → 6.0 */
.hero__n{color:#1B5CD6}                                       /* 4.14 → 5.6 */

/* The numbered chip is a label, so it must survive the grayscale mode too:
   the ring keeps it distinguishable once colour is gone. */
.hero__n{border-color:rgba(27,92,214,.35)}

/* ── the headline gets the whole window ──────────────────────────────────
   It used to live inside the left column, where a 1.06fr share of the page
   forced "העסק שלכם / ימשיך לפעול / גם כשתנוחו" onto three lines - three short
   lines of very large type read as a stack, not as a sentence. Pulled up into
   a band of its own it spans both columns, lands on one or two lines, and can
   be sized far past what the column would ever have allowed. */
.home .hero .wrap{
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  grid-template-areas:
    "head head"
    "copy art";
  row-gap:clamp(10px,2vh,26px);
}
.home .hero__head{grid-area:head;text-align:center}
.home .hero__copy{grid-area:copy}
.home .hero__art{grid-area:art}

.home .hero__head h1{
  /* Sized off the WIDTH now that it owns the width, with a height ceiling so a
     short laptop window cannot be swallowed by three words. */
  font-size:clamp(34px,min(6.6vw,13vh),104px);
  line-height:1.1;
  letter-spacing:normal;      /* Hebrew, never negative */
  margin-bottom:0;
  text-wrap:balance;
  white-space:nowrap;         /* one line - the point of moving it up here */
}
.home .hero__head .eyebrow{display:inline-block;margin-bottom:clamp(6px,1.2vh,14px)}

/* Under ~1050px one line stops being honest: it would shrink the type to
   nothing to keep the promise. It wraps, and the size floor takes over. */
@media(max-width:1050px){
  .home .hero__head h1{white-space:normal;font-size:clamp(32px,7.4vw,56px)}
}
@media(max-width:900px){
  .home .hero .wrap{grid-template-areas:"head" "copy" "art";}
  .home .hero__head{text-align:center}
}

/* ── the mark is alive ───────────────────────────────────────────────────
   A static cluster of dots is a picture of a network; a cluster where a pulse
   climbs the diagonal is a picture of one CARRYING something, which is what the
   company sells. The delay is derived from each dot's --i, so the wave travels
   up the mark instead of the whole thing throbbing in unison.

   transform-box:fill-box is what makes scale() pivot on each circle rather than
   on the SVG's origin - without it the dots swing across the mark. */
.logo__mark circle,.logo__mark rect{
  /* One flat brand blue, sampled from the supplied file. The per-dot colour
     ramp that used to live here is gone: the new mark is a single ink, and a
     gradient across it would be a different logo. */
  fill:#1D45F5;
  transform-box:fill-box;
  transform-origin:center;
  animation:logoPulse 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.26s);
  will-change:transform,opacity;
}
@keyframes logoPulse{
  0%,100%{transform:scale(1)}
  42%    {transform:scale(1.34)}
  70%    {transform:scale(.94)}
}

/* The colour pass that used to run alongside the pulse is GONE. It warmed the
   leading dots to cyan, which was right when the mark was a colour ramp and is
   wrong now that the brand file is a single ink - an animation that changes the
   logo's colour is an animation that shows the wrong logo most of the time.
   Only the movement survives. */

/* Hovering the logo gathers the cluster: the dots tighten toward the wordmark,
   which makes the whole lockup feel like one object rather than two. */
.logo:hover .logo__mark circle,.logo:hover .logo__mark rect{animation-duration:1.5s}
.logo .logo__mark{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.logo:hover .logo__mark{transform:scale(1.06) rotate(-3deg)}

/* Stillness is a setting, and both the OS switch and the panel's own toggle
   have to be honoured - a moving logo is exactly what a vestibular disorder
   cannot tolerate. */
@media(prefers-reduced-motion:reduce){
  .logo__mark circle,.logo__mark rect{animation:none}
  .logo:hover .logo__mark{transform:none}
}
html.a11y-nomotion .logo__mark circle,html.a11y-nomotion .logo__mark rect{animation:none!important}

/* ── the rail's buttons move ─────────────────────────────────────────────
   Thirteen identical dot-clusters down a column is a lot of repetition to ask
   the eye to absorb. Motion is what tells them apart: the row you are pointing
   at animates its mark, and the row you are ON keeps a slow pulse going, so the
   list always says where you are without another colour or another shape. */

/* The active row's mark breathes. Slow and small - it marks a position, it does
   not compete with the page for attention. */
.rnav a.is-active .rnav__ic{animation:navHold 2.8s ease-in-out infinite}
@keyframes navHold{
  0%,100%{box-shadow:0 6px 16px rgba(38,112,238,.32),0 0 0 0 rgba(38,112,238,.34)}
  55%    {box-shadow:0 6px 16px rgba(38,112,238,.32),0 0 0 7px rgba(38,112,238,0)}
}

/* Hover spins the cluster a few degrees and lifts it. The rotation is what
   makes a mark built from scattered dots feel like a mechanism turning over. */
.rnav a .rnav__ic svg{transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.rnav a:hover .rnav__ic{transform:translateY(-2px) scale(1.06)}
.rnav a:hover .rnav__ic svg{transform:rotate(-16deg) scale(1.08)}
.rnav a:active .rnav__ic{transform:translateY(0) scale(.97)}

/* The label follows the icon in - a hair behind it, so the row reads as one
   object leaning toward the pointer rather than two parts moving apart. */
.rnav__t{transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.rnav a:hover .rnav__t{transform:translateX(-3px)}
html[dir="ltr"] .rnav a:hover .rnav__t{transform:translateX(3px)}

/* The active marker grows out of the edge instead of appearing on it. */
.rnav a.is-active::before{animation:navBar .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes navBar{from{height:0;opacity:0}to{height:26px;opacity:1}}

/* The CTA at the foot of the rail gets a travelling sheen - the one element in
   the column that is allowed to ask for the click. */
.railcta{position:relative;overflow:hidden}
.railcta::after{
  content:"";position:absolute;top:0;inset-inline-start:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-16deg);animation:ctaSheen 4.6s ease-in-out infinite;pointer-events:none}
@keyframes ctaSheen{0%,72%{inset-inline-start:-60%}100%{inset-inline-start:120%}}
.railcta__go{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.railcta:hover .railcta__go{transform:translateX(-5px) scale(1.1)}
html[dir="ltr"] .railcta:hover .railcta__go{transform:translateX(5px) scale(1.1)}

/* Social marks pop individually rather than as a row. */
.railsoc__b{transition:transform .24s cubic-bezier(.2,.7,.2,1),background .2s,color .2s}
.railsoc__b:not(.is-soon):hover{transform:translateY(-3px) scale(1.12)}

/* Nothing above may override a stated preference for stillness. */
@media(prefers-reduced-motion:reduce){
  .rnav a.is-active .rnav__ic,.railcta::after,.rnav a.is-active::before{animation:none}
  .rnav a:hover .rnav__ic,.rnav a:hover .rnav__ic svg,.rnav a:hover .rnav__t,
  .railcta:hover .railcta__go,.railsoc__b:hover{transform:none}
}
html.a11y-nomotion .rnav a.is-active .rnav__ic,
html.a11y-nomotion .railcta::after{animation:none!important}

/* ── one size for both rows at the foot of the rail ──────────────────────
   The language buttons sat at 6px of vertical padding against the social row's
   32-38px tile, and the globe in front of them shortened their track on top of
   that - so two rows meant to read as a pair looked like a row and a footnote.
   They are now literally the same box. */
.langs{gap:0}
.langs__set{gap:6px;flex:1 1 auto}
.langs__set a,.langs__set button{
  flex:1 1 0;padding:0;
  height:clamp(32px,4vh,38px);      /* == .railsoc__b */
  border-radius:11px;               /* == .railsoc__b */
  font-size:12.5px;display:grid;place-items:center;
  transition:transform .24s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,border-color .2s;
}
.langs__set a,.langs__set button:not([aria-disabled="true"]):hover{transform:translateY(-3px) scale(1.12)}
/* The social row keeps the same 6px gutter, so the two rows line up column for
   column rather than merely matching in height. */
.railsoc{gap:6px}

/* The switcher moved from <button> to <a>, so the rules above were widened to
   cover both. Anchors do not inherit the button resets, so the few that matter
   are restated here - without them the links rendered as bare underlined text
   in a row, which is exactly how they looked when the styling "disappeared". */
.langs__set a{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-sizing:border-box;
}
@media(prefers-reduced-motion:reduce){.langs__set a,.langs__set button:hover{transform:none}}

/* ── the headline must be measured against its BOX, not the window ───────
   It was sized at 6.6vw, and vw counts the whole window including the ~240px
   the rail occupies and the wrap's own padding. So the type was scaled against
   a width the line never actually gets, and on a wide screen the last two words
   ran off the edge.

   cqi is that missing measurement: 1cqi is 1% of THIS element's inline size, so
   the line is sized against the space it will really be laid into. At ~0.52em
   average advance for Heebo bold, 32 characters need about 16.6em, which is why
   5.9cqi fits with a margin and 6.6vw did not. */
.home .hero__head{container-type:inline-size}
.home .hero__head h1{
  /* 5.7, not 5.9: measured on the page the line came out 1117px inside a
     1120px box, and three pixels is not a margin - a font that loads a hair
     wider, or a browser that rounds the other way, clips the last word again.
     The 104px cap is gone: cqi is already bounded by the box, and a fixed cap
     could exceed it on a window that is wide but has a narrow content column. */
  font-size:min(5.7cqi, 13vh);
  white-space:nowrap;
}
/* Below the point where 5.9cqi drops under a readable size, the line is allowed
   to break rather than shrink into illegibility. */
@media(max-width:1050px){
  .home .hero__head h1{white-space:normal;font-size:clamp(32px,7.4vw,56px)}
}
/* Browsers without container queries keep a conservative viewport-based size
   that accounts for the rail, so they under-shoot rather than overflow. */
@supports not (container-type:inline-size){
  .home .hero__head h1{font-size:min(5.2vw,13vh,104px)}
}

/* ── section headings: room to breathe, and a colour that belongs ────────
   Two problems, both visible the moment a number sits beside a word:

   1. 52px of padding against a 38px chip left 14px between the chip and the
      first letter - and Hebrew has no ascender gap to soften a collision, so
      the number read as a prefix stuck onto the word. 66px gives it 28px, the
      same air the chip has above and below itself.

   2. --navy-900 is very nearly black. Against a chip that is pure brand blue it
      reads as two unrelated inks - one from the palette, one from a default.
      #1C3663 is the same hue family as the blue, dark enough to stay a heading,
      and it makes the pair look chosen. */
.prose h2{
  padding-inline-start:66px;
  color:#1C3663;
  min-height:42px;
  gap:0;
  letter-spacing:normal;      /* Hebrew */
  line-height:1.45;           /* Hebrew wants the extra leading */
}
.prose h2::before{
  width:42px;height:42px;border-radius:13px;font-size:13.5px;
  top:50%;transform:translateY(-50%);   /* centred on the line, not pinned to it */
}
/* The rule that trails the heading starts after the new indent. */
.prose h2::after{width:calc(100% - 82px)}

/* The same spacing problem, same fix, in the hero's numbered list. */
.hero__pts li{gap:14px}

/* h3 gets the matching ink so the hierarchy reads as one family. */
.prose h3{color:#22406F}

@media(max-width:640px){
  .prose h2{padding-inline-start:56px;min-height:38px}
  .prose h2::before{width:36px;height:36px;border-radius:11px;font-size:12px}
  .prose h2::after{width:calc(100% - 70px)}
}

/* ── fill the window ─────────────────────────────────────────────────────
   The 1780px measure was set when the headline lived inside a column. Now that
   the headline spans the page, that cap leaves ~200px of empty gutter on each
   side of a 2000px monitor and the whole composition floats in the middle of a
   screen it is supposed to own. The hero takes the width it is given.

   Everything else follows for free: the headline is sized in cqi, so a wider
   box IS a bigger headline - no second breakpoint to keep in step. */
.home .hero .wrap{
  max-width:none;
  padding-inline:clamp(24px,4vw,90px);
  column-gap:clamp(32px,4.5vw,90px);
}
@media(min-width:1900px){.home .hero .wrap{max-width:none}}

/* The artwork was capped by its column and stayed small while the page grew. */
.home .hero__art svg{width:100%;max-width:none}
.home .hero__art{width:100%}

/* On a big screen the supporting text was still set for a laptop, which is what
   made the lower half look hollow next to a 100px headline. */
@media(min-width:1500px){
  .home .hero p.lead{font-size:clamp(18px,1.32vw,23px);max-width:60ch}
  .home .hero__pts li{font-size:clamp(16px,1.12vw,19px)}
  .home .hero__n{font-size:12.5px;min-width:34px;height:34px}
  .home .hero__acts .btn--lg,.home .hero__acts .btn2{font-size:clamp(16px,1.05vw,18.5px)}
  .home .chip{font-size:clamp(15px,1.05vw,17.5px);padding:16px 22px}
  .home .chip svg{width:24px;height:24px}
}
/* Beyond ~1900px the type stops growing and the COLUMNS take the extra room, so
   a very wide monitor gets a wider composition rather than bigger letters. */
@media(min-width:1900px){
  .home .hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

/* ── one definition for the heading's rule, not two fighting ─────────────
   .prose h2::after was declared twice: once early as an absolutely-positioned
   hairline pinned at top:50%, and again later as a 46px underline. The later
   block restated display/width/height but NOT position - so the underline
   inherited top:50% from the first and drew itself straight through the words.

   Restated here in full, every property the other two set, so neither can
   contribute a stray value again. The heading is a flex row, hence the absolute
   placement: a block ::after inside it would become a flex ITEM and sit beside
   the text rather than under it. */
.prose h2::after{
  content:"";
  position:absolute;
  inset-inline-start:66px;      /* lines up with the text, past the number */
  inset-inline-end:auto;
  top:auto;
  bottom:0;
  transform:none;
  display:block;
  width:52px;
  height:3px;
  border-radius:2px;
  background:var(--blue-600);
  margin:0;
}
/* Room under the words for the rule to sit in, so it underlines the heading
   instead of touching the paragraph below it. */
.prose h2{padding-bottom:16px;align-items:center}

@media(max-width:640px){
  .prose h2::after{inset-inline-start:56px;width:44px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   READING LAYOUT — the last word on the article surface
   ═══════════════════════════════════════════════════════════════════════════
   This block exists because the rules above accumulated in layers and started
   contradicting each other. Two of them did real damage:

   • `.prose h2::before{position:relative}` (added for the pulse effect) turned
     the number chip from an absolutely-placed badge into a FLEX ITEM inside the
     heading. It then sat in the text's own track, was lifted out of the row by
     a translate meant for absolute centring, and landed on top of the words.

   • the heading's ::after was declared twice with different intents, so a 46px
     underline inherited `top:50%` and drew a line through the heading.

   Everything either of them touches is restated here in full. */

/* ── the number sits BESIDE the heading, in its own margin ─────────────── */
.prose h2{
  position:relative;
  display:flex;
  align-items:center;
  /* 26px card padding + 42px chip + 18px air */
  padding-inline-start:86px;
  padding-bottom:18px;
  min-height:auto;
  text-align:start;
}
.prose h2::before{
  position:absolute;             /* NOT relative - it is a badge, not an item */
  inset-inline-start:26px;       /* the card's own padding, so it lines up */
  inset-inline-end:auto;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  margin:0;
  width:42px;height:42px;
  border-radius:13px;
  display:grid;place-items:center;
  font-size:13.5px;
  z-index:2;
}

/* ── Hebrew is read from a flush edge ───────────────────────────────────
   Centred body text forces the eye to hunt for the start of every line. In
   Latin that is merely slow; in Hebrew, with no ascender skyline to navigate
   by, it is the difference between reading and decoding. Every text block in
   the article surface starts flush - the BLOCK stays centred on the page, the
   TEXT inside it does not. */
.prose p,.prose li,.prose h2,.prose h3,.prose h4,.prose blockquote,.prose dd,.prose dt{
  text-align:start;
}
/* The standfirst is the one exception: it is a caption for the page, short
   enough that centring reads as emphasis rather than as an obstacle. */
.prose .lead-p{text-align:start}

/* ── the rhythm of the column ────────────────────────────────────────────
   Hebrew needs MORE leading than Latin at the same size, and a shorter line:
   65-70 characters is where a Hebrew column stops needing a finger to keep
   the place. */
.prose p{
  font-size:17px;
  line-height:1.95;
  max-width:68ch;
  margin-bottom:18px;
  color:#465A78;              /* 7.1:1 on white - comfortably past AA */
}
.prose li{font-size:17px;line-height:1.9;color:#465A78}
.prose h3{
  font-size:19px;
  line-height:1.55;
  margin:32px 0 10px;
  color:#22406F;
}
.prose h2{font-size:clamp(21px,2.3vw,26px);line-height:1.45}

/* Paragraphs immediately after a heading do not need the full gap - the
   heading already provided the break. */
.prose h2 + p,.prose h3 + p{margin-top:0}

@media(max-width:640px){
  .prose h2{padding-inline-start:64px;padding-bottom:14px}
  .prose h2::before{inset-inline-start:18px;width:38px;height:38px;border-radius:11px;font-size:12px}
  .prose p,.prose li{font-size:16px;line-height:1.85}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLES — the listing, the card, the article page
   ═══════════════════════════════════════════════════════════════════════════ */

.plist{padding-block:clamp(26px,4vw,48px) clamp(40px,6vw,72px)}
.pgrid{
  display:grid;gap:clamp(16px,1.8vw,24px);
  /* auto-fill, not a fixed count: six articles and sixteen both look composed,
     and no breakpoint has to be maintained as the catalogue grows. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,318px),1fr));
}

.pcard{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,2vw,26px);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(19,36,65,.04);
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s;
}
/* The whole card is the target - a 300px card with a 60px link in it is a card
   that gets clicked in the wrong place. The overlay carries the href; the title
   stays real text so the link still has an accessible name. */
.pcard__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard:hover{transform:translateY(-4px);border-color:var(--blue-400);
  box-shadow:0 16px 38px rgba(19,36,65,.12)}
.pcard:focus-within{outline:3px solid var(--blue-600);outline-offset:3px}

.pcard__meta{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:#5E718C;font-variant-numeric:tabular-nums}
.pcard__t{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--navy-900);
  margin:0;letter-spacing:normal}
.pcard__x{font-size:14.5px;line-height:1.8;color:#5A6C89;margin:0;
  /* Four lines, then it stops - cards of wildly different heights read as a
     broken grid rather than as a set. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pcard__go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--blue-600)}
.pcard__go svg{width:17px;height:17px;transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__go svg{transform:translateX(-5px)}
html[dir="ltr"] .pcard:hover .pcard__go svg{transform:translateX(5px)}

/* ── the article's own metadata ─────────────────────────────────────────── */
.artmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);
  margin-top:10px;font-variant-numeric:tabular-nums}

/* ── "more to read" ─────────────────────────────────────────────────────── */
.more{padding-block:clamp(30px,4.5vw,56px) 0}
.more__h{font-size:clamp(19px,2vw,24px);color:var(--navy-900);margin-bottom:18px;
  letter-spacing:normal}

/* ── paging ─────────────────────────────────────────────────────────────── */
.pager{margin-top:clamp(24px,3vw,38px)}
.pager ul{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.pager a,.pager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;
  border-radius:12px;border:1px solid var(--line);background:#fff;
  font-size:14px;font-weight:700;color:var(--ink-soft);transition:.18s}
.pager a:hover{border-color:var(--blue-400);color:var(--blue-600);background:var(--bg-sky)}
.pager .current{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

.plist__empty{text-align:center;color:var(--ink-soft);padding:40px 0}

/* The blog page's intro is a paragraph, not an article - it does not need the
   full framed reading surface. */
.prose--tight{padding-block:clamp(18px,2.4vw,30px) 0}

@media(prefers-reduced-motion:reduce){
  .pcard:hover{transform:none}
  .pcard:hover .pcard__go svg{transform:none}
}

/* ── the agent diagram ───────────────────────────────────────────────────
   The old artwork was a laptop with an orb on its screen and three HTML chips
   floating beside it. It said "we have a product". This says what the product
   IS: one core, four things it does, and an arrow from the core to each - which
   is the entire pitch in one picture and needs no caption. */
.hero__art svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 24px 50px rgba(19,36,65,.10))}

/* The arrows draw themselves, once, on load - the signal leaving the core. */
html.js .hero__art .ray{
  stroke-dasharray:200;stroke-dashoffset:200;
  animation:rayDraw 1s ease-out forwards, rayPulse 4.2s ease-in-out 1.1s infinite;
}
.hero__art .ray:nth-of-type(1){animation-delay:.15s,1.15s}
.hero__art .ray:nth-of-type(2){animation-delay:.3s,1.3s}
.hero__art .ray:nth-of-type(3){animation-delay:.45s,1.45s}
.hero__art .ray:nth-of-type(4){animation-delay:.6s,1.6s}
@keyframes rayDraw{to{stroke-dashoffset:0}}
@keyframes rayPulse{0%,100%{opacity:.42}50%{opacity:.95}}

/* The pills arrive after the arrow that points at them. */
html.js .hero__art .pill{opacity:0;animation:pillIn .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.55s + var(--i,0) * .12s);transform-box:fill-box;transform-origin:center}
@keyframes pillIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* The rings turn at different speeds and in opposite directions - the cheapest
   way to make a static core look like it is processing something. */
.hero__art .ring{transform-box:fill-box;transform-origin:center}
.hero__art .ring--a{animation:ringSpin 26s linear infinite}
.hero__art .ring--b{animation:ringSpin 17s linear infinite reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  html.js .hero__art .ray{stroke-dashoffset:0;animation:none}
  html.js .hero__art .pill{opacity:1;animation:none}
  .hero__art .ring{animation:none}
}
html.a11y-nomotion .hero__art .ray{stroke-dashoffset:0!important;animation:none!important}
html.a11y-nomotion .hero__art .pill{opacity:1!important;animation:none!important}

/* ── the text-size control has to move the PAGE ──────────────────────────
   The panel's A+/A- wrote a percentage onto the root font-size, and this
   stylesheet expresses type in px and clamp(vw) - so the control changed the
   readout and nothing else. It now drives a zoom, which scales the layout the
   way a person pressing "larger text" expects.

   Declared on <html> and defaulting to 1, so a page that has never touched the
   panel is unaffected and no rule has to be guarded. */
html{zoom:var(--a11y-zoom,1)}

/* ── the headline carries the page, so it is set at the heaviest weight ──
   Heebo 900 is already being loaded for the wordmark, so this costs nothing.
   At 900 the counters in ע and ס start to close, which is why it is used ONLY
   at display size - below ~34px this same weight turns to mush, and the
   breakpoint below drops it back to 800. */
.home .hero__head h1{font-weight:900}
.home .hero__head h1 em{font-weight:900}
@media(max-width:1050px){
  .home .hero__head h1,.home .hero__head h1 em{font-weight:800}
}
/* The eyebrow gains a touch of weight with it, so it still reads as the same
   family of type rather than a caption that got left behind. */
.home .hero .eyebrow{font-weight:800}

/* ── the flow sections ───────────────────────────────────────────────────
   The home page continues into the other pages. Each one gets a full screen of
   its own so arriving at it feels like arriving somewhere, and a scroll-snap
   alignment so a flick of the trackpad settles ON a section rather than in the
   gap between two.

   snap-type is `proximity`, not `mandatory`: mandatory snapping fights anyone
   reading a long section, and these sections hold whole pages. */
.home main{scroll-snap-type:y proximity}
.home .hero,.flow{scroll-snap-align:start}

.flow{
  position:relative;
  padding-block:clamp(48px,7vh,92px) clamp(60px,9vh,110px);
  scroll-margin-top:0;
}
/* Alternating grounds. Four identical white screens in a row give a scroller no
   sense of having moved; a change of ground is the cheapest possible milestone. */
.flow:nth-child(even){background:linear-gradient(180deg,rgba(239,245,255,.75),rgba(255,255,255,0))}

.flow__head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,1.6vw,22px);
  margin-bottom:clamp(18px,2.4vw,30px);
}
.flow__n{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:var(--blue-600);color:#fff;
  font-family:var(--font-latin);font-size:16px;font-weight:800;
  box-shadow:0 8px 20px rgba(38,112,238,.30);
}
.flow__head h2{
  font-size:clamp(24px,3vw,40px);color:var(--navy-900);margin:0;
  letter-spacing:normal;line-height:1.3;font-weight:800;
}
.flow__x{margin:6px 0 0;font-size:clamp(14.5px,1.1vw,17px);color:var(--ink-soft);line-height:1.7}
.flow__open{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--blue-600);
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s;
}
.flow__open svg{width:17px;height:17px;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.flow__open:hover{background:var(--bg-sky);border-color:var(--blue-400);transform:translateY(-2px)}
.flow__open:hover svg{transform:translateX(-4px)}
html[dir="ltr"] .flow__open:hover svg{transform:translateX(4px)}

/* Inside a flow section the reading surface is already framed by the section,
   so it does not need the page-level top margin that pulls it under a header. */
.prose--flow{margin-top:0;padding-block:0}

@media(max-width:760px){
  .flow__head{grid-template-columns:auto 1fr;row-gap:12px}
  .flow__open{grid-column:1/-1;justify-content:center}
  .flow__n{width:44px;height:44px;border-radius:13px;font-size:14px}
  /* Snapping on a phone, where a section is several screens tall, only ever
     gets in the way. */
  .home main{scroll-snap-type:none}
}
@media(prefers-reduced-motion:reduce){
  .home main{scroll-snap-type:none}
  .flow__open:hover{transform:none}
}

/* The core earns a glow of its own, so it sits IN FRONT of the ring rather
   than on the same plane as the pills orbiting it. */
.hero__art svg > g[filter] circle{filter:none}
.hero__art .ring--b{stroke-dasharray:2 10}

/* The accessibility button sat higher than it needed to. It only has to clear
   the open dock, and 252px was measured against a taller version of it. */
.fabs{bottom:var(--fab-b,214px)}
@media(max-width:900px){.fabs{bottom:var(--fab-b,74px)}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAGE TAKES THE SCREEN
   ═══════════════════════════════════════════════════════════════════════════
   1160px was set before the rail existed. With a 240px rail beside it, a
   1512px window put the content in a 1160px column with the leftover space
   split unevenly around it - the page looked marooned rather than laid out.

   The measure is now relative: it takes what the window gives, up to a ceiling
   that keeps a 27" monitor from turning the page into a stripe. The READING
   measure is unaffected - .prose p is capped at 68ch, so widening the page
   widens the layout and never the line length. */
:root{--maxw:min(1560px, 94vw)}
@media(min-width:2100px){:root{--maxw:1720px}}
@media(max-width:900px){:root{--maxw:100%}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAGE HEAD — stated, not inherited
   ═══════════════════════════════════════════════════════════════════════════
   On a single post nothing here was styled: the title came out at WordPress's
   default #666, the breadcrumb had no colour of its own, and the band had no
   ground - so an article looked like a different website from the page that
   linked to it. Every one of those is declared below. */
.phead{
  position:relative;
  background:linear-gradient(180deg,var(--blue-50) 0%,rgba(246,249,254,0) 100%);
  padding-block:clamp(32px,4vw,60px) clamp(38px,4.6vw,66px);
}
.crumbs{
  font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:clamp(10px,1.4vw,16px);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.crumbs a{color:var(--blue-600)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}

.phead h1{
  color:var(--navy-900);
  font-size:clamp(27px,3.5vw,50px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:normal;          /* Hebrew */
  margin:0;
  max-width:22ch;                 /* a headline, not a paragraph in bold */
}
.phead > .wrap > p{
  margin:clamp(10px,1.2vw,16px) 0 0;
  font-size:clamp(15px,1.15vw,18.5px);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:62ch;
}

/* ── an article's own head ──────────────────────────────────────────────── */
.phead--art h1{max-width:26ch}
.artmeta{
  margin-top:clamp(12px,1.4vw,18px);
  padding-top:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--line-soft);
  max-width:26ch;
}

/* ── the standfirst is a paragraph, not a callout ───────────────────────
   Declared three separate times above: as a tinted panel with a border, then
   again as centred text, then again with a moving edge. Stacked, they turned
   the opening sentence into a quote box floating in the middle of a white
   sheet - the single thing that made these pages read as "a blog" rather than
   as part of the site.

   It goes back to being what it is: the first paragraph, set slightly larger.
   Restated in full so none of the three can contribute a leftover. */
.prose .lead-p{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 0 clamp(20px,2.4vw,30px);
  max-width:64ch;
  text-align:start;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.85;
  font-weight:500;
  color:#2C4570;
  overflow:visible;
}
.prose .lead-p::after{content:none}

/* ── the article sits on the page, not on a floating sheet ──────────────
   .prose__in was a white card on a white page - an outline with nothing on
   either side of it. On a tinted ground it framed the text; here it only added
   an edge. The article is simply laid onto the page, with the measure doing
   the work the box was doing badly. */
.single .prose__in,
.prose--flow .prose__in{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding-inline:0;
  max-width:none;
}
.single .prose__in::before{content:none}

/* The reading column starts at the page's start edge and stays there, so the
   article lines up with its own title above it instead of drifting to the
   middle of the screen. */
.single .prose p,
.single .prose li,
.single .prose h2,
.single .prose h3,
.single .prose ul,
.single .prose ol,
.prose--flow .prose p,
.prose--flow .prose li,
.prose--flow .prose h2,
.prose--flow .prose h3{
  margin-inline:0;
  max-width:72ch;
}
/* Headings inside an article do not need the card chrome either - they are
   waypoints in a column of text, not the tops of stacked boxes. */
.single .prose h2,
.prose--flow .prose h2{
  background:none;border:0;border-radius:0;
  padding-block:clamp(28px,3vw,42px) 14px;
  max-width:none;margin-inline:0;
}
.single .prose h2 ~ *,
.prose--flow .prose h2 ~ *{
  background:none;border-inline:0;padding-inline:0;margin-inline:0;
}
.single .prose h2 ~ *:last-child,
.prose--flow .prose h2 ~ *:last-child{
  border-bottom:0;border-radius:0;padding-bottom:0;
}
.single .prose,
.prose--flow{margin-top:0}

/* ── the wordmark, opened up ─────────────────────────────────────────────
   BRAMY was set at -0.2px of tracking - tight, which is right for a headline
   and wrong for a five-letter mark that has to hold its own beside a symbol.
   Opened to +0.085em it reads as a mark rather than as a word.

   The line beneath has to move with it: the two were exactly the same width
   before (109px each) and that alignment is the whole reason the lockup looks
   deliberate. Its tracking is retuned to land on the new width - Latin only,
   so tracking is safe here in a way it never is on the Hebrew. */
.logo__txt b{letter-spacing:.085em;padding-inline-end:.085em}
.logo__txt span{letter-spacing:.383em;padding-inline-end:.383em}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ARTICLE, SETTLED
   ═══════════════════════════════════════════════════════════════════════════
   Measured on the page rather than guessed at, and three things were wrong:

     • the title ran at 50px over two lines and the head came out 356px tall,
       so an article opened with half a screen of chrome before a word of it;
     • the body line ran to 81 characters - fine in Latin, too long in Hebrew,
       where there are no ascenders to help the eye find the next line;
     • h2::after had ended up `position:relative` at 1204x94px - the stray bar
       sitting across the headings.

   All three are stated here, in one place, for the article surface only. */

/* ── the head ──────────────────────────────────────────────────────────── */
.single .phead{padding-block:clamp(26px,3vw,44px) clamp(20px,2.2vw,30px)}
.single .phead h1{
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.3;
  max-width:20ch;
}
.single .artmeta{margin-top:14px;padding-top:14px;max-width:20ch}

/* ── the column ────────────────────────────────────────────────────────────
   62 characters. Hebrew reads comfortably between 55 and 65; past that the
   return sweep starts missing lines, which is the "spread out and tiring"
   feeling exactly. */
.single .prose p,
.single .prose li{max-width:62ch}
.single .prose .lead-p{max-width:58ch}
.single .prose{padding-bottom:clamp(30px,4vw,52px)}

/* ── sections that look like sections ─────────────────────────────────────
   Every h2 opens with a hairline the full width of the column and a numbered
   chip sitting in the margin beside it. The rule is what turns a long scroll
   into a set of parts, and it costs the editor nothing - they keep writing
   plain h2s. */
.single .prose h2{
  position:relative;
  display:flex;align-items:center;
  max-width:none;
  margin:clamp(34px,4vw,54px) 0 clamp(12px,1.4vw,18px);
  padding:clamp(22px,2.4vw,32px) 0 0 0;
  padding-inline-start:64px;
  border-top:1px solid var(--line-soft);
  font-size:clamp(20px,2vw,27px);
  line-height:1.4;
  color:#1C3663;
}
.single .prose h2:first-child{border-top:0;margin-top:0;padding-top:0}

/* The chip, restated end to end so none of the four earlier declarations can
   contribute a stray position, offset or transform. */
.single .prose h2::before{
  content:counter(sec,decimal-leading-zero);
  counter-increment:none;              /* .prose already increments it */
  position:absolute;
  inset-inline-start:0;inset-inline-end:auto;
  top:auto;bottom:auto;
  align-self:center;
  transform:none;
  margin:0;
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background:var(--blue-600);color:#fff;
  font-family:var(--font-latin);font-size:14px;font-weight:700;
  box-shadow:0 6px 16px rgba(38,112,238,.26);
  animation:none;
}
/* Positioned relative to the heading's own line box: with the flex row centred,
   this keeps the chip on the first line even when the heading wraps. */
.single .prose h2{align-items:center}
/* And the stray bar is gone for good. */
.single .prose h2::after{content:none}

/* ── h3: a step inside a section, not another section ─────────────────── */
.single .prose h3{
  font-size:clamp(17px,1.5vw,20px);
  color:#22406F;
  margin:clamp(24px,2.6vw,34px) 0 8px;
  padding-inline-start:18px;
  position:relative;
}
.single .prose h3::before{
  content:"";position:absolute;inset-inline-start:0;top:.35em;
  width:6px;height:6px;border-radius:2px;background:var(--blue-400);
  transform:rotate(45deg);
}

/* ── lists read as lists ──────────────────────────────────────────────── */
.single .prose ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.single .prose ul li{
  position:relative;padding-inline-start:26px;
}
.single .prose ul li::before{
  content:"";position:absolute;inset-inline-start:6px;top:.75em;
  width:7px;height:7px;border-radius:50%;background:var(--blue-400);
}
.single .prose li strong{color:var(--navy-900);font-weight:700}

@media(max-width:640px){
  .single .prose h2{padding-inline-start:52px;font-size:20px}
  .single .prose h2::before{width:38px;height:38px;border-radius:12px;font-size:12.5px}
  .single .prose p,.single .prose li{max-width:none}
}

/* ── the mobile bar: burger at the start, logo in the middle ─────────────
   A three-cell row where the two ends are the SAME width, so the logo lands on
   the true centre of the bar rather than on the centre of whatever space the
   burger left over. The third cell is empty and exists only to balance the
   first - the standard way to centre something between two unequal ends. */
.topbar .wrap{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
}
.topbar .burger{justify-self:start}
.topbar .logo{justify-self:center;margin:0}
.topbar__pad{display:block;width:44px;height:1px}

/* ── the quick-lead bar, at a size that matches its job ──────────────────
   It is the only lead capture on the home page, and it was set smaller than
   the article text sitting above it. Fields, button and headline all go up a
   step; the row still holds on one line because the fields share what is left
   after the button rather than each claiming a minimum. */
.qlead.is-open .qlead__body{max-height:440px;padding:34px clamp(20px,3vw,34px) 30px}
.qlead__intro b{font-size:21px}
.qlead__intro span{font-size:13.5px;margin-top:5px}
.qlead__form{gap:12px}
.qlead__form input:not(.hp){
  padding:17px 22px;
  font-size:16px;
  min-width:130px;
  border-radius:var(--r-pill);
}
.qlead__form input::placeholder{font-size:15.5px}
.qlead__form .btn{padding:17px 44px;font-size:16.5px}
.qlead__legal{font-size:13px;margin-top:10px}

/* The dock grew, so the things that have to clear it move with it. */
.home .hero{padding-bottom:clamp(214px,28vh,300px)}
.fabs{bottom:var(--fab-b,232px)}

@media(max-width:1100px){
  .qlead__form input:not(.hp){padding:14px 18px;font-size:15px;min-width:120px}
  .qlead__form .btn{padding:14px 32px;font-size:15px}
}
@media(max-width:900px){
  .fabs{bottom:var(--fab-b,74px)}
}

/* ── the card treatment goes, everywhere ─────────────────────────────────
   `.prose h2 ~ *` gave every element after a heading a white background and a
   border down each side, so a run of headings and paragraphs looked like one
   stacked card. It was reset for articles and for the home page's flow
   sections but not for ordinary pages - and with the white ground removed, all
   that was left of it there was the two side borders: the stray vertical lines
   hanging in the empty space.

   The whole treatment is dropped. The reading surface is the page. */
.prose__in{background:none;border:0;box-shadow:none;border-radius:0;padding-inline:0;max-width:none}
.prose__in::before{content:none}
.prose h2{background:none;border-inline:0;border-bottom:0;border-radius:0;max-width:none;margin-inline:0}
.prose h2 ~ *{background:none;border-inline:0;border-bottom:0;border-radius:0;padding-inline:0;margin-inline:0}
.prose h2 ~ *:last-child{border-bottom:0;border-radius:0}

/* With the frame gone, the column needs its own measure again. */
.prose p,.prose li{max-width:64ch}
.prose h2,.prose h3{max-width:none}

/* ── the dock's confirmation ─────────────────────────────────────────────── */
.qnote{
  grid-column:1/-1;
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;padding:13px 18px;border-radius:14px;
  font-size:15px;font-weight:700;line-height:1.5;
}
.qnote__i{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%}
.qnote__i svg{width:15px;height:15px}
.qnote--ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.qnote--ok .qnote__i{background:#10B981;color:#fff}
.qnote--bad{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.qnote--bad .qnote__i{background:#DC2626;color:#fff}
/* It arrives rather than appearing - a message that was not there a moment ago
   and simply is now gets missed. */
html.js .qnote{animation:qnoteIn .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes qnoteIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .qnote{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   404
   ═══════════════════════════════════════════════════════════════════════════ */
.e404{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(30px,4vw,50px)}
.e404__bg{position:absolute;inset:-10% -6%;width:112%;height:120%;z-index:0;
  color:var(--blue-600);opacity:.07;pointer-events:none}
.e404 .wrap{position:relative;z-index:1}
.e404__in{max-width:760px}

/* The numerals, with the brand mark standing in for the zero - the one place
   on the site where the logo can carry a joke and still be the logo. */
.e404__num{
  display:flex;align-items:center;gap:clamp(6px,1vw,12px);
  font-family:var(--font-latin);font-size:clamp(74px,12vw,168px);font-weight:800;
  line-height:.9;color:var(--navy-900);margin:0 0 clamp(10px,1.6vw,20px);
}
.e404__o{
  display:block;flex:0 0 auto;
  width:clamp(58px,9.4vw,132px);height:clamp(58px,9.4vw,132px);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7BA9F7 0%,#3D80F2 48%,#1B4FBF 100%);
  box-shadow:0 14px 40px rgba(38,112,238,.34);
  animation:e404o 4.2s ease-in-out infinite;
}
@keyframes e404o{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.04)}}

.e404 h1{font-size:clamp(24px,2.8vw,40px);color:var(--navy-900);letter-spacing:normal;
  line-height:1.3;margin:0 0 12px;font-weight:800}
.e404__lead{font-size:clamp(15px,1.15vw,18px);line-height:1.8;color:var(--ink-soft);
  max-width:56ch;margin:0 0 clamp(20px,2.6vw,32px)}

.e404__search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,38px);max-width:560px}
.e404__search input{
  flex:1 1 220px;min-width:0;
  padding:16px 22px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);
  text-align:start;direction:rtl;transition:border-color .2s,box-shadow .2s;
}
.e404__search input:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--ring)}
.e404__search .btn{flex:0 0 auto;padding:16px 30px;font-size:16px}

.e404__links{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
.e404__links a{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s;
}
.e404__links b{display:block;font-size:15.5px;font-weight:700;color:var(--navy-900);line-height:1.4}
.e404__links span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.5}
.e404__links svg{width:19px;height:19px;color:var(--blue-600);grid-row:1/3;
  transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.e404__links a:hover{transform:translateY(-3px);border-color:var(--blue-400);
  box-shadow:0 14px 32px rgba(19,36,65,.10)}
.e404__links a:hover svg{transform:translateX(-4px)}
html[dir="ltr"] .e404__links a:hover svg{transform:translateX(4px)}

/* Visually hidden, still read aloud. */
.scr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .e404__o{animation:none}
  .e404__links a:hover{transform:none}
}

/* ── the diagram, bigger and running ─────────────────────────────────────
   It is the only illustration on the site, so it carries the whole visual
   argument: one core, eight agents, work moving between them. */
.home .hero__art{width:100%;max-width:none}
.home .hero__art svg{width:100%;height:auto;overflow:visible}
@media(min-width:1500px){
  .home .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
}

/* The core breathes. Slowly - it is a heartbeat, not a pulse. */
.hero__art .core{transform-box:fill-box;transform-origin:center;
  animation:coreBreathe 5.2s ease-in-out infinite}
@keyframes coreBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* The orbit turns, which is what makes eight static pills read as a system
   rather than as a diagram printed on a page. */
.hero__art .orbit{transform-box:fill-box;transform-origin:center;
  animation:ringSpin 90s linear infinite}

/* The pills lift in turn, so the ring is never entirely still. */
.hero__art .pill{transform-box:fill-box;transform-origin:center}
html.js .hero__art .pill{
  animation:pillIn .5s cubic-bezier(.2,.7,.2,1) both,
            pillFloat 6.5s ease-in-out infinite;
  animation-delay:calc(.55s + var(--i,0) * .1s), calc(var(--i,0) * -.8s);
}
@keyframes pillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media(prefers-reduced-motion:reduce){
  .hero__art .core,.hero__art .orbit,.hero__art .pkt{animation:none}
  html.js .hero__art .pill{animation:pillIn .01s both}
}
html.a11y-nomotion .hero__art .core,
html.a11y-nomotion .hero__art .orbit,
html.a11y-nomotion .hero__art .pkt{animation:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE READING SURFACE FOR EVERY PAGE
   ═══════════════════════════════════════════════════════════════════════════
   The article layout was scoped to `.single`, so ordinary pages and the home
   page's flow sections kept the older, loose one: the numbered chip sat 26px
   in (a position that only made sense while the card had 26px of padding, and
   the card is gone), the headings had no rule above them, and the text ran on
   with nothing marking where one part ended and the next began.

   Same rules, no `.single` in front of them. */

/* ── sections ──────────────────────────────────────────────────────────── */
.prose h2{
  position:relative;
  display:flex;align-items:center;
  max-width:none;margin-inline:0;
  margin-block:clamp(34px,4vw,54px) clamp(12px,1.4vw,18px);
  padding:clamp(22px,2.4vw,32px) 0 0 0;
  padding-inline-start:64px;
  border-top:1px solid var(--line-soft);
  font-size:clamp(20px,2vw,27px);
  line-height:1.4;
  color:#1C3663;
  letter-spacing:normal;
}
.prose h2:first-child{border-top:0;margin-top:0;padding-top:0}
.prose h2::before{
  position:absolute;
  inset-inline-start:0;inset-inline-end:auto;
  top:auto;bottom:auto;align-self:center;
  transform:none;margin:0;
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--blue-600);color:#fff;
  font-family:var(--font-latin);font-size:14px;font-weight:700;
  box-shadow:0 6px 16px rgba(38,112,238,.26);
  animation:none;
}
.prose h2::after{content:none}

/* ── the column ────────────────────────────────────────────────────────── */
.prose p,.prose li{max-width:62ch;margin-inline:0;text-align:start}
.prose .lead-p{max-width:58ch}
.prose h3{
  font-size:clamp(17px,1.5vw,20px);color:#22406F;
  margin:clamp(24px,2.6vw,34px) 0 8px;
  padding-inline-start:18px;position:relative;
  display:block;line-height:1.55;
}
.prose h3::before{
  content:"";position:absolute;inset-inline-start:0;top:.42em;
  width:6px;height:6px;border-radius:2px;background:var(--blue-400);
  transform:rotate(45deg);
}

/* ── lists ─────────────────────────────────────────────────────────────── */
.prose ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.prose ul li{position:relative;padding-inline-start:26px}
.prose ul li::before{
  content:"";position:absolute;inset-inline-start:6px;top:.75em;
  width:7px;height:7px;border-radius:50%;background:var(--blue-400);
}
.prose li strong{color:var(--navy-900);font-weight:700}
.prose p strong{color:var(--navy-900);font-weight:700}

@media(max-width:640px){
  .prose h2{padding-inline-start:52px;font-size:20px}
  .prose h2::before{width:38px;height:38px;border-radius:12px;font-size:12.5px}
  .prose p,.prose li{max-width:none}
}

/* The last of the spine. `.prose__in > h2:not(:last-of-type)::after` drew a
   2px connector down the side of each heading - it belonged to the card layout
   that is gone, and with the card gone it was a 2px line hanging in space (it
   was still there a moment ago at 2x114px, merely transparent). It is removed
   at equal reach so nothing can revive it. */
.prose__in > h2:not(:last-of-type)::after,
.prose__in > h2::after{content:none;animation:none;background:none}

/* ── the hero still has to be exactly one screen ─────────────────────────
   Enlarging the diagram and the dock together pushed it 111px past the fold
   and left the CTA sitting 2px off the quick-lead bar.

   The artwork is what gives way. It is the only element here whose size is
   discretionary - the headline, the argument and the buttons are all load
   bearing - and an SVG with a viewBox scales to whatever box it is given, so
   capping its height costs nothing but pixels. */
.home .hero__art svg{
  width:100%;
  /* 40vh, not 44: at 44 the section measured 787px against a 768px viewport -
     nineteen pixels of overflow, which is a scrollbar on a page that is
     supposed to be exactly one screen. */
  height:min(40vh, 316px);
  /* the default preserveAspectRatio="xMidYMid meet" does the fitting */
}
/* Enough air under the buttons that they read as sitting ON the page rather
   than as part of the bar below them. */
.home .hero{padding-bottom:clamp(238px,31vh,310px)}
.fabs{bottom:var(--fab-b,236px)}

@media(max-height:720px){
  .home .hero__art svg{height:min(38vh,270px)}
}
@media(max-width:900px){
  .home .hero__art svg{height:auto}
  .fabs{bottom:var(--fab-b,74px)}
}

/* The sub-wordmark's colour is set once, further down, against the brand file.
   The rule that lived here painted it brand blue and has been removed: it came
   AFTER the base rule and so silently won, which is why editing the wordmark
   colour at the top of this file appeared to do nothing. */

/* ═══════════════════════════════════════════════════════════════════════════
   THE EDITORIAL COLUMN — text that uses the page
   ═══════════════════════════════════════════════════════════════════════════
   A 62-character column on a 1500px page is right for reading and wrong for
   looking at: two thirds of the screen sat empty beside every paragraph.

   So the heading moves OUT of the column and into a margin of its own. The
   text keeps its measure - the line length never changes, which is the whole
   point - and the page gains a second column to be laid out in. This is how a
   printed page has done it for four hundred years.

   Wide screens only. Below 1200px there is no margin to give away, and the
   heading goes back above its text. */
@media(min-width:1200px){
  .prose__in{
    display:grid;
    grid-template-columns:minmax(210px,300px) minmax(0,1fr);
    column-gap:clamp(30px,4vw,68px);
    align-items:start;
  }
  /* Headings occupy the margin column; everything else the reading column. */
  .prose__in > h2{
    grid-column:1;
    margin:clamp(30px,3.4vw,48px) 0 0;
    padding:clamp(20px,2.2vw,28px) 0 0;
    padding-inline-start:60px;
    align-self:start;
    /* It follows the section it names while that section is on screen. */
    position:sticky;
    top:clamp(18px,3vh,34px);
  }
  .prose__in > h2:first-child{margin-top:0;padding-top:0}
  .prose__in > *:not(h2){grid-column:2}

  /* The rule now belongs to the whole row, not to the heading's own width. */
  .prose__in > h2{border-top:0}
  .prose__in > h2::marker{content:none}

  /* The reading column keeps its own measure inside the wider grid. */
  .prose__in > p,.prose__in > ul,.prose__in > ol{max-width:66ch}
  .prose__in > .lead-p{max-width:70ch}
}

/* Under the breakpoint the two columns collapse back into one and the heading
   returns to sitting above its text, rule and all. */
@media(max-width:1199px){
  .prose__in{display:block}
}

/* ── the diagram gets the space back ─────────────────────────────────────
   Bigger, and still exactly one screen. The room comes from the floor rather
   than from the artwork: the CTA had 69px of air under it before the dock,
   which is more than it needs. Trimming that to ~40 buys the illustration
   another 45px of height - and the height is what governs here, since the
   drawing is wider than it is tall and was being fitted by its height. */
.home .hero{padding-bottom:clamp(206px,27vh,272px)}
.home .hero__art svg{height:min(47vh, 372px)}
.fabs{bottom:var(--fab-b,204px)}

@media(max-height:720px){
  .home .hero__art svg{height:min(41vh,292px)}
  .home .hero{padding-bottom:clamp(196px,26vh,230px)}
}
@media(max-width:900px){
  .home .hero__art svg{height:auto}
  .fabs{bottom:var(--fab-b,74px)}
}

/* ── one marker per list item, and room for it ───────────────────────────
   Every li was carrying TWO markers: a ::before (originally a tinted tile,
   later redefined as a small dot) and a ::after drawing a tick out of two
   borders. Both were placed inside the item's 26px indent, so they landed on
   top of each other and on the first letter of the text - the "arrow through
   the words" on those cards.

   The tick is kept, because a list of claims reading as checkable is worth
   more than a dot, and the dot is dropped. Everything it needs is restated. */
.prose ul{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.prose ul li{
  position:relative;
  padding:14px 18px;
  padding-inline-start:48px;          /* 16 + 22 tile + 10 air */
  background:var(--bg-mist);
  border:1px solid var(--line-soft);
  border-radius:14px;
  line-height:1.75;
  max-width:66ch;
}
/* The tile. */
.prose ul li::before{
  content:"";position:absolute;
  inset-inline-start:16px;top:15px;
  width:22px;height:22px;border-radius:7px;
  background:var(--blue-100);
  transform:none;border:0;
}
/* The tick inside it, drawn from two borders and rotated. */
.prose ul li::after{
  content:"";position:absolute;
  inset-inline-start:21px;top:21px;
  width:11px;height:6px;
  border-inline-start:2.2px solid var(--blue-600);
  border-bottom:2.2px solid var(--blue-600);
  border-top:0;border-inline-end:0;
  background:none;border-radius:0;
  transform:rotate(-45deg);
}
.prose ul li:hover{border-color:var(--blue-400);background:var(--bg-sky)}
.prose ul li strong{color:var(--navy-900);font-weight:700}

@media(max-width:640px){
  .prose ul li{padding-inline-start:42px;padding-block:12px}
  .prose ul li::before{inset-inline-start:12px;width:20px;height:20px}
  .prose ul li::after{inset-inline-start:16.5px;top:20px}
}

/* ── the closing band, rebuilt ───────────────────────────────────────────
   The heading was overflowing the section: a hard <br> in the markup fixed the
   break at a point that only suited one width, and past it the second line ran
   off the edge. It wraps on its own now, with a measure to wrap inside. */
.cta{padding-block:clamp(44px,6vw,84px)}
.cta .wrap{align-items:center;gap:clamp(30px,4.5vw,72px)}
.cta__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;margin-bottom:16px;
  background:var(--blue-100);color:var(--blue-700,#1B4FBF);
  font-size:13px;font-weight:800;letter-spacing:normal;
}
.cta__eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-600);
  animation:btn2Ping 2.6s ease-out infinite;
}
.cta h2{
  font-size:clamp(25px,2.9vw,42px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:normal;      /* Hebrew */
  max-width:15ch;             /* wraps here instead of off the edge */
  margin:0;
}
.cta p{font-size:clamp(15px,1.15vw,18px);line-height:1.75;max-width:44ch}

/* ── the three commitments ─────────────────────────────────────────────── */
.cta .ticks{display:grid;gap:12px;margin-top:clamp(20px,2.4vw,30px);padding:0;list-style:none}
.cta .ticks li{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:14px;
  padding:14px 18px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  border-radius:16px;
  max-width:46ch;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s;
}
.cta .ticks li:hover{transform:translateY(-2px);border-color:var(--blue-400);
  box-shadow:0 10px 26px rgba(19,36,65,.08)}
.cta .ticks li::before,.cta .ticks li::after{content:none}   /* not the page list */
.ticks__n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--blue-600);color:#fff;
  font-family:var(--font-latin);font-size:12.5px;font-weight:800;
  box-shadow:0 6px 14px rgba(38,112,238,.26);
}
.cta .ticks li > span:last-child{display:block;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.cta .ticks li b{display:block;font-size:15.5px;font-weight:800;color:var(--navy-900);margin-bottom:2px}
.cta .ticks svg{display:none}   /* the old tick, superseded by the index */

@media(max-width:860px){
  .cta h2{max-width:none}
  .cta .ticks li{max-width:none}
}

/* ── the wordmark in brand blue ──────────────────────────────────────────
   BOTH LINES ARE NAVY, matching the supplied brand file. An earlier draft set
   them in brand blue to tie them to the dots; the real logo does the opposite -
   the name is the dark anchor and the cluster is the only colour. This is the
   LAST rule that touches the wordmark's colour, and it is the one that wins. */
.logo__txt b{
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:.02em;      /* Space Grotesk is wider than Poppins */
  padding-inline-end:.02em;
}
.logo__txt span{color:var(--navy-900);font-weight:700}
.logo:hover .logo__txt b{color:#1D45F5}
.logo__txt b,.logo__txt span{transition:color .2s}

/* ── the 404 sits in the middle of the page ──────────────────────────────
   The block was capped at 760px inside a full-width wrap, so it stacked
   against the start edge with the whole rest of the window empty beside it.

   Centred here, and centred is right for THIS page specifically: it is one
   short message and a set of choices, not a reading column - the objection to
   centred text (the eye hunting for the start of each line) does not apply to
   two lines of copy. */
.e404__in{margin-inline:auto;text-align:center}
.e404__num{justify-content:center}
.e404 h1{max-width:22ch;margin-inline:auto}
.e404__lead{margin-inline:auto;text-align:center}
.e404__search{margin-inline:auto;justify-content:center}
.e404__search input{text-align:center}
/* The link cards keep their own alignment - a card with centred text and an
   arrow pinned to one side looks unbalanced. */
.e404__links{text-align:start}
.e404__links a{text-align:start}

/* Manrope runs a touch narrower than Space Grotesk and carries its weight
   well, so the mark is set at 800 with a hair more tracking to keep the
   caps from closing up. */
.logo__txt b{font-weight:800;letter-spacing:.045em;padding-inline-end:.045em}

/* ── the 404 cards: explicit placement, so RTL comes out right ───────────
   The card holds THREE children - <b>, <span>, <svg> - in a two-column grid
   with nothing saying where each goes. Auto-placement put the title in the
   first cell, the subtitle in the SECOND (the column meant for the icon), and
   pushed the icon onto a row of its own. In RTL that surfaced as the text
   sitting on the left with the arrow stranded on the right - the wrong way
   round in a right-to-left layout.

   Every child is now placed by hand. Logical columns, so this holds in either
   direction: column 1 is the start side (right in Hebrew), column 2 the end. */
.e404__links a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;
  align-items:center;
  direction:rtl;
}
.e404__links a > b{grid-column:1;grid-row:1;align-self:end}
.e404__links a > span{grid-column:1;grid-row:2;align-self:start}
.e404__links a > svg{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}

/* ── cookie notice ─────────────────────────────────────────────────────────
   A THIN FULL-WIDTH STRIP pinned to the very bottom, not a card in the corner.
   The card version sat on top of the quick-enquiry form and hid the thing the
   whole page is asking the visitor to do - a compliance notice must never cover
   the conversion. Stretched across the window it costs one line of height and
   covers nothing.

   The dock is lifted by the strip's height while it is showing, via the
   --cookiebar-h variable set below, so the two never stack on top of each
   other. */
.cookiebar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:240;
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:16px clamp(16px,3vw,32px);
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(19,36,65,.10);
  opacity:0;transform:translateY(100%);
  transition:opacity .28s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.cookiebar.is-in{opacity:1;transform:none}
/* One line on a desktop window: the text is allowed to shrink, the button is
   not, and neither is allowed to wrap while there is room. */
.cookiebar__t{margin:0;flex:0 1 auto;min-width:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.cookiebar__t a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookiebar__ok{flex:0 0 auto;padding:11px 30px;font-size:15px}

/* Phones get two lines rather than a squeezed one. */
@media(max-width:720px){
  .cookiebar{flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:14px}
  .cookiebar__t{flex:1 1 100%;font-size:13.5px}
  .cookiebar__ok{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .cookiebar{transition:none;opacity:1;transform:none}
}

/* ── the language switcher reads as clickable ──────────────────────────────
   As four flat grey pills it looked like a set of labels, and nobody clicks a
   label. The affordances a link needs are a cursor, a border that responds, and
   a current state that is unmistakably the current one. */
.langs__set a{cursor:pointer}
.langs__set a:not(.is-on){background:#fff;border-color:var(--line);color:var(--navy-900)}
.langs__set a:not(.is-on):hover{background:var(--blue-50);border-color:var(--blue-400);color:var(--blue-600)}
.langs__set a:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.langs__set a.is-on{background:var(--blue-600);border-color:var(--blue-600);color:#fff;
  box-shadow:0 4px 12px rgba(38,112,238,.30)}

/* ── the headline in LTR ───────────────────────────────────────────────────
   `white-space:nowrap` was safe for three Hebrew words and runs straight off
   the window in English, where the same sentence is far longer. Hebrew keeps
   the single line it was designed around; every translation is allowed to
   wrap. */
html[dir="ltr"] .home .hero__head h1{
  white-space:normal;
  font-size:clamp(30px,min(5.2vw,11vh),76px);
  text-wrap:balance;
}

/* ── the rail fits, and fills ──────────────────────────────────────────────
   Two problems, one cause. The nav was CENTRED in the leftover height, so on a
   tall window it sat as a tight clump with dead air above and below it - the
   gaps under the logo and under the last link. Centring also meant that when
   the list did not fit, it overflowed at both ends.

   The list now STRETCHES instead: it takes the whole column and distributes its
   own rows through it. Dead space becomes row spacing, which is why the gaps
   disappear without anything being moved by hand, and the rows can be bigger
   rather than smaller - the height was never the problem, the distribution was.

   Row size is still bounded by vh so a short laptop compresses gracefully
   instead of overflowing, but the ceilings are deliberately generous. */
@media (min-width:1024px){
  .rail__top{padding:clamp(10px,1.8vh,24px) 16px clamp(8px,1.6vh,20px)}
  .rail .logo{gap:clamp(6px,1vh,10px)}
  .rail .logo__mark{width:clamp(36px,5.6vh,56px);height:clamp(36px,5.6vh,56px)}
  .rail .logo__txt b{font-size:clamp(15px,2.1vh,20px)}
  .rail .logo__txt span{font-size:clamp(6.5px,.9vh,8.5px);margin-top:clamp(2px,.4vh,5px)}

  /* The scroller stops centring and hands its full height to the nav. */
  .rail__scroll{justify-content:flex-start;padding-block:0}
  .rail__scroll > .rnav{flex:1 1 auto;display:flex;flex-direction:column;
    justify-content:space-evenly;gap:0}

  /* Bigger targets. The tile and the label both grow; the padding is small
     because space-evenly is now supplying the rhythm between rows. */
  .rnav a{padding:clamp(6px,1vh,12px) 12px;gap:clamp(10px,1.4vh,15px)}
  .rnav__ic{width:clamp(38px,5vh,52px);height:clamp(38px,5vh,52px);
    border-radius:clamp(12px,1.7vh,16px)}
  .rnav__ic svg{width:60%;height:60%}
  .rnav__t b{font-size:clamp(14.5px,2vh,17.5px)}
  .rnav__grp{padding:clamp(2px,.6vh,10px) 14px 2px;font-size:clamp(9.5px,1.2vh,11px)}

  .railcta{padding:clamp(9px,1.5vh,17px) 14px}
  .langs__set a,.langs__set button{padding-block:clamp(5px,.9vh,8px);font-size:clamp(11px,1.4vh,12.5px)}
}

/* ── the FAQ signpost on the articles page ─────────────────────────────── */
.faqlink{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;
  background:var(--bg-sky);border:1px solid var(--line);text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s}
.faqlink:hover{background:#fff;border-color:var(--blue-400);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(19,36,65,.08)}
.faqlink__ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#fff;color:var(--blue-600);border:1px solid var(--line)}
.faqlink__ic svg{width:24px;height:24px}
.faqlink__t{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.faqlink__t b{font-size:17px;color:var(--navy-900)}
.faqlink__t span{font-size:14px;color:var(--ink-soft)}
.faqlink__go{width:22px;height:22px;color:var(--blue-600);flex:0 0 auto}

/* ── the course shop ───────────────────────────────────────────────────────
   A scroll-snap track, not a JS slider. It swipes on a phone, scrolls with a
   trackpad, takes the keyboard, and the arrow buttons are an enhancement on
   top - so nothing here depends on script having run. */
.shop{padding-block:clamp(26px,6vh,64px)}
.shop__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:clamp(16px,3vh,28px);flex-wrap:wrap}
.shop__head h2{margin:0 0 6px;font-size:clamp(22px,3vw,32px);color:var(--navy-900)}
.shop__head p{margin:0;color:var(--ink-soft);font-size:15px;max-width:52ch}
.shop__nav{display:flex;gap:8px;flex:0 0 auto}
.shop__arrow{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--blue-600);cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s}
.shop__arrow:hover{background:var(--blue-50);border-color:var(--blue-400);transform:translateY(-2px)}
.shop__arrow svg{width:20px;height:20px}

.shop__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);
  gap:18px;margin:0;padding:4px 4px 14px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  /* Three across on a desktop; the track only scrolls when they stop fitting. */
  grid-auto-columns:minmax(272px,calc((100% - 36px)/3));
}
.shop__track::-webkit-scrollbar{height:6px}
.shop__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  scroll-snap-align:start;box-shadow:0 6px 20px rgba(19,36,65,.06)}

/* The "בקרוב" ribbon: a rotated banner pinned across the top corner. The card
   clips it, which is what turns a rotated rectangle into a corner ribbon. */
.pcard__ribbon{
  position:absolute;top:20px;inset-inline-end:-46px;z-index:2;
  width:180px;padding:7px 0;text-align:center;
  background:var(--navy-900);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;
  transform:rotate(45deg);
  box-shadow:0 4px 14px rgba(19,36,65,.28);
}
/* In RTL the corner it hangs off is mirrored, so the rotation mirrors with it -
   otherwise the ribbon points away from the corner and floats in the card. */
html[dir="rtl"] .pcard__ribbon{transform:rotate(-45deg)}

.pcard__art{height:132px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,var(--blue-50),#fff);color:var(--blue-600)}
.pcard__art svg{width:150px;height:150px;opacity:.30;transform:translate(8%,6%)}
.pcard__body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1 1 auto}
.pcard__meta{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue-600)}
.pcard__n{margin:0;font-size:18px;line-height:1.35;color:var(--navy-900)}
.pcard__d{margin:0;font-size:14px;line-height:1.65;color:var(--ink-soft);flex:1 1 auto}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line-soft)}
.pcard__price{display:grid;line-height:1.2}
.pcard__price .ltr{font-size:22px;font-weight:800;color:var(--navy-900)}
.pcard__price small{font-size:11.5px;color:var(--ink-faint)}

/* Disabled has to LOOK unavailable, not merely be unavailable - a button that
   reads as live and does nothing is worse than one that reads as pending. */
.pcard__buy[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.35);box-shadow:none}
.pcard__buy[disabled]:hover{transform:none}

@media(max-width:720px){
  .shop__track{grid-auto-columns:minmax(250px,84%)}
  .shop__head{align-items:flex-start}
}

/* Labels hold one line. The rail is now wide enough for the longest of them,
   and this makes that a rule rather than a coincidence - a wrapped label would
   make its row taller than its neighbours and break the column's rhythm. */
@media (min-width:1024px){
  .rnav__t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── the language pills, lit like the social buttons ───────────────────────
   They sat flat and grey directly under a row of white, bordered, clearly
   tappable social buttons, and read as labels by comparison. Same treatment as
   that row: white ground, real border, lift on hover. */
.langs__set a{
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy-900);
  font-weight:700;
  box-shadow:0 2px 6px rgba(19,36,65,.05);
  transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.langs__set a:hover{
  background:var(--blue-50);border-color:var(--blue-400);color:var(--blue-600);
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(38,112,238,.18);
}
.langs__set a.is-on{
  background:var(--blue-600);border-color:var(--blue-600);color:#fff;
  box-shadow:0 6px 16px rgba(38,112,238,.34);
}
.langs__set a.is-on:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px)}

/* The nav distributes its rows through the column, but only up to a point: on a
   very tall window space-evenly spread eight links across 1200px and the menu
   became a ladder. Past this height it stops stretching and centres instead. */
@media (min-width:1024px){
  .rail__scroll > .rnav{max-height:600px;margin-block:auto}
}

/* ── the language pills behave exactly like the social buttons ─────────────
   The hover above tinted them pale blue, which next to the social row - where
   hover fills SOLID blue with a white glyph - read as the weaker, greyer,
   half-disabled version of the same control. Same states, same colours, so the
   two rows are one component in two shapes.

   :active is stated too: without it the pill flashes back to its resting white
   at the exact moment of the click, which is what made them look dead on
   press. */
.langs__set a:hover,
.langs__set a:focus-visible{
  background:var(--blue-600);
  border-color:var(--blue-600);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(38,112,238,.30);
}
.langs__set a:active{
  background:var(--blue-700,#1B5CD6);
  border-color:var(--blue-700,#1B5CD6);
  color:#fff;
  transform:translateY(0) scale(.97);
}

/* Visually hidden, still read aloud - for landmark names that would be a
   duplicated heading on screen. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The page head reserved room for artwork the courses page does not use, which
   is where the empty screen between the title and the shop came from. */
.shop__head{align-items:center;justify-content:flex-end}

/* The head above the shop reserved room for artwork this page does not show. */

/* ── the cart: a handle in the header, a drawer off the side ──────────────
   The pill that used to sit in the shop header showed a total and a button but
   never what was IN the cart, so the first time a buyer could check their own
   order was the checkout page. The drawer answers that where the choice is
   being made. */
.carttab{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:8px 16px 8px 10px;border-radius:99px;
  background:#fff;border:1px solid var(--line);
  font:inherit;font-size:14px;font-weight:700;color:var(--navy-900);
  box-shadow:0 6px 18px rgba(19,36,65,.10);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.carttab:hover{border-color:var(--blue-400);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(38,112,238,.20)}
.carttab[hidden]{display:none!important}
.carttab__n{min-width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;font-size:13px;font-weight:800}

.cartscrim{position:fixed;inset:0;z-index:300;background:rgba(11,27,55,.42);
  opacity:0;transition:opacity .26s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cartscrim.is-in{opacity:1}
.cartscrim[hidden]{display:none!important}

/* inset-inline-END, so the panel opens from the left in Hebrew and from the
   right once the page is read in English - it follows the reading direction
   rather than a physical edge. */
.cartdr{position:fixed;z-index:310;inset-inline-end:0;
  /* Anchored to the top and sized with dvh rather than stretched with
     inset-block:0. `inset-block:0` spans the LAYOUT viewport, which on a phone
     and inside an in-app browser runs underneath the toolbars - which is why
     the panel's heading was sliced in half by the browser's own chrome. dvh is
     the viewport that is actually visible, and it follows the toolbars as they
     collapse. */
  top:0;height:100dvh;max-height:100dvh;
  /* Safe areas at EVERY width, not only on a phone: an in-app webview overlays
     its bar on a wide screen too. */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;overflow:hidden;
  width:min(390px,90vw);display:flex;flex-direction:column;
  background:#fff;box-shadow:-24px 0 60px rgba(11,27,55,.22);
  transform:translateX(var(--dr-out,-100%));
  transition:transform .32s cubic-bezier(.2,.75,.2,1);
  visibility:hidden}
html[dir="ltr"] .cartdr{--dr-out:100%}
.cartdr.is-open{transform:none;visibility:visible}

.cartdr__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.cartdr__hd h2{margin:0;font-size:19px;color:var(--navy-900)}
.cartdr__x{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink-faint);font-size:22px;line-height:1;cursor:pointer}
.cartdr__x:hover{background:var(--bg-mist);color:var(--navy-900)}

.cartdr__list{flex:1 1 auto;overflow-y:auto;list-style:none;margin:0;padding:14px 20px;
  display:grid;gap:10px;align-content:start}
.cartdr__list li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-mist)}
.cartdr__n{font-size:14px;font-weight:700;color:var(--navy-900);line-height:1.4}
.cartdr__list b{font-size:15px;color:var(--navy-900)}
.cartdr__rm{width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--ink-faint);font-size:17px;line-height:1;cursor:pointer}
.cartdr__rm:hover{border-color:#E0574F;color:#E0574F}
.cartdr__empty{margin:0;padding:30px 20px;text-align:center;color:var(--ink-soft)}

.cartdr__ft{flex:0 0 auto;padding:18px 20px;border-top:1px solid var(--line);background:#fff}
.cartdr__sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;
  font-weight:700;color:var(--navy-900)}
.cartdr__sum b{font-size:24px;font-weight:800}
.cartdr__vat{margin:4px 0 12px;font-size:12px;color:var(--ink-faint)}
.cartdr__go{width:100%;justify-content:center}
.cartdr__more{width:100%;justify-content:center;margin-top:9px}

/* The panel is full-height on a phone; the shadow does the separating. */
@media(max-width:520px){
  .cartdr{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .cartdr{transition:none}
  .cartscrim{transition:none}
}

/* A course already in the cart reads as chosen, not as a button to press again. */
.pcard__buy.is-in{background:var(--bg-sky);color:var(--blue-600);
  border:1px solid var(--blue-400);box-shadow:none}

/* ── checkout ──────────────────────────────────────────────────────────── */
.phead--tight{padding-block:clamp(18px,4vh,40px)}
.co{padding-block:clamp(18px,4vh,44px)}
.co__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);
  gap:clamp(18px,3vw,34px);align-items:start}
@media(max-width:900px){.co__grid{grid-template-columns:1fr}}

.co__fs{border:1px solid var(--line);border-radius:18px;padding:20px;margin:0 0 18px;background:#fff}
.co__fs legend{padding:0 8px;font-size:16px;font-weight:800;color:var(--navy-900)}
.co__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.co__row{grid-template-columns:1fr}}
.co__fs label{display:grid;gap:6px;margin-bottom:14px;font-size:14px;font-weight:700;color:var(--navy-900)}
.co__fs input{padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-weight:500;background:var(--bg-mist)}
.co__fs input:focus{outline:2px solid var(--blue-600);outline-offset:1px;background:#fff}
.co__fs small{font-size:12.5px;font-weight:500;color:var(--ink-faint)}
.co__why{margin:0 0 16px;padding:11px 13px;border-radius:12px;background:var(--bg-sky);
  font-size:13px;line-height:1.6;color:var(--ink-soft)}

.co__aside{position:sticky;top:20px;border:1px solid var(--line);border-radius:20px;
  padding:20px;background:var(--bg-mist)}
.co__ah{margin:0 0 12px;font-size:17px;color:var(--navy-900)}
.co__cart{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.co__cart li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.co__cart li span{flex:1 1 auto;min-width:0}
.co__cart li b{color:var(--navy-900)}
.co__x{width:24px;height:24px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-faint);cursor:pointer;line-height:1;font-size:16px}
.co__x:hover{background:#fff;border-color:#E0574F;color:#E0574F}
.co__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0;padding-top:12px;border-top:1px solid var(--line);font-weight:700;color:var(--navy-900)}
.co__total b{font-size:24px;font-weight:800}
.co__vat{margin:4px 0 14px;font-size:12px;color:var(--ink-faint)}
.co__pay{width:100%;justify-content:center}
.co__secure{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;
  font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.co__secure svg{width:16px;height:16px;flex:0 0 auto;color:#2E9E6B;margin-top:2px}
.co__terms{margin:10px 0 0;font-size:12px;color:var(--ink-faint)}
.co__terms a{color:var(--blue-600);text-decoration:underline}

.co__err{margin:0 0 18px;padding:13px 16px;border-radius:14px;
  background:#FDECEA;border:1px solid #F5C4BF;color:#8E2B22;font-weight:700;font-size:14px}
.co__empty{padding:26px;text-align:center;color:var(--ink-soft)}
.co__empty a{color:var(--blue-600);text-decoration:underline}

.co__done{max-width:620px;margin-inline:auto;text-align:center;padding:22px}
.co__tick{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:#E8F6EF;color:#2E9E6B}
.co__tick svg{width:32px;height:32px}
.co__done h2{margin:0 0 6px;color:var(--navy-900)}
.co__ref{margin:0 0 18px;color:var(--ink-soft)}
.co__sum{list-style:none;margin:0 0 16px;padding:16px;border:1px solid var(--line);
  border-radius:16px;background:var(--bg-mist);display:grid;gap:9px;text-align:start}
.co__sum li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-soft)}
.co__sum-t{padding-top:9px;border-top:1px solid var(--line);font-weight:800;color:var(--navy-900)}
.co__cert{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.co__note{margin:0 0 20px;padding:12px 14px;border-radius:12px;background:var(--bg-sky);
  font-size:13.5px;line-height:1.65;color:var(--ink-soft)}

/* The courses page opens on the shop, so its head is a label and not a stage:
   it keeps the title and the one line under it, and gives back the vertical
   room that a page with a long article actually needs. */

/* `display:flex` in the rule above beats the `hidden` ATTRIBUTE, so the bar
   rendered "0 בסל ₪0" on every page load until something was added. Any
   element given display by a class needs this stated explicitly. */
.cartbar[hidden],.shop__nav[hidden],.co__form[hidden],.co__empty[hidden]{display:none!important}

/* The rail owns the inline-START edge (the right, in RTL), which is where the
   bar was landing - on top of it. Moved to the opposite edge. */
.cartbar{inset-inline-start:auto;inset-inline-end:20px}
@media(max-width:720px){.cartbar{inset-inline:14px}}

/* ── the WhatsApp button ───────────────────────────────────────────────────
   Sits in the existing fab column, so it rides the dock's open/closed state
   with everything else instead of needing its own offset. */
.fab--wa{background:linear-gradient(145deg,#25D366,#12A150)}
.fab--wa svg{width:26px;height:26px}
/* The "online" pip. Decoration, and aria-hidden, because the office is not in
   fact always online - it says "reachable", not "answering right now". */
.fab__dot{position:absolute;top:2px;inset-inline-end:2px;width:12px;height:12px;border-radius:50%;
  background:#3BE07A;border:2.5px solid #fff}

/* The label. Slides out on hover AND on keyboard focus - a tooltip that only
   answers to a mouse is a tooltip half the visitors never get. */
.fab__tip{position:absolute;inset-inline-end:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(8px) scale(.96);transform-origin:center right;
  display:grid;gap:1px;padding:9px 14px;border-radius:14px;white-space:nowrap;
  background:#0B1B37;color:#fff;box-shadow:0 12px 30px rgba(11,27,55,.30);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.2,1)}
html[dir="ltr"] .fab__tip{transform-origin:center left;transform:translateY(-50%) translateX(-8px) scale(.96)}
.fab__tip b{font-size:14px;font-weight:800;line-height:1.25}
.fab__tip i{font-size:12.5px;font-style:normal;opacity:.78;line-height:1.25}
.fab--wa:hover .fab__tip,.fab--wa:focus-visible .fab__tip{
  opacity:1;transform:translateY(-50%) translateX(0) scale(1)}

/* No room for a label beside a phone-width screen, so it is dropped there
   rather than pushed off the edge. */
@media(max-width:720px){.fab__tip{display:none}}
@media(prefers-reduced-motion:reduce){.fab__tip{transition:none}}

/* ── the cart, in the shop header ──────────────────────────────────────────
   No longer fixed. It was pinned to the bottom of the viewport, which is the
   enquiry dock's edge - the two overlapped and the cart covered the form. In
   the header it sits with the products and cannot collide with anything. */
.cartbar{position:static;inset:auto;z-index:auto;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 8px 8px 16px;border-radius:99px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(19,36,65,.10)}
.shop__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.shop__nav{order:2}
.cartbar{order:1;margin-inline-end:auto}
@media(max-width:720px){
  .cartbar{width:100%;justify-content:space-between;margin-inline-end:0}
  .cartbar__go{flex:0 0 auto}
}

/* ── certificate lookup ────────────────────────────────────────────────── */
.vfy{margin:0 0 clamp(16px,2.6vh,26px);padding:18px 20px;border-radius:20px;
  background:var(--bg-sky);border:1px solid var(--line)}
.vfy__hd{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.vfy__ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--blue-600)}
.vfy__ic svg{width:21px;height:21px}
.vfy__hd b{display:block;font-size:16px;color:var(--navy-900)}
.vfy__hd span{display:block;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.vfy__form{display:flex;gap:10px;flex-wrap:wrap}
.vfy__form input{flex:1 1 260px;min-width:0;padding:12px 15px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-weight:600;background:#fff}
.vfy__form input:focus{outline:2px solid var(--blue-600);outline-offset:1px}
.vfy__form .btn{flex:0 0 auto;padding:12px 26px}

.vfy__out:empty{display:none}
.vfy__out{margin-top:14px;padding:14px 16px;border-radius:14px;display:grid;gap:4px;
  font-size:14px;line-height:1.6}
.vfy__out b{font-size:15px}
.vfy__out i{font-style:normal;font-size:13px;opacity:.85}
.vfy__out.is-yes{background:#E8F6EF;border:1px solid #BFE6D4;color:#1F6E4C}
.vfy__out.is-no{background:#FDECEA;border:1px solid #F5C4BF;color:#8E2B22}
.vfy__out.is-warn{background:#FFF6E5;border:1px solid #F3DFB4;color:#7A5A16}
.vfy__out.is-wait{background:var(--bg-mist);border:1px solid var(--line);color:var(--ink-soft)}
.vfy__out ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.vfy__out ul li{display:flex;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.75);font-weight:700}
.vfy__out ul li time{font-weight:600;opacity:.8;white-space:nowrap}

/* ── the honeypot ─────────────────────────────────────────────────────────
   It was hidden by two rules SCOPED to the two forms that existed when it was
   written, so on the checkout it rendered as a stray empty input floating above
   the first fieldset. Hidden by the class itself now, wherever it appears -
   a trap the visitor can see is not a trap, it is a bug. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important}

/* ── the checkout's fieldset legends ──────────────────────────────────────
   A <legend> sits ON the border by default and the box was drawn around it,
   which put the heading half outside its own panel. Taken out of the border
   flow and set as a plain heading above the fields. */
.co__fs{padding-top:16px}
.co__fs legend{float:none;display:block;width:100%;padding:0 0 12px;margin:0;
  font-size:16px;font-weight:800;color:var(--navy-900)}
.co__fs label:last-child{margin-bottom:0}

/* ── the checkout's terms summary ─────────────────────────────────────── */
.co__legal{margin-top:clamp(20px,4vh,38px);padding:22px;border-radius:20px;
  background:var(--bg-mist);border:1px solid var(--line)}
.co__legal h2{margin:0 0 16px;font-size:18px;color:var(--navy-900)}
.co__legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.co__legal-grid b{display:block;margin-bottom:5px;font-size:14.5px;color:var(--navy-900)}
.co__legal-grid p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.co__legal-f{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint)}
.co__legal-f a{color:var(--blue-600);text-decoration:underline}

/* The badge on a course that includes a person's time, not only video. */
.pcard__tag{align-self:flex-start;padding:4px 11px;border-radius:99px;
  background:var(--navy-900);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em}

/* The badge now sits above the price, so it needs the top margin that pushes
   it away from the description rather than the bottom one it had at the top of
   the card. */
.pcard__tag{margin-top:auto}

/* ── the certificate lookup, as a dialog ──────────────────────────────── */
.vfy__open{display:inline-flex;align-items:center;gap:9px;order:0}
.vfy__open svg{width:18px;height:18px;color:var(--blue-600)}

/* Its own band at the foot of the shelves. A tinted card rather than a bare
   button on the page background, so it reads as a separate thing the section
   offers and not as one more control belonging to the last shelf above it. */
.vfysec__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:22px 26px;border-radius:20px;
  background:var(--blue-050,#F2F6FF);border:1px solid var(--line)}
.vfysec__ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:#fff;border:1px solid var(--line)}
.vfysec__ic svg{width:22px;height:22px;color:var(--blue-600)}
.vfysec__txt{flex:1 1 260px;min-width:0}
.vfysec__txt h3{margin:0;font-size:18px;color:var(--ink)}
.vfysec__txt p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.vfysec .vfy__open{flex:0 0 auto}
/* Below this the row genuinely runs out of room: the button goes full width
   rather than sitting orphaned beside a wrapped paragraph. */
@media(max-width:640px){
  .vfysec__in{padding:18px}
  .vfysec .vfy__open{flex:1 1 100%;justify-content:center}
}

dialog.vfy{width:min(520px,calc(100vw - 32px));padding:24px;border:0;border-radius:22px;
  background:#fff;box-shadow:0 30px 80px rgba(11,27,55,.30);color:var(--ink);position:relative}
dialog.vfy::backdrop{background:rgba(11,27,55,.45);backdrop-filter:blur(2px)}
.vfy__close-f{position:absolute;inset-block-start:12px;inset-inline-end:12px;margin:0}
.vfy__close{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);
  background:#fff;color:var(--ink-faint);font-size:20px;line-height:1;cursor:pointer}
.vfy__close:hover{background:var(--bg-mist);color:var(--navy-900)}
dialog.vfy .vfy__hd{margin-bottom:16px}
/* The panel version's own background is dropped - inside a dialog it would be
   a tinted box inside a white box. */
dialog.vfy{border:0}

/* ── dialogs sit in the MIDDLE of the window ──────────────────────────────
   A <dialog> is centred by `margin:auto`, which the browser's own UA rule
   supplies - and which my `.vfy` rule overwrote by setting margin as part of a
   shorthand. Stated explicitly here for both dialogs. */
dialog.vfy,dialog.cert{margin:auto;inset:0;max-height:calc(100dvh - 32px);overflow:auto}

/* ── the card's action row ───────────────────────────────────────────────
   Its own row under the price. Two buttons side by side on the same line as a
   four-digit price is more than a 270px card can hold. */
.pcard__foot{flex-direction:column;align-items:stretch;gap:12px}
.pcard__price{flex-direction:row;align-items:baseline;gap:8px}
.pcard__acts{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}
.pcard__acts .btn{justify-content:center;padding-inline:18px}
.pcard__cert{padding:10px 14px;font-size:13px;white-space:nowrap}

/* ── the sample certificate ──────────────────────────────────────────────── */
dialog.cert{width:min(560px,calc(100vw - 32px));padding:22px;border:0;border-radius:22px;
  background:#fff;box-shadow:0 30px 80px rgba(11,27,55,.30);position:relative}
dialog.cert::backdrop{background:rgba(11,27,55,.45);backdrop-filter:blur(2px)}
.cert__paper{display:grid;justify-items:center;gap:7px;text-align:center;
  padding:30px 24px;border-radius:16px;
  background:linear-gradient(160deg,#F7FAFF,#fff 60%);
  border:1px solid var(--line);
  /* The double rule is what makes a rectangle read as a certificate. */
  box-shadow:inset 0 0 0 1px #fff, inset 0 0 0 6px var(--bg-sky)}
.cert__mark{width:46px;height:46px;color:#1D45F5}
.cert__mark svg{width:100%;height:100%}
.cert__brand{font-family:var(--font-logo);font-size:17px;font-weight:800;letter-spacing:.04em;
  color:var(--navy-900);direction:ltr}
.cert__brand span{display:block;font-size:8.5px;letter-spacing:.3em;font-weight:700;margin-top:3px}
.cert__kicker{margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--blue-600)}
/* The holder's name is a RULED BLANK, so the sample cannot be mistaken for a
   real certificate belonging to nobody. */
.cert__name{width:min(300px,80%);padding-bottom:6px;margin:4px 0 2px;
  border-bottom:1.5px dashed var(--line);font-size:19px;font-weight:800;color:var(--ink-faint)}
.cert__for{font-size:12.5px;color:var(--ink-soft)}
.cert__course{font-size:17px;font-weight:800;color:var(--navy-900);max-width:80%}
.cert__foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint)}
.cert__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);text-align:center}

/* ── the checkout's step indicator ─────────────────────────────────────────
   Named .costeps, NOT .steps. The theme already owns .steps for the process
   section on /how/, and that one draws a connector line with ::before - which
   this indicator inherited, producing a rule that ran off the side of the
   checkout. Two components, two names. */
.costeps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 clamp(16px,3vh,28px);padding:0}
.costeps li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  background:var(--bg-mist);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink-faint)}
.costeps__n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);font-size:11px}
.costeps li.is-done{background:#E8F6EF;border-color:#BFE6D4;color:#2E7A57}
.costeps li.is-done .costeps__n{background:#2E9E6B;border-color:#2E9E6B;color:#fff}
.costeps li.is-now{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.costeps li.is-now .costeps__n{background:rgba(255,255,255,.22);border-color:transparent;color:#fff}
@media(max-width:620px){.costeps__t{display:none}.costeps li{padding:8px 10px}}

/* ── the empty cart ─────────────────────────────────────────────────────── */
.co__empty{display:grid;justify-items:center;gap:8px;text-align:center;
  padding:44px 24px;border:1px dashed var(--line);border-radius:20px;background:var(--bg-mist)}
.co__empty-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-faint);margin-bottom:4px}
.co__empty-ic svg{width:27px;height:27px}
.co__empty b{font-size:18px;color:var(--navy-900)}
.co__empty span{font-size:14px;color:var(--ink-soft)}
.co__empty .btn{margin-top:10px}

/* ── "what happens next" ────────────────────────────────────────────────── */
.co__next{counter-reset:n;list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;text-align:start}
.co__next li{counter-increment:n;position:relative;display:grid;gap:2px;
  padding:14px 16px 14px 16px;padding-inline-start:52px;border-radius:14px;
  background:var(--bg-mist);border:1px solid var(--line)}
.co__next li::before{content:counter(n);position:absolute;inset-inline-start:14px;top:14px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;font-size:12px;font-weight:800}
.co__next b{font-size:15px;color:var(--navy-900)}
.co__next span{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.co__done-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* The two buttons STACK - "תעודה לדוגמה" gets its own row under "הוספה לסל".
   Side by side they split a 270px card between them and both ended up too
   narrow to hold their own labels. */
.pcard__acts{grid-template-columns:1fr;gap:8px}
.pcard__acts .btn2{justify-content:center;text-align:center;white-space:normal}

/* The price and its "כולל מע״מ" belong on one baseline. .pcard__price is a
   grid, so the flex-direction set on it earlier did nothing. */
.pcard__price{display:flex;align-items:baseline;gap:8px}
.pcard__price small{white-space:nowrap}

/* The badge now lives inside the footer, under the price - so it no longer
   needs the margin that pushed it away from the description above. */
.pcard__tag{margin-top:0;align-self:flex-start}

/* ── the two shelves ──────────────────────────────────────────────────────
   Each group is its own section with its own heading and its own scroll track,
   so the reader compares three levels of one course against each other and not
   against a course about opening a business. */
.shelf{margin-bottom:clamp(20px,4vh,40px)}
.shelf:last-child{margin-bottom:0}
.shelf__hd{display:flex;flex-direction:column;gap:3px;margin:0 0 14px}
.shelf__hd h3{margin:0;font-size:clamp(19px,2.2vw,25px);color:var(--navy-900)}
.shelf__hd p{margin:0;font-size:14px;color:var(--ink-soft);max-width:58ch}
/* The heading and its arrows share a row. */
.shelf > .shop__nav{float:none}
.shelf{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 14px}
.shelf__hd{grid-column:1;grid-row:1}
.shelf > .shop__nav{grid-column:2;grid-row:1;align-self:end;margin-bottom:14px}
.shelf > .shop__track{grid-column:1 / -1;grid-row:2}
@media(max-width:620px){
  .shelf{grid-template-columns:1fr}
  .shelf > .shop__nav{grid-column:1;grid-row:2;justify-self:start;margin-bottom:10px}
  .shelf > .shop__track{grid-row:3}
}

/* ── the membership card ─────────────────────────────────────────────────── */
.pcard--member{border-color:var(--blue-400);box-shadow:0 10px 30px rgba(38,112,238,.14)}
.pcard--member .pcard__art{background:linear-gradient(140deg,#1D45F5,#0B1B37);color:#fff}
.pcard--member .pcard__art svg{opacity:.5}
.pcard__perks{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}
.pcard__perks li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;
  color:var(--ink-soft)}
.pcard__perks svg{width:16px;height:16px;flex:0 0 auto;color:#2E9E6B;margin-top:2px}

/* The "not translated yet" notice. Deliberately plain - it is an admission,
   not a feature, and it should look like a note rather than a banner ad. */
.untranslated{margin:0 0 18px;padding:11px 14px;border-radius:12px;
  background:#FFF6E5;border:1px solid #F3DFB4;color:#7A5A16;
  font-size:13.5px;line-height:1.6}

/* ══ the courses page: ONE spacing scale ══════════════════════════════════
   Five separate patches had accumulated here, each written against whatever
   the previous one had already changed, and between them the page head, the
   verifier and the first shelf were spaced by three different rhythms. They are
   all gone; this block is the only place the page's vertical spacing is set.

   The scale is one step (--gap) and a half-step, so every gap on the page is a
   multiple of the same number rather than five hand-picked clamps. */
.page-guides{--gap:clamp(18px,3.2vh,34px)}

/* The head is a label on this page, not a stage: title, one line, done. */
.page-guides .phead{padding-block:clamp(20px,3vw,34px) var(--gap)}

/* The shop starts immediately - its own top padding would double the head's. */
.page-guides .shop{padding-block:0 var(--gap)}
.page-guides .shop__head{margin-bottom:0}

/* The verifier is a single row between the head and the catalogue, so it gets
   the half-step above and the full step below - closer to the thing it belongs
   to than to the thing it introduces. */
.page-guides .vfysec{margin:0 0 var(--gap)}
.page-guides .vfysec__in{padding:14px 18px}

/* Shelves are separated by the step; the last one does not push the footer. */
.page-guides .shelf{margin-bottom:var(--gap)}
.page-guides .shelf:last-child{margin-bottom:0}
.page-guides .shelf__hd{margin-bottom:calc(var(--gap) / 2)}

/* ── the membership line in the verifier ─────────────────────────────────── */
.vfy__mem{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:9px;padding:10px 13px;border-radius:11px;font-size:13.5px}
.vfy__mem b{font-weight:800}
.vfy__mem.is-on{background:rgba(46,158,107,.12);color:#1F6E4C}
/* Lapsed is amber, not red: the person is not a fraud, their membership simply
   ran out, and red would say something the data does not. */
.vfy__mem.is-off{background:#FFF6E5;color:#7A5A16}

/* The cart sits at the START of the shop header - the LEFT in this RTL page.
   It shared the row's end with the arrows, which put the one control a buyer
   is looking for in the corner furthest from where they read to. */
.shop__head{flex-direction:row-reverse;justify-content:flex-start}
.cartbar{order:0;margin-inline-end:0;margin-inline-start:auto}
.shop__nav{order:1}
@media(max-width:720px){
  .shop__head{flex-direction:column;align-items:stretch}
  .cartbar{margin-inline-start:0}
}

/* A real cover replaces the drawn placeholder. object-fit:cover so a wide
   marketing banner crops to the card's band instead of squashing the people
   in it, and the band is a fixed height so a shelf of covers stays a grid. */
.pcard__art.has-img{padding:0;background:var(--bg-sky)}
.pcard__art.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__art{height:150px}

/* ══ MOBILE ═══════════════════════════════════════════════════════════════
   The home page was built as a one-screen desktop composition, and several of
   its rules were written as if that were the only case. Below 1024px they are
   undone here rather than weakened everywhere - the desktop layout is correct
   and should not be diluted to accommodate a phone. */
@media (max-width:1023px){

  /* THE overflow bug. The headline is `white-space:nowrap` so it holds one
     line on a wide screen; on a 390px phone that one line is roughly twice the
     width of the window, and it pushed the whole hero off the right edge with
     the text cut. Hebrew wraps here like every other language. */
  .home .hero__head h1{
    white-space:normal;
    font-size:clamp(28px,7.4vw,44px);
    line-height:1.15;
    text-wrap:balance;
  }

  /* The hero is a normal, scrolling section on a phone: a fixed 100dvh with
     hidden overflow would simply clip whatever did not fit. */
  .home .hero{height:auto;min-height:0;overflow:visible;
    padding-block:clamp(20px,5vh,40px) clamp(150px,22vh,210px)}
  .home .hero .wrap{grid-template-columns:1fr;grid-template-areas:"head" "art" "copy";
    padding-block:0;row-gap:clamp(14px,3vh,24px)}
  .home .hero__head{text-align:start}
  .home .hero__art{max-width:100%;margin-inline:0}

  /* Two full-width buttons, stacked. Side by side they were each too narrow to
     hold their own label. */
  .home .hero__acts{flex-wrap:wrap;gap:10px}
  .home .hero__acts .btn--lg,.home .hero__acts .btn2{flex:1 1 100%;justify-content:center;
    white-space:normal;text-align:center}

  /* Nothing on a phone may create sideways scroll. This is the backstop, not
     the fix - each cause above is fixed on its own. */
  html,body{overflow-x:hidden;max-width:100%}
  img,svg,video,table{max-width:100%}
}

/* ── the shop on a phone ────────────────────────────────────────────────── */
@media (max-width:720px){
  /* One card at a time, snapping, with a peek of the next so the row reads as
     scrollable without needing arrows. */
  .shop__track{grid-auto-columns:minmax(0,86%);gap:12px}
  .shelf__hd h3{font-size:20px}
  .shelf__hd p{font-size:13.5px}

  /* The verifier and certificate rows stack instead of squeezing three things
     onto one line. */
  .vfysec__in{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}
  .vfysec .vfy__open{width:100%;justify-content:center}

  /* The cart takes the full width above the shelves. */
  .cartbar{width:100%;justify-content:space-between}
  .cartbar__go{flex:0 0 auto}
}

/* ── the checkout on a phone ───────────────────────────────────────────────
   The summary moves ABOVE the form: on a narrow screen a sticky sidebar
   becomes a block at the very bottom, which means the customer fills in six
   fields before seeing what they are paying for. */
@media (max-width:900px){
  .co__grid{display:flex;flex-direction:column}
  .co__aside{order:-1;position:static}
  .co__legal-grid{grid-template-columns:1fr}
  .co__fs{padding:16px}
}

/* ── dialogs on a phone ──────────────────────────────────────────────────── */
@media (max-width:620px){
  dialog.vfy,dialog.cert{width:calc(100vw - 24px);padding:18px;border-radius:18px}
  .vfy__form{flex-direction:column}
  .vfy__form input,.vfy__form .btn{width:100%}
  .cert__paper{padding:22px 16px}
  .cert__name{width:100%}
  .costeps li{flex:1 1 auto;justify-content:center}
}

/* ── below 400px ──────────────────────────────────────────────────────────
   Chrome cannot be driven narrower than 500px on a Mac, so this range was
   verified by reading the rules rather than by screenshot. Everything here is
   a fixed minimum that a 320-390px phone cannot honour: a minmax() floor wider
   than the screen does not shrink, it overflows.

   These are floors, not layouts - each one just stops being a floor. */
@media (max-width:400px){
  .shop__track{grid-auto-columns:minmax(0,88%)}
  .co__grid{grid-template-columns:1fr}
  .co__legal-grid{grid-template-columns:1fr}
  .vfy__form input{flex:1 1 100%}
  .hero__art{max-width:100%}
  .e404__search{max-width:100%}

  /* Type and padding come down one step so a line of Hebrew still fits a
     measure that can be read rather than one that can only be scanned. */
  .wrap{padding-inline:14px}
  .pcard__body{padding:14px 14px 16px}
  .pcard__n{font-size:16.5px}
  .co__fs{padding:14px}
  .costeps__n{width:18px;height:18px;font-size:10px}
}

/* Tap targets. WCAG 2.5.8 asks for 24px minimum and the practical floor on a
   phone is 44 - several controls here were sized for a mouse. */
@media (pointer:coarse){
  .btn,.btn2,.pcard__buy,.cartbar__go,.vfy__open,.shop__arrow,
  .langs__set a,.social a,.railsoc__b,.co__x{min-height:44px}
  .co__x{min-width:44px}
  .shop__arrow{width:44px;height:44px}
}

/* ── flex-basis is the MAIN axis ──────────────────────────────────────────
   `flex:1 1 260px` was written for a row, where 260px is a width. The mobile
   rules turn those containers into columns - and in a column the basis becomes
   a HEIGHT, so the text block claimed 260px of empty vertical space and left a
   crater between the copy and its button. Reset to auto wherever the direction
   flips. */
@media (max-width:720px){
  .vfysec__in{flex-direction:column;align-items:stretch}
  .vfysec__txt{flex:0 1 auto}
  .vfysec__in > *{flex:0 0 auto}
}
@media (max-width:620px){
  .vfy__form input{flex:0 0 auto}
  .cookiebar__t{flex:0 1 auto}
}

/* ── the cookie strip must not sit on the page's content ──────────────────
   It is fixed to the bottom, so on a phone it covered the hero's buttons and
   the first card of the shop - the two things the page is for. The body is
   padded by the strip's height while it is on screen, and the padding leaves
   with it. */
body:has(.cookiebar:not([hidden])){padding-bottom:var(--cookie-h,96px)}
@media (max-width:720px){
  body:has(.cookiebar:not([hidden])){--cookie-h:132px}
  /* The dock's floating buttons ride above it too. */
  body:has(.cookiebar:not([hidden])) .fabs{margin-bottom:var(--cookie-h,132px)}
}

/* Belt and braces for the drawer's containing block: `position:fixed` is
   relative to the viewport only while no ancestor is transformed, and the
   script reparents the panel to <body> for exactly that reason. These two make
   the intent explicit rather than implicit. */
.cartdr,.cartscrim{will-change:auto}
body > .cartdr{position:fixed}

/* ── the drawer on a phone ────────────────────────────────────────────────
   Three fixes to what a real device showed:

   1. It was 100% wide, which stops reading as a panel over the shop and starts
      reading as a page you navigated to - and then closing it feels like going
      back rather than dismissing. A sliver of the page stays visible.
   2. The header sat under the browser's own chrome. env(safe-area-inset-*)
      is what keeps it clear of the notch and the home indicator.
   3. The footer is pinned to the bottom, so with two items the middle was a
      large empty field. The list now sizes to its content and the footer
      follows it, with the empty space below both. */
@media (max-width:520px){
  .cartdr{width:min(360px,88vw)}
  .cartdr__hd{padding:14px 16px}
  .cartdr__hd h2{font-size:17px}
  .cartdr__list{flex:0 1 auto;padding:12px 16px}
  .cartdr__ft{margin-top:auto;padding:14px 16px}
  .cartdr__n{font-size:13.5px}
  .cartdr__sum b{font-size:21px}
}

/* The item row keeps the name on its own line when a long course title would
   otherwise squeeze the price into two digits per line. */
@media (max-width:400px){
  .cartdr__list li{grid-template-columns:1fr auto;row-gap:6px}
  .cartdr__n{grid-column:1 / -1}
}

/* The header and footer are fixed bands; only the list scrolls. Without the
   min-height:0 a flex child refuses to shrink below its content, so a long
   cart pushed the footer - and its checkout button - off the bottom. */
.cartdr__hd,.cartdr__ft{flex:0 0 auto}
.cartdr__list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* Older browsers with no dvh support fall back to vh, which is close enough
   and better than the layout viewport. */
@supports not (height: 100dvh){
  .cartdr{height:100vh;max-height:100vh}
}

/* ── the post-purchase FAQ ────────────────────────────────────────────────
   On the thank-you screen, so it answers the questions at the moment they are
   asked. Built on <details>, which opens with no script and is announced as a
   disclosure without any ARIA of its own. */
.ofaq{margin:0 0 22px;text-align:start}
.ofaq h2{margin:0 0 14px;font-size:19px;color:var(--navy-900);text-align:center}
.ofaq__i{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px;
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ofaq__i[open]{border-color:var(--blue-400);box-shadow:0 6px 18px rgba(19,36,65,.06)}
.ofaq__i summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;font-weight:700;color:var(--navy-900);line-height:1.5}
.ofaq__i summary::-webkit-details-marker{display:none}
/* A chevron drawn in CSS, rotated by the open state - no icon file and nothing
   to keep in sync with the element's real state. */
.ofaq__i summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-top:6px;
  border-inline-end:2px solid var(--blue-600);border-block-end:2px solid var(--blue-600);
  transform:rotate(-45deg);transition:transform .2s}
html[dir="ltr"] .ofaq__i summary::before{transform:rotate(135deg)}
.ofaq__i[open] summary::before{transform:rotate(45deg)}
.ofaq__i p{margin:0;padding:0 16px 15px 42px;font-size:13.5px;line-height:1.75;color:var(--ink-soft)}
html[dir="ltr"] .ofaq__i p{padding:0 42px 15px 16px}
@media(prefers-reduced-motion:reduce){.ofaq__i summary::before{transition:none}}

/* The "Powered by" line is the last thing on the page and belongs on its axis,
   not pushed against one edge where it reads as a stray link. */
.ftr__base{flex-wrap:wrap;justify-content:center;text-align:center;gap:10px 18px}
.powered{margin-inline:auto}
@media(min-width:900px){
  .ftr__base{justify-content:space-between;text-align:start}
  .powered{margin-inline:0}
}

/* ── the drawer, rounded like the rail ────────────────────────────────────
   The rail is an inset panel with rounded corners, not a bar welded to the
   window edge. The cart is the same kind of object and now reads that way -
   otherwise two panels on the same page follow two different rules. */
.cartdr{
  inset-block:14px auto;top:14px;
  height:calc(100dvh - 28px);max-height:calc(100dvh - 28px);
  inset-inline-end:14px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(11,27,55,.24);
}
@supports not (height: 100dvh){
  .cartdr{height:calc(100vh - 28px);max-height:calc(100vh - 28px)}
}
/* Sliding out has to clear the inset as well as the panel, or a rounded corner
   stays parked against the edge. */
.cartdr{transform:translateX(calc(var(--dr-out,-100%) - 14px))}
.cartdr.is-open{transform:none}

/* The item name holds ONE line. Wrapping made the two rows different heights
   and the list stopped reading as a list; the price and the remove button are
   fixed, so the name is the part that truncates. */
.cartdr__n{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cartdr__list li{grid-template-columns:minmax(0,1fr) auto auto}

@media(max-width:520px){
  .cartdr{
    inset-block:10px auto;top:10px;
    height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);
    inset-inline-end:10px;border-radius:20px;
    transform:translateX(calc(var(--dr-out,-100%) - 10px));
  }
  .cartdr.is-open{transform:none}
}
/* On a very narrow screen the name gets its own row rather than an ellipsis
   that eats most of the title. */
@media(max-width:400px){
  .cartdr__n{white-space:normal}
}

/* ── the cart tab, fixed to the edge ──────────────────────────────────────
   It rides down the page with the reader instead of scrolling away with the
   shop header, so a half-filled cart is never out of sight. Vertically
   centred, on the same side the drawer opens from. */
.cartpull{
  position:fixed;z-index:305;
  inset-inline-end:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;cursor:pointer;font:inherit;
  /* Square against the window edge, rounded on the side that faces the page -
     it reads as a tab attached to the frame rather than a floating pill. */
  border:1px solid var(--line);border-inline-end:0;
  border-start-end-radius:0;border-end-end-radius:0;
  border-start-start-radius:16px;border-end-start-radius:16px;
  background:#fff;color:var(--navy-900);font-size:14px;font-weight:800;
  box-shadow:0 12px 34px rgba(11,27,55,.18);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
}
.cartpull[hidden]{display:none!important}
.cartpull:hover{transform:translateY(-50%) translateX(0);box-shadow:0 16px 40px rgba(38,112,238,.26)}
.cartpull__n{
  min-width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;font-size:14px;font-weight:800;flex:0 0 auto}
.cartpull__t{white-space:nowrap}

/* The blink. Attention on the BADGE only - a whole pulsing panel at the edge of
   the screen is the kind of movement people close the tab over. */
@keyframes cartPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(38,112,238,.55)}
  60%    {box-shadow:0 0 0 10px rgba(38,112,238,0)}
}
.cartpull__n{animation:cartPulse 2s ease-out infinite}
/* Stops once the visitor is clearly aware of it. */
.cartpull:hover .cartpull__n,
.cartpull:focus-visible .cartpull__n{animation:none}
@media(prefers-reduced-motion:reduce){.cartpull__n{animation:none}}

/* On a phone the tab sits above the dock rather than in the middle of the
   thumb's reading path. */
@media(max-width:720px){
  .cartpull{top:auto;bottom:calc(var(--fab-b,86px) + 74px);transform:none;padding:12px 14px}
  .cartpull:hover{transform:none}
  .cartpull__t{font-size:13px}
}

/* The empty-cart button was rendering as a blank blue pill: `.co__empty` sets
   `justify-items:center` on a grid, and an inline-flex anchor with no width
   collapsed its own text away. Given a width it lays out normally. */
.co__empty .btn{width:auto;min-width:180px}

/* The page-head cluster is SCENERY and the base stylesheet already tunes it:
   faint on a desktop, fainter still under 900px where the text sits right on
   top of it. Two rules I added earlier forced opacity:.5 with no breakpoint,
   which overrode that and put solid dots across the title on a phone. Removed;
   the original values stand. */

/* ── the cart tab: left edge, horizontal, readable ───────────────────────
   The vertical version was a mistake. `writing-mode` plus a 180° rotation made
   Hebrew read bottom-to-top, which is not a direction Hebrew is ever set in -
   it was legible only by tilting your head.

   Text stays HORIZONTAL. The tab is pinned to the physical LEFT with `left`
   rather than a logical property, because it must sit opposite the rail in
   Hebrew and the rail itself is pinned logically - using logical properties on
   both would put the two on the same side.
   The LTR override below moves it when the page is read left-to-right. */
.cartpull{
  writing-mode:horizontal-tb;
  inset-inline-end:auto;inset-inline-start:auto;
  left:0;right:auto;
  top:50%;transform:translateY(-50%);
  padding:14px 16px;gap:11px;
  border:1px solid var(--line);border-left:0;
  border-radius:0 16px 16px 0;
}
.cartpull:hover{transform:translateY(-50%)}
.cartpull__n{writing-mode:horizontal-tb;transform:none}
.cartpull__t{white-space:nowrap;font-size:13.5px}

/* Read left-to-right, the rail moves to the left, so the cart moves right. */
html[dir="ltr"] .cartpull{left:auto;right:0;border:1px solid var(--line);border-right:0;
  border-radius:16px 0 0 16px}

@media(max-width:720px){
  .cartpull{
    top:auto;bottom:calc(var(--fab-b,86px) + 74px);transform:none;
    left:0;right:auto;padding:12px 15px;border-radius:0 16px 16px 0;
  }
  .cartpull:hover{transform:none}
}

/* The membership ticks were green - the colour this site uses for "verified"
   and "paid". On a benefits list they are just bullets, so they take the brand
   blue and green goes back to meaning a state. */
.pcard__perks svg{color:var(--blue-600)}

/* ── the verifier's answer, as a record ───────────────────────────────────
   Four labelled rows in a fixed order: name, eligibility date, membership,
   certificate status. A <dl> because that is what a list of term/value pairs
   is, and a screen reader reads the pairing without any ARIA. */
.vfy__rec{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;
  margin:10px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.72)}
.vfy__rec dt{font-size:12.5px;font-weight:700;opacity:.72;white-space:nowrap}
.vfy__rec dd{margin:0;font-size:13.5px;font-weight:800;min-width:0;overflow-wrap:anywhere}
.vfy__rec dd.is-on{color:#1F6E4C}
.vfy__rec dd.is-off{color:#8A6212}
@media(max-width:420px){
  .vfy__rec{grid-template-columns:1fr;gap:2px 0}
  .vfy__rec dt{margin-top:6px}
}

/* ── remove buttons read as remove ────────────────────────────────────────
   They were grey until hovered, which meant the only affordance saying "this
   deletes something" appeared after you had already found the button. Red at
   rest, stronger on hover - destructive controls should look destructive
   before they are touched, not after. */
.cartdr__rm,.co__x{
  color:#E5342A;border-color:#F3B7B2;background:#fff;
  font-weight:700;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.cartdr__rm:hover,.co__x:hover{
  background:#E5342A;border-color:#E5342A;color:#fff;transform:scale(1.06);
}
.cartdr__rm:focus-visible,.co__x:focus-visible{
  outline:2px solid #E5342A;outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .cartdr__rm,.co__x{transition:none}
  .cartdr__rm:hover,.co__x:hover{transform:none}
}

/* ── the coupon field ────────────────────────────────────────────────────── */
.cpn{margin:12px 0 10px}
.cpn__row{display:flex;gap:8px}
.cpn__row input{flex:1 1 auto;min-width:0;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-weight:600;background:#fff}
.cpn__row input:focus{outline:2px solid var(--blue-600);outline-offset:1px}
.cpn__apply{flex:0 0 auto;padding:11px 18px;font-size:13.5px}
.cpn__msg{margin:7px 0 0;font-size:12.5px;font-weight:700;min-height:1em}
.cpn__msg:empty{min-height:0}
.cpn__msg.is-ok{color:#1F6E4C}
.cpn__msg.is-bad{color:#8E2B22}

/* The discount sits between the cart and the total, where a reader looks for
   the arithmetic that explains the number below it. */
.co__line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0 0 6px;font-size:14px;font-weight:700;color:#1F6E4C}
.co__line[hidden]{display:none!important}

/* ── a course already in the cart ─────────────────────────────────────────
   The card dims and takes a diagonal ribbon, so the state is readable from
   across the shelf rather than only from the label on one button. */
.pcard{position:relative}
.pcard__inribbon{
  position:absolute;top:26px;inset-inline-start:-52px;z-index:3;
  width:210px;padding:8px 0;text-align:center;
  background:#1F6E4C;color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(31,110,76,.34);
  transform:rotate(-45deg);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
/* The corner it hangs from mirrors with the page, so the rotation mirrors too -
   otherwise the ribbon points away from its own corner. */
html[dir="ltr"] .pcard__inribbon{inset-inline-start:auto;inset-inline-end:-52px;transform:rotate(45deg)}
.pcard.is-chosen .pcard__inribbon{opacity:1}

/* Chosen = settled. The card recedes so the cards still to be decided on are
   the ones that carry weight. */
.pcard.is-chosen{border-color:#BFE6D4;background:#FAFDFB}
.pcard.is-chosen .pcard__art{filter:grayscale(.45) opacity(.55)}
.pcard.is-chosen .pcard__n,
.pcard.is-chosen .pcard__d,
.pcard.is-chosen .pcard__meta{opacity:.55}
.pcard.is-chosen .pcard__price{opacity:.6}

/* The button stays live - it is the way back out of the cart. */
.pcard__buy.is-in{
  background:#fff;color:#1F6E4C;border:1.5px solid #BFE6D4;box-shadow:none;font-weight:800}
.pcard__buy.is-in:hover{background:#E8F6EF;border-color:#8FD3B4}

@media(prefers-reduced-motion:reduce){.pcard__inribbon{transition:none}}

/* The WhatsApp button takes the brand blue like every other floating control.
   WhatsApp green was the platform's colour, not ours, and it was the only
   element on the page from a palette the site does not own. The icon still
   says which service it is. */
.fab--wa{background:linear-gradient(145deg,#2670EE,#1D5FD8)}
/* The "reachable" pip goes to a light blue so it stays visible on the new
   ground rather than reading as a leftover from the green. */
.fab__dot{background:#7BC0FF;border-color:#fff}

/* ── the compare-at price ─────────────────────────────────────────────────
   Smaller, lighter and struck through, sitting BEFORE the price it is being
   compared with - the eye lands on the number being charged, and the old one
   qualifies it rather than competing with it. */
.pcard__was{
  font-size:15px;font-weight:700;color:var(--ink-faint);
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:#E5342A;opacity:.9;
}
.pcard__price{flex-wrap:wrap;row-gap:2px}
@media(max-width:400px){.pcard__was{font-size:14px}}

/* ── the instalment line ──────────────────────────────────────────────────
   Quiet by design. It sits under the price as a note about it, not as a second
   price competing with the first. */
.pcard__pay{
  display:block;margin-top:-2px;
  font-size:12.5px;font-weight:700;line-height:1.5;
  color:#1F6E4C;
}
.pcard__pay::before{content:"✓";margin-inline-end:6px;font-weight:800}

/* ══ the price block ══════════════════════════════════════════════════════
   Read top to bottom: the saving, the price, the terms of payment, the terms
   of sale. Each line is a different size and weight, so the eye is given one
   obvious place to land instead of four numbers competing at the same volume -
   which is what the old row did with ₪5,500 and ₪8,900 side by side. */
.price{display:grid;gap:4px;justify-items:start;margin-bottom:2px}

/* The saving, in money and in percent. Money persuades people who are counting
   shekels, percent persuades people who are judging a deal - and they are not
   the same person. */
.price__save{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:99px;
  background:#E8F6EF;color:#1F6E4C;
  font-size:12px;font-weight:800;letter-spacing:.01em;
}
.price__save b{
  padding:1px 6px;border-radius:99px;
  background:#1F6E4C;color:#fff;font-size:11px;font-weight:800;
  direction:ltr;unicode-bidi:isolate;
}

.price__row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
/* The one number that matters, at a size nothing else on the card competes
   with. Tabular figures so a shelf of prices lines up digit under digit. */
.price__now{
  font-size:clamp(24px,2.4vw,29px);font-weight:800;line-height:1.05;
  color:var(--navy-900);font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
/* The anchor: present, legible, and clearly finished with. Struck in the ink
   colour rather than in red - red reads as an error, and this is a fact. */
.price__was{
  font-size:15px;font-weight:700;color:var(--ink-faint);
  text-decoration:line-through;text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
.price__vat{font-size:11.5px;color:var(--ink-faint);font-weight:600}

/* Secondary on purpose. See the note in the template. */
.price__pay{
  display:inline-flex;align-items:center;gap:6px;margin-top:3px;
  font-size:12.5px;font-weight:700;color:var(--blue-600);
}
.price__pay::before{
  content:"";width:14px;height:14px;flex:0 0 auto;border-radius:4px;
  background:var(--bg-sky);
  box-shadow:inset 0 0 0 1.5px var(--blue-400);
}

.price__terms{font-size:11px;line-height:1.5}
.price__terms a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.price__terms a:hover{color:var(--blue-600)}

/* The old single-line price rules are retired by this block. */
.pcard__price,.pcard__was,.pcard__pay{display:none}

@media(max-width:400px){
  .price__now{font-size:23px}
  .price__was{font-size:14px}
}

/* ── the cover band ───────────────────────────────────────────────────────
   A fixed 150px band assumed every cover was a wide banner. The later ones are
   SQUARE, and cropping a square down to a 1.8:1 slot throws away most of the
   picture - which is how the subjects ended up cut off at the edge.

   aspect-ratio instead of a height: the band keeps one shape across the shelf
   while being tall enough that a square loses a sensible amount rather than
   almost all of itself. */
.pcard__art{height:auto;aspect-ratio:16/11}
.pcard__art.has-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}

/* The drawn placeholder is not a photograph and should not be cropped like
   one - it is centred in whatever the band happens to be. */
.pcard__art:not(.has-img) svg{width:auto;height:78%}

/* ── the coming-soon panel ────────────────────────────────────────────────
   A holding page that collects rather than dismisses: the people who reach it
   were looking for a course, which makes them the warmest audience the site
   has. Sending them away with nothing costs both sides. */
.soon{padding-block:clamp(10px,2vh,22px) clamp(28px,6vh,60px)}
.soon__card{
  position:relative;overflow:hidden;
  max-width:820px;margin-inline:auto;
  padding:clamp(26px,5vw,48px);
  border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--bg-sky),#fff 62%);
  box-shadow:0 20px 60px rgba(19,36,65,.10);
  text-align:center;
}
.soon__badge{
  display:inline-block;padding:6px 15px;border-radius:99px;margin-bottom:16px;
  background:var(--navy-900);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.14em;
}
.soon__h{margin:0 0 12px;font-size:clamp(24px,3.4vw,38px);line-height:1.2;color:var(--navy-900)}
.soon__lede{margin:0 auto 22px;max-width:58ch;font-size:clamp(14.5px,1.4vw,16.5px);
  line-height:1.8;color:var(--ink-soft)}

.soon__list{
  list-style:none;margin:0 auto 26px;padding:0;
  display:grid;gap:10px;justify-items:start;max-width:52ch;text-align:start}
.soon__list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;
  line-height:1.6;color:var(--navy-900);font-weight:600}
.soon__list svg{width:18px;height:18px;flex:0 0 auto;color:var(--blue-600);margin-top:2px}

.soon__ask{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--navy-900)}
.soon__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:620px;margin-inline:auto}
.soon__form input{
  flex:1 1 190px;min-width:0;padding:13px 16px;border:1px solid var(--line);
  border-radius:99px;font:inherit;font-weight:600;background:#fff}
.soon__form input:focus{outline:2px solid var(--blue-600);outline-offset:1px}
.soon__form .btn{flex:0 0 auto}
.soon__legal{margin:14px 0 0;font-size:12px;color:var(--ink-faint)}

.soon__ok{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:14px 22px;border-radius:16px;
  background:#E8F6EF;border:1px solid #BFE6D4;color:#1F6E4C;
  font-size:15px;font-weight:700}
.soon__ok svg{width:20px;height:20px;flex:0 0 auto}

@media(max-width:620px){
  .soon__form{flex-direction:column}
  .soon__form input,.soon__form .btn{width:100%}
  .soon__list{max-width:none}
}

/* ── cards without a cover ────────────────────────────────────────────────
   The photograph is gone, so the card opens on its own words. The eyebrow gets
   a little more room at the top to replace the visual break the image used to
   provide. */
.pcard__art{display:none}
.pcard__body{padding-top:18px}
.pcard__meta{margin-bottom:2px}

/* The syllabus button. Same weight as the buy button's sibling row, with the
   icon carrying the "there is more to read" cue. */
.pcard__syl{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;font-size:13.5px;white-space:nowrap}
.pcard__syl svg{width:17px;height:17px;flex:0 0 auto;color:var(--blue-600)}

/* ── the syllabus dialog ─────────────────────────────────────────────────── */
dialog.syl{width:min(560px,calc(100vw - 32px));text-align:start;padding:26px}
.syl__kicker{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  color:var(--blue-600);margin-bottom:6px}
.syl__h{margin:0 0 4px;font-size:20px;line-height:1.3;color:var(--navy-900)}
.syl__meta{margin:0 0 16px;font-size:13px;color:var(--ink-faint);font-weight:700}
.syl__list{margin:0;padding:0;list-style:none;counter-reset:syl;display:grid;gap:8px;
  max-height:min(46dvh,420px);overflow-y:auto}
.syl__list li{
  counter-increment:syl;position:relative;
  padding:11px 14px;padding-inline-start:46px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-mist);
  font-size:14px;line-height:1.55;color:var(--navy-900);font-weight:600}
/* The number is generated, so inserting a lesson never means renumbering the
   ones below it by hand. */
.syl__list li::before{
  content:counter(syl,decimal-leading-zero);
  position:absolute;inset-inline-start:12px;top:11px;
  width:24px;text-align:center;
  color:var(--blue-600);font-size:12px;font-weight:800;
  direction:ltr;unicode-bidi:isolate}
.syl__note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

@media(max-width:520px){
  dialog.syl{padding:20px}
  .syl__list{max-height:52dvh}
}