/* Shared by index.html and insights.html.
   The two pages previously carried separate copies of this stylesheet and
   drifted: insights.html was missing the whole responsive block, the logo
   tagline rule, and the reduced-motion block, and the two disagreed on
   .ins-date direction. One file makes that class of bug impossible. */
@font-face{font-family:'Heebo';src:url('/fonts/heebo-var-hebrew.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+05BE,U+05D0-05EA,U+05F3-05F4,U+200C-200F,U+2013-2014;}
@font-face{font-family:'Heebo';src:url('/fonts/heebo-var-figures.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0020,U+0025,U+0028-0029,U+002B-002F,U+0030-0039,U+003A,U+00A0,U+00B7,U+2013-2014,U+20AA;}
@font-face{font-family:'Heebo';src:url('/fonts/heebo-var-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0021-0023,U+0026-0027,U+003B,U+003F-005A,U+005D,U+005F,U+0061-007A,U+007C,U+007E,U+2018-2019,U+201C-201D,U+2026;}
/* Assistant carries the headings. Sharon chose it after seeing the options
   rendered in her own headline; the serif she liked in her draft was the
   browser's fallback, because the font declared there has no Hebrew at all.
   Google's own subsets, self-hosted: hebrew, and latin for the figures and
   the odd Latin word. */
@font-face{font-family:'Assistant';src:url('/fonts/assistant-var-hebrew.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Assistant';src:url('/fonts/assistant-var-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#f5f2ec;
  --ink:#2a2520;
  --ink2:#3d3830;
  --muted:#5c5850;      /* 6.33:1 cream, 6.90:1 white */
  --muted2:#5c5752;     /* 6.39:1 cream, 6.97:1 white */
  --white:#fdfcfa;
  --line:#ddd8ce;
  --navy:#1a2744;
  --navy2:#243358;
  --gold:#b8860b;       /* DECORATION ONLY: 2.91:1 on cream */
  --gold-text:#8a6408;  /* 4.81:1 cream, 5.24:1 white, 4.73:1 gold-light */
  --line-ui:#8d8a84;    /* 3.36:1 white: borders of real controls */
  --gold2:#d4a017;
  --gold-light:#f9f0d8;
  --green:#5c9e6f;      /* client-chosen sage, decisions.json ctaColour */
  --green2:#4f8b60;
  --green-ink:#08170c;  /* 5.78:1 on sage, 4.56:1 on the darker hover */
  /* The page was pinned to 1200px, so a 1440 screen wasted 240px and an 1800
     screen wasted 600. This grows with the viewport and still caps for
     readability. --pad grows too, so wide screens get air, not just width. */
  --pad:clamp(1.25rem, 5vw, 5.5rem);
  --sect:clamp(4rem, 8vw, 8.5rem);
}
html{scroll-behavior:smooth;font-synthesis:none}
/* No faux italic, no faux bold. Hebrew carries emphasis with weight and colour. */
em,i,cite{font-style:normal}
body{font-family:'Heebo',sans-serif;background:var(--white);color:var(--ink2);direction:rtl;overflow-x:hidden;line-height:1.7}
a{text-decoration:none;color:inherit}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.js .reveal.visible{opacity:1;transform:translateY(0)}

/* NAV */
nav{
  /* 160 so the header still covers the edit badges (150) as they scroll
     under it, and stays below the skip link (200), which must win when it
     takes focus. */
  position:fixed;top:0;width:100%;z-index:160;
  padding:0 var(--pad);height:64px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(253,252,250,0.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background-color .3s, border-color .3s;
}
.nav-logo{display:flex;align-items:center;flex-wrap:nowrap;flex-shrink:0;white-space:nowrap}
.nav-logo a{display:flex;align-items:center;flex-wrap:nowrap;gap:.45rem;text-decoration:none;white-space:nowrap}
.nav-logo{gap:.5rem}
.logo-mark{inline-size:28px;block-size:28px;flex:0 0 auto;display:block}
.logo-txt{display:flex;flex-direction:column;line-height:1.06;min-inline-size:0}
.logo-name{font-family:'Heebo',sans-serif;font-weight:700;font-size:1.05rem;
  color:var(--navy);white-space:nowrap}
.logo-tag{font-size:.58rem;font-weight:400;color:var(--muted);
  white-space:nowrap;border-block-start:1px solid var(--gold);
  margin-block-start:3px;padding-block-start:3px}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-size:0.82rem;color:var(--muted);transition:color 0.2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--green-ink);
  border:none;padding:0.5rem 1.5rem;
  font-size:0.82rem;font-weight:500;
  font-family:'Heebo',sans-serif;
  cursor:pointer;transition:all 0.2s;
}
.nav-cta:hover{background:var(--green2)}

/* HERO */
.hero{
  padding:120px var(--pad) 5rem;
  display:grid;
  /* Tracks sized to CONTENT, not to a fraction of the rail. Across 12 measured
     sites content fills 82-99% of its track; an fr track left this one at 40%,
     and that gap was the void. 36rem holds the 519px sub at ~90%. The pair then
     centres and the rail's auto margins take the rest, what 10 of 12 ship. */
  grid-template-columns:minmax(0, 36rem) minmax(0, 21rem);
  justify-content:center;
  gap:3.5rem;align-items:center;   /* LOCKED: was clamp(...4vw...) */
  max-width:var(--maxw);margin:0 auto;
  position:relative;
}
.hero-bg-fix{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--cream);
  z-index:-2;
}

.hero-tag{
  /* was an inline style= on the element, which silently beat every mobile rule */
  font-size:0.95rem;
  text-transform:uppercase;color:var(--gold-text);
  font-weight:500;margin-bottom:0.85rem;display:block;
  animation:fadeIn 1s ease both;
}
.hero h1{
  font-family:'Assistant', sans-serif;
  font-size:clamp(2.8rem,5vw,4.2rem);
  font-weight:700;line-height:1.12;
  color:var(--ink);margin-bottom:1.5rem;
  animation:fadeUp 1s ease 0.1s both;
}.hero h1 em{
  /* SAME WEIGHT as the first line, colour is the only permitted difference. */
  font-style:normal;font-weight:inherit;
  color:var(--navy);
}
.hero h1 .line{display:block}
/* Second half of the same sentence, so it sits on the next line at the
   paragraph's own line-height. No extra margin: that read as a paragraph
   break rather than a wrapped line. */
.hero-sub-main{
  font-size:clamp(1.05rem,1.3vw,1.18rem);color:var(--ink2);
  font-weight:300;line-height:1.7;
  max-inline-size:60ch;margin-bottom:0.9rem;
}
.hero-sub-main span{display:block}
.hero-sub-main span+span{margin-top:0.25rem}
/* The promise line. Sharon set this one in bold ink, not the line above it. */
.hero-lead{
  font-size:clamp(1rem,1.2vw,1.08rem);color:var(--ink);
  font-weight:600;line-height:1.85;
  margin-bottom:0.9rem;max-inline-size:54ch;
  animation:fadeUp 1s ease 0.3s both;
}
.hero-sub-tight{margin-top:-0.3rem}
.hero-sub .lede-em{
  display:block; font-weight:600; color:var(--ink2);
}
.hero-sub{
  /* Sharon: too light to read. Weight first, colour second, which is the
     order she asked for: 300 was thin enough that darkening alone still read
     as grey. Heebo's variable range is 300 to 700, so 450 is real weight and
     not a synthetic bold. */
  font-size:clamp(1rem,1.15vw,1.12rem);color:var(--ink2);
  font-weight:450;line-height:1.9;
  margin-bottom:0.8rem;max-width:52ch;
  animation:fadeUp 1s ease 0.2s both;
}
/* One measure for the whole hero column.

   The paragraphs capped themselves at 52 to 60ch while the dark card filled
   the column, so a sentence broke early and left a single word stranded
   beside 150px of empty cream. The column is the measure now, the same edge
   the card wraps at: 36rem at ~16.5px is about 69 characters, inside the 50
   to 75 the RTL guidance asks for. */
.hero-sub, .hero-lead, .hero-sub-main{ max-inline-size:none; }

.hero-proof{
  /* under the photo now, so it takes the photo's width rather than its own */
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(0.9rem,1vw,1rem);color:var(--gold-text);font-weight:500;
  background:var(--gold-light);
  padding:0.55rem 1rem;
  border:1px solid #e8d5a0;
  margin:1rem 0 0;
  animation:fadeUp 1s ease 0.3s both;
}
.hero-proof::before{content:'✦';font-size:0.6rem}

.hero-actions{
  /* Centred on the card above it, not on the column's start edge. The card
     is full width with centred text, so the button sits on the same axis and
     the two read as one block. It is the only centred thing in a start
     aligned column, but the card already was, so this joins it rather than
     opening a second exception. */
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  margin-bottom:2.2rem;
  animation:fadeUp 1s ease 0.4s both;
}
/* The WhatsApp button left the hero: the floating bubble covers that job on
   every screen now. With the calculator link standing alone it can be
   slimmer, which gives the dark card above it room to breathe. */
.hero-actions .btn-outline{ padding-block:0.55rem; }
.btn-primary{
  background:var(--green);color:var(--green-ink);
  border:none;padding:0.8rem 2rem;
  font-size:0.9rem;font-weight:500;cursor:pointer;
  font-family:'Heebo',sans-serif;transition:all 0.25s;
  display:inline-flex;align-items:center;gap:0.5rem;
  text-decoration:none;
}
.btn-primary:hover{background:var(--green2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,39,68,0.2)}
.btn-outline{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-ui);
  padding:0.8rem 1.8rem;font-size:0.88rem;
  cursor:pointer;font-family:'Heebo',sans-serif;
  transition:all 0.2s;
}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}

.hero-stats{
  /* was flex: a 337px group under a 1038px rule, so the three stats read as
     three unrelated things. Three equal cells inside the capped column make
     them one row, and the rule stops with the column. */
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 2.5rem);
  max-inline-size:36rem;
  padding-top:2rem;border-top:1px solid var(--line);
  animation:fadeUp 1s ease 0.5s both;
}
.hstat-num{
  direction:rtl;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  font-family:'Assistant', sans-serif;
  font-size:2rem;font-weight:600;
  color:var(--ink);line-height:1;
  letter-spacing:-1px;
}
.hstat-lbl{font-size:0.72rem;color:var(--muted);margin-top:0.3rem}

/* HERO VISUAL */
.hero-visual{animation:fadeIn 1.2s ease 0.4s both}
.hero-photo{
  width:100%;aspect-ratio:3/4;
  overflow:hidden;
  position:relative;
}
.hero-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:top;
}
/* The dark card and the gold badge changed places: the card moved into the
   text column where the badge used to sit, and the badge went under the
   photo. Barely any side padding on the card, because the point of moving it
   was to let the sentence use the width instead of the box using it. */
.hero-card{
  background:var(--navy);color:var(--cream);
  padding:1.15rem 0.65rem;margin:0 0 1.5rem;
}
.hc-quote{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.02rem,1.45vw,1.28rem);
  line-height:1.5;font-weight:500;color:var(--cream);
  text-align:center;
}
/* gold2 on navy measures 6.2:1, so the emphasis is readable, not decorative */
.hc-quote strong{
  display:block;margin-top:0.2rem;
  font-size:1.03em;font-weight:700;color:var(--gold2);
}
.hc-label{font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:rgba(245,242,236,0.55);margin-bottom:0.4rem}
.hc-val{
  direction:rtl;
  font-family:'Assistant', sans-serif;
  font-size:2rem;font-weight:600;
  color:var(--gold2);letter-spacing:-0.5px;
}
.hc-desc{font-size:0.78rem;color:rgba(245,242,236,0.65);margin-top:0.3rem;line-height:1.5}

/* DIFF STRIP */
.diff-strip{background:var(--navy);padding:clamp(2.2rem,4vw,3.4rem) var(--pad)}
/* This computed to THREE tracks for FOUR items at every width, so the strip
   wrapped 3+1. The auto-fit minimum divided by 4 but ignored the gap. Explicit
   tracks, and a narrower rail so each cell is ~304px against 291-380px of ink. */
.diff-inner{max-width:min(100%, 1360px);margin:0 auto;display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(1.25rem,2.5vw,3rem)}
@media (max-width:900px){ .diff-inner{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .diff-inner{ grid-template-columns:1fr; } }
.diff-item{border-right:1px solid rgba(255,255,255,0.08);padding-right:clamp(1.5rem,3.5vw,4.5rem)}
.diff-item:first-child{border-right:none;padding-right:0}
.diff-title{
  font-family:'Assistant', sans-serif;
  font-size:1rem;font-weight:600;color:var(--cream);
  margin-bottom:0.5rem;
}
.diff-desc{font-size:0.85rem;color:rgba(245,242,236,0.72);line-height:1.7}

/* PAIN SECTION */
.calc-section{
  padding:var(--sect) var(--pad);
  background:var(--cream);
  border-top:1px solid var(--line);
}
.calc-inner{max-width:var(--maxw);margin:0 auto}
.calc-box{
  display:grid;grid-template-columns:1.15fr 1fr;
  border:1px solid var(--line);background:var(--white);
  margin-top:1rem;
}
.calc-controls{padding:3rem 3rem 2.5rem}
.calc-row{margin-bottom:2.2rem}
.calc-row:last-child{margin-bottom:0}
.calc-row label{
  display:block;font-size:0.85rem;color:var(--ink2);
  font-weight:500;margin-bottom:0.9rem;line-height:1.5;
}
.calc-row label small{
  display:block;font-size:0.72rem;color:var(--muted2);
  font-weight:300;margin-top:0.2rem;
}
.calc-input{display:flex;align-items:center;gap:1.2rem}
.calc-input input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;
  height:3px;background:var(--line-ui);border-radius:2px;
}
.calc-input input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--navy);cursor:pointer;border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--navy);
}
.calc-input input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--navy);cursor:pointer;border:3px solid var(--white);
}
.calc-out{
  direction:rtl;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  font-family:'Assistant', sans-serif;font-size:1.35rem;font-weight:600;
  color:var(--navy);min-width:72px;text-align:end;
}
.calc-row select{max-inline-size:100%;
  width:100%;padding:0.9rem 1rem;border:1px solid var(--line);
  background:var(--white);color:var(--ink2);font-family:'Heebo',sans-serif;
  font-size:0.88rem;direction:rtl;cursor:pointer;
}
.calc-row select:focus{border-color:var(--gold)}
.calc-results{
  background:var(--navy);color:var(--cream);
  padding:3rem 2.5rem;display:flex;flex-direction:column;
  container-type:inline-size;
}
.calc-label{
  text-align:right;
  font-size:0.7rem;text-transform:uppercase;
  color:rgba(245,242,236,0.55);font-weight:500;
}
.calc-big{
  text-align:start;
  direction:rtl;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  font-family:'Assistant', sans-serif;font-size:clamp(2.4rem,4.5vw,3.4rem);
  font-weight:600;color:var(--gold2);line-height:1.1;margin-top:0.4rem;
}
.calc-minis{
  display:grid;gap:1.5rem;
  margin-top:2rem;padding-top:2rem;
  border-top:1px solid rgba(245,242,236,0.15);
}
.calc-year2{
  font-size:0.74rem;line-height:1.7;font-weight:300;
  color:rgba(245,242,236,0.6);margin-top:0.7rem;max-inline-size:44ch;
}
.calc-mini-hint{
  font-size:0.68rem;line-height:1.6;font-weight:300;
  color:rgba(245,242,236,0.6);margin-top:0.25rem;
}
.calc-mini-num{
  text-align:start;
  direction:rtl;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  font-family:'Assistant', sans-serif;font-size:1.6rem;font-weight:600;
  color:var(--cream);line-height:1.1;margin-bottom:0.3rem;
}
.calc-diag{
  margin-top:2rem;padding:1.2rem 1.3rem;
  background:rgba(245,242,236,0.07);
  border-inline-start:2px solid var(--gold);
}
.calc-diag-title{
  font-size:0.9rem;font-weight:500;color:var(--gold2);margin-bottom:0.35rem;
}
.calc-diag-body{
  font-size:0.8rem;color:rgba(245,242,236,0.7);
  line-height:1.7;font-weight:300;
}
/* padding-top:0 fought .btn-primary padding:0.8rem 2rem, leaving 0 above the
   text and 0.8rem below it, so the label sat high in the button. */
.calc-cta{margin-top:auto;align-self:flex-start}
.calc-sources{
  margin-top:2rem;padding:1.3rem 1.5rem;
  background:var(--white);
  border:1px solid var(--line);
  border-inline-start:2px solid var(--gold);
}
.calc-sources h3{
  font-size:0.7rem;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:0.6rem;
}
.calc-sources-list{
  font-size:0.85rem;color:var(--ink);line-height:1.9;font-weight:400;
}
.calc-sources-note{
  font-size:0.8rem;color:var(--muted);line-height:1.75;
  font-weight:300;margin-top:0.7rem;max-inline-size:70ch;
}
.calc-note{
  font-size:0.75rem;color:var(--muted2);font-weight:300;
  margin-top:1.5rem;line-height:1.7;
}
@media(max-width:900px){
  .calc-section{padding:4rem 1.5rem}
  .calc-box{grid-template-columns:1fr}
  .calc-controls{padding:2rem 1.5rem}
  .calc-results{padding:2rem 1.5rem}
}

.pain-section{
  padding:var(--sect) var(--pad);
  background:var(--white);
}
.pain-inner{max-width:var(--maxw);margin:0 auto}
.section-eyebrow{
  font-size:0.72rem;text-transform:uppercase;
  color:var(--gold-text);font-weight:500;display:block;margin-bottom:1rem;
}
.section-title{
  font-family:'Assistant', sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;color:var(--ink);
  line-height:1.15;margin-bottom:0.8rem;
}
.section-title em{font-style:normal;font-weight:inherit;color:var(--navy)}
.section-sub{
  font-size:clamp(0.9rem,1vw,1rem);color:var(--muted);
  max-width:62ch;margin-bottom:2.2rem;
  font-weight:300;line-height:1.8;
}

.pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  overflow:hidden;
}
.pain-item{
  background:var(--white);
  padding:clamp(1.6rem,2.2vw,2.6rem);
  display:flex;flex-direction:column;gap:0.8rem;
  transition:background 0.25s;
  position:relative;
}
.pain-item:hover{background:var(--cream)}
.pain-item::after{
  content:'';position:absolute;
  inset-block-start:0;inset-inline:0;
  block-size:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform 0.3s ease;
}
.pain-item:hover::after{transform:scaleX(1)}
.pain-num{
  font-family:'Assistant', sans-serif;
  font-size:0.78rem;color:var(--muted2);
  font-weight:400;
}
.pain-item h3{
  font-size:0.95rem;font-weight:600;
  color:var(--ink);line-height:1.4;
}
.pain-item p{font-size:0.82rem;color:var(--muted);line-height:1.8;font-weight:300;flex:1}
.pain-blue{font-size:0.82rem;font-weight:500;color:var(--navy)}
.pain-impact{
  font-size:0.72rem;color:var(--gold-text);
  font-weight:500;letter-spacing:0.3px;
  padding-top:0.5rem;border-top:1px solid var(--line);
}

/* RESULTS */
.results-section{
  background:var(--navy);padding:var(--sect) var(--pad);
  position:relative;overflow:hidden;
}
.results-section::before{
  content:'';position:absolute;
  inset-block-start:-200px;inset-inline-start:-200px;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(184,134,11,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.results-inner{max-width:var(--maxw);margin:0 auto}
.results-inner .section-eyebrow{color:rgba(245,242,236,0.55)}
.results-inner .section-title{color:var(--cream)}
.results-inner .section-title em{color:var(--gold2)}
.results-inner .section-sub{color:rgba(245,242,236,0.55)}

.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.16);margin-bottom:0}
.result-card{
  background:var(--navy);
  padding:clamp(1.8rem,2.6vw,3.2rem);
  position:relative;overflow:hidden;
  transition:background 0.25s;
}
.result-card:hover{background:var(--navy2)}
.rc-tag{
  font-size:0.65rem;text-transform:uppercase;
  color:rgba(245,242,236,0.55);margin-bottom:1.2rem;display:block;
}
.rc-num{
  direction:rtl;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  font-family:'Assistant', sans-serif;
  font-size:3.5rem;font-weight:600;
  color:var(--gold2);line-height:1;
  letter-spacing:-2px;margin-bottom:0.5rem;
}
.rc-nis{font-size:0.62em;margin-inline-start:0.12em}
.rc-pct{margin-inline-start:0}
.rc-title{font-size:0.92rem;font-weight:500;color:var(--cream);margin-bottom:0.5rem}
.rc-desc{font-size:0.8rem;color:rgba(245,242,236,0.55);line-height:1.7}

.results-banner{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
  padding:2.5rem 3rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:2rem;flex-wrap:wrap;
}
.rb-text h3{font-size:1rem;font-weight:500;color:var(--ink);margin-bottom:0.2rem}
.rb-text p{font-size:0.82rem;color:rgba(20,18,16,0.85)}
.rb-num{
  direction:rtl;
  font-family:'Assistant', sans-serif;
  font-size:3rem;font-weight:600;
  color:var(--ink);letter-spacing:-1px;white-space:nowrap;
}
.rb-num small{font-size:1rem;font-weight:400;opacity:0.6;margin-inline-end:2px}

/* SERVICES */
.services-section{padding:var(--sect) var(--pad);background:var(--cream)}
.services-inner{max-width:var(--maxw);margin:0 auto}
.services-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:2.5rem;
}
.svc{
  background:var(--cream);box-shadow:0 0 0 1px var(--line);
  padding:clamp(1.6rem,2.2vw,2.6rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:background 0.2s;
}
.svc:hover{background:var(--white)}
.svc-num{
  font-family:'Assistant', sans-serif;
  font-size:0.78rem;
  color:var(--muted2);font-weight:400;
}
.svc h3{font-size:0.92rem;font-weight:600;color:var(--ink);line-height:1.4}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:0.4rem}
.svc-list li{
  font-size:0.8rem;color:var(--muted);
  display:flex;align-items:flex-start;gap:0.5rem;line-height:1.6;
}
.svc-list li::before{content:'–';color:var(--muted2);flex-shrink:0;font-size:0.75rem;margin-top:2px}
/* No measure cap: it is two sentences closing the section, and a 66ch limit
   broke it over three lines with one word alone on the last. The container
   already caps at --maxw. */
.services-closing{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:0.88rem;color:var(--muted);line-height:1.85;font-weight:300;
}

/* PROCESS */
.process-section{padding:var(--sect) var(--pad);background:var(--white)}
.process-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:3.25rem;align-items:start   /* LOCKED */}
.process-lead{position:sticky;top:80px}
.process-lead h2{
  font-family:'Assistant', sans-serif;
  font-size:2.2rem;font-weight:600;
  line-height:1.2;
  margin-bottom:1rem;
}
.process-lead h2 em{font-style:normal;font-weight:inherit;color:var(--navy)}
.process-lead p{font-size:0.88rem;color:var(--muted);line-height:1.85;font-weight:300}
.process-link{
  display:inline-block;margin-top:1.1rem;
  font-size:0.82rem;font-weight:500;color:var(--navy);
  border-bottom:1px solid var(--gold);padding-bottom:2px;
}
.process-link:hover{color:var(--gold-text)}
.steps{display:flex;flex-direction:column}
.step{
  display:flex;gap:2rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:none}
.step-n{
  font-family:'Assistant', sans-serif;
  font-size:1.3rem;
  font-weight:400;color:var(--muted2);
  min-width:28px;flex-shrink:0;line-height:1.4;
}
.step h3{font-size:0.92rem;font-weight:600;color:var(--ink);margin-bottom:0.4rem}
.step p{font-size:0.82rem;color:var(--muted);line-height:1.75;font-weight:300}

/* ABOUT */
.about-section{padding:var(--sect) var(--pad);background:var(--cream)}
.about-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(240px,0.6fr) minmax(0,1.4fr);gap:3.5rem;align-items:start   /* LOCKED */}
.about-photo{position:sticky;top:80px}
.about-photo-wrap{aspect-ratio:3/4;overflow:hidden;background:var(--line)}
.about-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:top}
.about-photo-name{
  font-family:'Assistant', sans-serif;
  font-size:1rem;font-weight:600;
  margin-top:1rem;color:var(--ink);
}
.about-photo-role{font-size:0.78rem;color:var(--muted);margin-top:0.2rem}
.about-content{display:flex;flex-direction:column;gap:1.5rem}
.about-content h2{
  font-family:'Assistant', sans-serif;
  font-size:2.2rem;font-weight:600;
  line-height:1.2;
}
.about-content h2 em{font-style:normal;font-weight:inherit;color:var(--navy)}
.about-content p{font-size:0.88rem;color:var(--muted);line-height:1.9;font-weight:300}
.about-content p strong{color:var(--ink);font-weight:500}
.about-creds{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
.cred{background:var(--white);padding:1rem 1.2rem;border:1px solid var(--line)}
.cred-lbl{font-size:0.65rem;text-transform:uppercase;color:var(--muted2);margin-bottom:0.3rem}
.cred-val{font-size:0.85rem;font-weight:500;color:var(--ink)}
.about-tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.atag{
  font-size:0.75rem;border:1px solid var(--line);
  padding:0.25rem 0.8rem;color:var(--muted);
  background:var(--white);
}

/* FIT */
.fit-section{padding:var(--sect) var(--pad);background:var(--white)}
.fit-inner{max-width:var(--maxw);margin:0 auto}
.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem}
.fit-card{
  border:1px solid var(--line);padding:clamp(1.8rem,2.6vw,3.2rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color 0.2s,background 0.2s;
  position:relative;overflow:hidden;
}
.fit-card:hover{border-color:var(--navy);background:var(--cream)}
.fit-n{
  font-family:'Assistant', sans-serif;
  font-size:3rem;font-weight:600;
  color:var(--line-ui);line-height:1;letter-spacing:-2px;
}
.fit-card h3{font-size:0.95rem;font-weight:600;color:var(--ink)}
.fit-card p{font-size:0.82rem;color:var(--muted);line-height:1.8;font-weight:300}

/* CTA */
.cta-section{
  background:var(--navy);
  padding:var(--sect) var(--pad);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  inset-block-end:-200px;inset-inline-end:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(184,134,11,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.cta-inner{max-width:64ch;margin:0 auto;text-align:center;position:relative}
.cta-inner .section-eyebrow{color:rgba(245,242,236,0.55)}
.cta-inner h2{
  font-family:'Assistant', sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600;color:var(--cream);
  line-height:1.15;margin-bottom:0.8rem;
}
.cta-inner h2 em{font-style:normal;font-weight:inherit;color:var(--gold2)}
.cta-inner p{font-size:0.92rem;color:rgba(245,242,236,0.55);margin-bottom:2.5rem;font-weight:300;line-height:1.8}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.btn-wa{
  background:#25D366;color:#08170c;border:none;
  padding:0.8rem 2rem;font-size:0.9rem;font-weight:500;
  cursor:pointer;font-family:'Heebo',sans-serif;
  transition:all 0.2s;display:inline-flex;align-items:center;
  gap:0.5rem;text-decoration:none;
}
.btn-wa:hover{opacity:0.88;transform:translateY(-1px)}
.btn-tel{
  background:transparent;color:var(--cream);
  border:1px solid rgba(245,242,236,0.4);
  padding:0.8rem 2rem;font-size:0.9rem;
  font-family:'Heebo',sans-serif;transition:all 0.2s;
  display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;
}
.btn-tel:hover{border-color:rgba(245,242,236,0.5)}
.btn-li{
  background:transparent;color:rgba(245,242,236,0.6);
  border:1px solid rgba(245,242,236,0.4);
  padding:0.8rem 1.5rem;font-size:0.85rem;
  font-family:'Heebo',sans-serif;transition:all 0.2s;
  display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none;
}
.btn-li:hover{color:var(--cream);border-color:rgba(245,242,236,0.3)}
.cta-note{font-size:0.75rem;color:rgba(245,242,236,0.55)}
.cta-note span{margin:0 0.5rem}

/* FOOTER */
.site-footer{
  background:var(--ink);padding:1.8rem var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.footer-logo{
  font-family:'Assistant', sans-serif;
  font-size:0.95rem;font-weight:600;
  color:rgba(245,242,236,0.8);
}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-size:0.75rem;color:rgba(245,242,236,0.6);transition:color 0.2s}
.footer-links a:hover{color:rgba(245,242,236,0.8)}
.footer-copy{font-size:0.7rem;color:rgba(245,242,236,0.6)}


/* INSIGHTS, תובנות. Named by the client; she rejected "blog" as too casual.
   Homepage shows the latest three; a pinned post holds its slot. */
.ins-section{padding:var(--sect) var(--pad);background:var(--white);border-top:1px solid var(--line)}
.ins-inner{max-width:var(--maxw);margin:0 auto}
.ins-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.ins-all{font-size:0.82rem;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap;transition:opacity .2s}
.ins-all:hover{opacity:.65}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ins-card{background:var(--white);padding:clamp(1.6rem,2.2vw,2.4rem);display:flex;flex-direction:column;gap:0.9rem;transition:background .25s;position:relative}
.ins-card:hover{background:var(--cream)}
/* [hidden] sets display:none from the UA stylesheet, and ANY author display
   declaration beats it. .ins-card is display:flex, so the filter was hiding
   nothing while the count said otherwise. Class plus attribute outranks the
   class alone, so this needs no !important. */
.ins-card[hidden]{display:none}
.ins-meta{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap}
.ins-tag{font-size:0.68rem;padding:0.2rem 0.6rem;border:1px solid var(--line);color:var(--muted)}
.ins-tag.is-case{border-color:#e8d5a0;background:var(--gold-light);color:var(--gold-text)}
.ins-date{font-size:0.7rem;color:var(--muted2);direction:rtl;unicode-bidi:isolate}
.ins-pin{font-size:0.66rem;color:var(--gold-text);letter-spacing:1px}
.ins-card h3{font-family:'Assistant', sans-serif;font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.45}
.ins-card p{font-size:0.82rem;color:var(--muted);line-height:1.8;font-weight:300;flex:1}
.ins-more{font-size:0.78rem;color:var(--navy);font-weight:500}
.ins-empty{border:1px dashed var(--line);padding:2.5rem;text-align:center;color:var(--muted2);font-size:0.85rem;grid-column:1/-1;background:var(--white)}


/* ============================================================================
   RESPONSIVE, fluid and intrinsic, not one breakpoint.

   What was wrong, measured at 15 widths before this was written:
     · horizontal scroll at 320/360/390/414, the phone sizes that matter most
     · .hero h1 stuck at 45px from 320px to 1024px, because clamp()'s floor was
       2.8rem. A 45px headline in a 320px viewport is the whole mobile problem.
     · ONE breakpoint at 900px, so 768 and 834 (iPad) got the phone layout and
       the page height fell off a cliff from 12,262px to 7,572px across it.
     · mobile ran 12,700–13,500px against 8,200px on desktop.

   The approach: type and space are FLUID (clamp with a real slope, so every
   width gets its own size), and grids are INTRINSIC (auto-fit + minmax, so
   columns are decided by available space, not by a media query). Breakpoints
   are now only for things that genuinely cannot flow.
   ========================================================================== */

:root{
  /* min | fluid | max. The middle term has a real slope so 320px and 1920px
     are different, instead of both being clamped to an end stop. */
  --pad:  clamp(1.05rem, 0.55rem + 2.6vw, 5.5rem);
  --sect: clamp(2.25rem, 1rem + 2.8vw, 5.5rem);
  --maxw: min(100%, 1560px);   /* the sections already apply --pad */
}

/* ---- scale ---------------------------------------------------------------
   Measured on a real 1900px display: the hero was 998px tall against roughly
   840px of usable viewport, so the results card and the stat row fell below the
   fold. The photograph rendered at 450x600 from a 500x500 source, which is both
   too large and upscaled. Everything below is pulled down a step so the whole
   proof block lands above the fold on a 1080p laptop. */
/* 64px of that top padding sits behind the fixed nav; the remainder is the
   visible gap. 84px total leaves ~20px, not 56. */
.hero{ min-height:auto; padding-block:clamp(72px,4.5vw,84px) clamp(2rem,4vw,3.5rem); align-items:start; }
.hero-photo{ aspect-ratio:4/5; max-inline-size:min(100%, 320px); margin-inline-start:auto; }
.hero-proof{ max-inline-size:min(100%, 320px); margin-inline-start:auto; }
.hero-actions{ margin-bottom:2rem; }
.hero-stats{ padding-top:1.5rem; }
.hero-sub{ margin-bottom:.6rem; }
.hero-card{ margin-bottom:1.6rem; }
/* An ornamental sparkle in front of a pill-shaped badge is one of the most
   generated components on the web. The sector list can stand on its own. */
.hero-proof::before{ content:none; }

/* ---- fluid type. Every size scales continuously between 320 and 1920. ---- */
.hero h1        {font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.25rem); line-height:1.16;}
.section-title  { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.4rem); }
.process-lead h2,
.about-content h2{ font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); }
.cta-inner h2   { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.4rem); }
.ins-hero h1    { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); }
.hero-sub       { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.12rem); }
@media (max-width:1023px){ .hero-sub, .hero-lead{ line-height:1.75; } }
.section-sub    { font-size: clamp(0.88rem, 0.85rem + 0.2vw, 1rem); }
.hstat-num      { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); }
.hc-val         { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem); }
.rc-num         { font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.8rem); }
.rb-num         { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.4rem); }
/* the שעות word-figure: scaled with its siblings, no longer a fixed inline 2.5rem */
.rc-num-word    { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.calc-big       { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); }
.fit-n          { font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem); }

/* The pain grid drew its rules with per-item borders and nth-child(3n+1),
   which assumed exactly three columns. With auto-fit the column count varies,
   so the rules are drawn by the 1px gap instead and work at any count. */
.pain-grid { gap:1px; background:var(--line); border:1px solid var(--line); }


/* ---- the two-pane blocks collapse on available width, not a device size --- */

.calc-box    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.process-inner,
.about-inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* ---- column caps ---------------------------------------------------------
   auto-fit alone kept adding columns, so at 1600 the six pain cards became a
   row of five plus an orphan. Flooring the track at a third of the container
   makes three the hard maximum while still collapsing to 2 and 1 below it. */
.pain-grid, .ins-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, (100% - 2px)/3)), 1fr));
}
/* Eight cards, so four tracks divide evenly and nothing is orphaned. The floor
   drops it to three, two and one as the container narrows. */
.services-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, (100% - 3px)/4)), 1fr));
}
.results-grid{ grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - 2px)/3)), 1fr)); }
.fit-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, (100% - 4rem)/3)), 1fr)); }
.about-creds { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(11rem, (100% - 1rem)/2)), 1fr)); }
/* Three figures, so auto-fit is wrong here: every width where only two tracks
   fit strands the third on its own row. One column or three, never two.
   Measured against the PANEL, not the window: the longest figure is 97px, and
   three of those plus two 1.5rem gaps need 27rem of content box. */
.calc-minis  { grid-template-columns: 1fr; }
@container (min-width:22rem){
  .calc-minis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .calc-minis .calc-mini:last-child{ grid-column:1 / -1; }
}
/* placed AFTER the cap above so it can actually win inside its range */
@media (max-width:900px){ .ins-grid{ grid-template-columns:1fr; } }

/* ---- overflow sources found by measurement --------------------------------- */
/* nav: logo + CTA exceeded 320px of content box. Let it wrap and shrink. */
nav{ gap:.75rem; flex-wrap:wrap; height:auto; min-height:64px; padding-block:.5rem; }
/* The logo is a 280x60 SVG whose tagline text was rendering past the viewBox ,
   measured running to x=362 in a 320px viewport, the only genuine overflow on
   the page. Clip it, and below 600px drop the tagline and its rule so the mark
   plus the name carry the logo on a phone. */
/* The logo's coordinates were authored for LTR: <text x="210" text-anchor="start">
   means 'end at x=210'. In an RTL document 'end' resolves to the LEFT, so the
   name rendered rightwards from 210 and landed on top of the mark. Measured:
   name 336-372, mark 344-365. The SVG is a fixed-coordinate artwork, so it gets
   its own direction; the Hebrew inside still shapes RTL via bidi. */

@media (max-width:600px){
  /* height lives in the max-width:1023px block below, which would beat it here */
  .logo-tag{ display:none; }
}
.nav-cta{ white-space:nowrap; }
/* the fixed background layer used left/right, which are physical and leaked */
/* A position:fixed element sized with width:100% resolves against the viewport
   (320) while the client area after the RTL scrollbar is 305, a guaranteed
   15px of horizontal scroll. Let inset do the sizing instead. */
.hero-bg-fix{ position:fixed; inset:0; inline-size:auto; block-size:auto; }
nav{ inset-inline:0; width:auto; }
/* nothing may establish a wider scroll box than the viewport */
html,body{ max-inline-size:100%; }
img,svg,video,table{ max-inline-size:100%; }

/* ---- flex children must be allowed to shrink -----------------------------
   A flex item's default min-width is auto, i.e. its content size, so a slider
   row, a stat strip and a banner figure each propped their container open at
   320px. Measured: .results-section scrolled 505 inside 305, .hero-stats 236
   inside 158. overflow:hidden was hiding it rather than fixing it. */

.hero-stats > *,
.cta-btns > *,
.results-banner > *,
.calc-input,
.calc-input input[type=range]{ min-inline-size:0; }
.calc-input{ gap:clamp(.6rem,3vw,1.2rem); }
.results-banner{ flex-wrap:wrap; }
.rb-num, .rc-num, .calc-big, .hstat-num, .hc-val{ overflow-wrap:anywhere; }
.rb-num{ white-space:normal; }
.cta-btns{ flex-wrap:wrap; }
/* these were physical properties in an RTL document */
.diff-item{ border-right:0; border-inline-start:1px solid rgba(255,255,255,0.08);
            padding-right:0; padding-inline-start:clamp(1.5rem,3.5vw,4.5rem); }
.diff-item:first-child{ border-inline-start:0; padding-inline-start:0; }

/* ---- hero: dvh so a phone URL bar cannot crop it -------------------------- */
/* one .hero padding rule only. The earlier duplicate here was overriding the
   intended value further up the file and reinstating a 56px dead band. */


/* ---- MOBILE HERO: photo beside the headline ------------------------------
   Measured across 12 sites: 0 heroes anywhere put a photo beside the headline
   at 390px, but globes.co.il ships exactly these proportions in its list rows
   (photo 115x106, 220px text column, 25px headline). Applied here it moves the
   H1 from y=607 to y~130, because the old order put TWO blocks before it (a
   236px photo plus a 141px card = 377px of preamble) where every measured site
   leads with exactly one.
   display:contents dissolves the two wrapper divs so their children become
   items of one grid, which is what lets the photo sit beside the heading
   without touching the HTML. */
@media (max-width:1023px){
  .hero{
    display:grid;
    /* SAME SIDES AS DESKTOP. Desktop declares the text column first (= RIGHT in
   RTL) and the photo second (= LEFT). Mobile must declare them in the same
   order or the composition mirrors, which is exactly the bug the client
   photographed. RULE FOR EVERY FUTURE EDIT: mobile preserves the desktop
   arrangement; it scales, it never re-composes. */
    grid-template-columns:minmax(0,1fr) 128px;
    grid-template-areas:
      "eyebrow photo"
      "head    photo"
      "lede  lede"
      "lead  lead"
      "claim claim"
      "card  card"
      "cta   cta"
      "proof proof"
      "stats stats";
    column-gap:1rem;
    /* see --hero-rhythm below: every vertical gap in the hero is a fraction
       of one number, so a short screen closes them all together */
    --hero-rhythm:clamp(.45rem, 14svh - 86px, 1.3rem);
    row-gap:calc(var(--hero-rhythm) * .42);
    justify-content:start; align-items:start;
  }
  .hero > div:first-child,
  .hero-visual{ display:contents; }

  .hero-photo{
    grid-area:photo; align-self:start;
    inline-size:128px; max-inline-size:128px;
    aspect-ratio:4/5; margin:0;
  }
  .hero-photo img{ object-position:center 20%; }
  .hero-tag{grid-area:eyebrow; align-self:end; margin:0 0 .2rem; font-size:.7rem;}
  .hero h1{
    grid-area:head; align-self:start; margin:0;
    font-size:clamp(1.5rem, 0.72rem + 3.9vw, 2.9rem); line-height:1.16;
    font-weight:800; 
  }
  .hero-sub-main         { grid-area:lede;  margin:calc(var(--hero-rhythm) * .54) 0 0; }
  .hero-lead             { grid-area:lead;  margin:calc(var(--hero-rhythm) * .38) 0 0; }
  .hero-sub-tight        { grid-area:claim; margin:calc(var(--hero-rhythm) * .27) 0 0; }
  .hero-proof{ grid-area:proof; margin:calc(var(--hero-rhythm) * .69) 0 0; }
  .hero-actions{ grid-area:cta;  margin:calc(var(--hero-rhythm) * .85) 0 0; }
  .hero-card{ grid-area:card; max-inline-size:none; margin:var(--hero-rhythm) 0 0;
              padding-block:clamp(.62rem, 2svh, 1.15rem); }
  .hero-stats{ grid-area:stats; max-inline-size:none; margin:calc(var(--hero-rhythm) * .92) 0 0; }
}
@media (max-width:360px){
  .hero{ grid-template-columns:minmax(0,1fr) 104px; column-gap:.8rem; }
  .hero-photo{ inline-size:104px; max-inline-size:104px; }
}

@media (max-width:1023px){
  /* Three cells across 314px broke '1,000,000 ₪+' onto two lines. Let the row
     size to content and wrap as a unit instead of forcing equal thirds. */
  .hero-stats{ grid-template-columns:repeat(3, minmax(0,auto)); justify-content:space-between; gap:.8rem 1rem; }
  .hstat-num{ font-size:clamp(1rem, 4.2vw, 1.3rem); white-space:nowrap; }
  .hstat-lbl{ font-size:.68rem; }
}

/* ---- current-section indicator ------------------------------------------ */
.nav-links a.is-current{ color:var(--navy); font-weight:700; }

/* ---- genuine breakpoints: only where content cannot simply flow ----------- */
@media (max-width:1023px){
  .process-lead, .about-photo{ position:static; }
  .about-photo-wrap{ aspect-ratio:4/3; }
  .hero-photo img{ object-position:center 22%; }

  /* ---- MOBILE HEADER ------------------------------------------------------
     STICKY, so the contact button is reachable from anywhere on the page.
     ONE ROW: logo, links, CTA. A wrapped header cost 118px of headroom; this
     costs ~46px. nowrap is what forces the single row, and the links are the
     only flexible item (flex:1 1 0, so its base size is 0 and it can shrink
     below its content width), it absorbs every pixel the logo and the button
     do not need, and scrolls horizontally inside itself when six links cannot
     fit. Without flex-basis:0 the links' max-content width enters the line
     breaking maths and shoves the button onto a row of its own. */
  nav{
    position:fixed; inset-inline:0; inset-block-start:0;
    height:auto; min-height:0;
    flex-wrap:nowrap; align-items:center;
    justify-content:flex-start; column-gap:.4rem;
    padding-block:.32rem; padding-inline:.7rem;
    background:rgba(253,252,250,.97);
  }
  .nav-logo{ flex:0 0 auto; }
  .logo-mark{ inline-size:22px; block-size:22px; }
  .logo-name{ font-size:.88rem; }
  .nav-links{
    flex:1 1 0; min-inline-size:0;
    display:flex; justify-content:flex-start; gap:clamp(.55rem,3vw,1.1rem);
    overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* the scroller is the flex line's tallest item; keep its own box tight */
    padding-block:0; margin-block:0;
    -webkit-mask-image:linear-gradient(to left, #000 88%, transparent 100%);
            mask-image:linear-gradient(to left, #000 88%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{
    white-space:nowrap; font-size:.78rem; line-height:1.9; padding-block:0;
  }
  .nav-cta{
    flex:0 0 auto; font-size:.75rem;
    padding-block:0; padding-inline:.85rem;
    block-size:34px; line-height:1;
  }
  /* clearance for the now-fixed single-row header */
  .hero{ padding-block-start:clamp(62px,13vw,74px); }
  .ins-hero{ padding-block-start:clamp(66px,14vw,80px); }
}
@media (min-width:640px) and (max-width:1023px){
  /* tablet: keep the phone composition but stop pinning the photo at 128px */
  .hero{ grid-template-columns:minmax(0,1fr) clamp(128px, 22vw, 260px);
         column-gap:clamp(1rem, 3vw, 2.5rem); }
  .hero-photo{ inline-size:auto; max-inline-size:none; }
}
@media (min-width:1024px){
  .hero-sub:nth-of-type(2){ margin-top:-0.5rem; }   /* was an inline style */
  .process-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); }
  .about-inner  { grid-template-columns:minmax(240px,0.6fr) minmax(0,1.4fr); }
  .calc-box     { grid-template-columns:1.15fr 1fr; }
}
@media (max-width:560px){
  .hero-actions{ flex-direction:column; align-items:center; }
  .hero-proof,
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{
    justify-content:center;
    inline-size:100%; max-inline-size:22rem;   /* 352px ceiling, not 83% of the viewport */
    margin-inline:auto;                        /* centre the group rather than pinning it to the RTL start */
  }
  .hero-stats{ gap:1.25rem; justify-content:space-between; }
  .results-banner{ flex-direction:column; align-items:flex-start; text-align:start; }
  .site-footer{ flex-direction:column; align-items:flex-start; }
  .footer-links{ flex-wrap:wrap; gap:1rem; }
  .diff-item{ border-inline-start:0; padding-inline-start:0; }
  .ins-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
}
/* touch targets: 44px minimum on anything tappable */
@media (pointer:coarse){
  .btn-primary,.btn-outline,.btn-wa,.btn-tel,.btn-li,.ins-filter{ min-block-size:44px; }
  /* the header button sits inline with the menu; full 44px made the bar top-heavy */
  .nav-cta{ min-block-size:34px; }
  .footer-links a,.nav-links a{ padding-block:.4rem; display:inline-block; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-delay:0s !important;
     transition-duration:.01ms !important; transition-delay:0s !important; }
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* the three inline WhatsApp SVGs carried this as a style="" attribute, which
   beat the stylesheet; without a size the icon expands and squeezes the label */
.icon{ inline-size:1.05em; block-size:1.05em; flex-shrink:0; }
.btn-primary, .btn-wa{ gap:.55rem; }

/* ---- listing + statement page shells ------------------------------------
   These lived only in the insights page's own <style> block and were lost when
   the two stylesheets were merged onto one sheet. The 140px top padding is what
   clears the fixed header; without it the h1 rendered underneath the nav. */
.ins-hero{ padding:140px var(--pad) var(--sect); background:var(--cream); border-bottom:1px solid var(--line); }
.ins-hero-in{ max-width:var(--maxw); margin:0 auto; }
.ins-hero p{ color:var(--muted); max-width:60ch; margin-block-start:1rem; line-height:1.9; }
.ins-filter{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-ui);
  padding:.6rem 1.4rem; font-size:.85rem;
  font-family:'Heebo',sans-serif; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.ins-filter:hover{ background:var(--cream); }
.ins-filter[aria-pressed="true"]{
  background:var(--navy); border-color:var(--navy); color:var(--cream);
}
.ins-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-block-start:2rem; }
.ins-list{ padding:var(--sect) var(--pad); background:var(--white); }
.ins-list-in{ max-width:var(--maxw); margin:0 auto; }
.ins-count{ font-size:.8rem; color:var(--muted); margin-block-end:1.2rem; min-block-size:1.2em; }

/* A draft builds at its real URL so it can be read in place, so it has to be
   unmistakable that it is not live. gold-text on gold-light measures 4.73:1. */
.post-draft{ background:var(--gold-light); border-block-end:1px solid #e8d5a0; }
.post-draft-in{
  max-inline-size:min(1200px, var(--maxw)); margin-inline:auto;
  padding:calc(64px + .9rem) var(--pad) .9rem;
  font-size:.82rem; font-weight:500; color:var(--gold-text); line-height:1.6;
}
/* the banner already clears the fixed nav, so the header below it must not */
.post-draft + .post-hero{ padding-block-start:clamp(1.6rem,3vw,2.2rem); }

/* ---- click-to-edit badges -------------------------------------------------
   Rendered only when ?edit is present AND a CMS session exists. Nothing here
   applies to a normal visit: the markup is not created at all. */
.cms-badge{
  /* inset-inline-end must not go negative: a badge on a full-bleed section
     then sticks past the edge and the whole page scrolls sideways. Up is
     free, sideways is not. */
  position:absolute; inset-block-start:-.6rem; inset-inline-end:0;
  /* Above everything, the fixed header included (100). A badge sits slightly
     outside its own element, so anything painting over that strip made it
     unreachable: the pointer never got there, neither :hover matched, and it
     faded out just as you moved onto it. That is the "disappears on hover". */
  z-index:150; max-inline-size:14rem;
  font-family:'Heebo',sans-serif; font-size:.62rem; font-weight:500;
  line-height:1.3; padding:.2rem .45rem;
  background:var(--navy); color:var(--cream);
  border:1px solid var(--gold2); border-radius:2px;
  /* Fully opaque, always. These only exist behind ?edit for someone who is
     signed in, so there is nothing to be discreet about, and a badge that
     changes opacity as the pointer approaches is a badge you cannot catch. */
  text-decoration:none; transition:background-color .15s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:auto;
}
.cms-badge:hover, .cms-badge:focus-visible{ background:var(--gold-text); }
.cms-edit-mode [data-cms]{ outline:1px dashed rgba(184,134,11,.45); outline-offset:3px; }

/* ---- the floating WhatsApp button --------------------------------------
   Bottom right, not bottom inline-end. On an RTL page those are opposite
   corners, and every chat bubble a visitor has ever used sits on the right.
   Convention wins over symmetry for a control nobody reads, only reaches for.

   Under the nav in the stack (100) so it can never ride over the header, and
   over the page. */
.wa-float{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:90;
  inline-size:3.5rem; block-size:3.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#08170c;
  box-shadow:0 6px 20px rgba(26,39,68,.28);
  transition:transform .25s, box-shadow .25s;
}
.wa-float svg{ inline-size:1.75rem; block-size:1.75rem; }
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,39,68,.34); }
.wa-float:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition:none; }
  .wa-float:hover{ transform:none; }
}
@media print{ .wa-float{ display:none; } }
/* the bubble hovers over the end of the page, so the footer gives it room
   rather than letting it sit on top of the last link */
.site-footer{ padding-block-end:5.75rem; }

/* ---- 404 ---------------------------------------------------------------
   Cream, the site's own type, and the number as a watermark behind the
   words rather than the words themselves: a page that says nothing but
   "404" is the grey default this replaces. */
.nf{
  /* The nav is fixed and paints over whatever sits under it. Every other
     page clears it with top padding (the insights page uses 140px); this one
     started at the top edge and let the header eat the watermark. Same
     140px here, so the section starts below the header rather than behind
     it, and the numeral is anchored to the content block, which cannot rise
     above that padding. */
  min-block-size:100svh; display:grid; place-items:center;
  padding:140px var(--pad) var(--sect); background:var(--cream); position:relative; overflow:hidden;
}
.nf-in{ position:relative; max-inline-size:38rem; text-align:start; }
.nf-num{
  /* kept inside the section: at -.55em and 20rem the top third of the
     numeral sat above the section edge and under the fixed header, and
     overflow:hidden clipped it there */
  position:absolute; inset-inline-end:-.1em; inset-block-start:-.1em; z-index:0;
  font-family:'Assistant',sans-serif; font-weight:800; font-size:clamp(8rem,20vw,15rem);
  line-height:1; color:var(--navy); opacity:.06; pointer-events:none; user-select:none;
  direction:ltr;
}
.nf .section-eyebrow, .nf h1, .nf-body, .nf-pivot, .nf-actions{ position:relative; z-index:1; }
.nf h1{
  font-family:'Assistant',sans-serif; font-weight:800; color:var(--ink);
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.12; margin:.4rem 0 1.2rem;
}
.nf-body{ font-size:clamp(1rem,1.15vw,1.12rem); color:var(--ink2); line-height:1.75; margin:0 0 1rem; }
.nf-pivot{ font-size:clamp(1rem,1.15vw,1.12rem); font-weight:600; color:var(--navy); line-height:1.6; margin:0 0 1.8rem; }
.nf-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---- an article banner ------------------------------------------------
   Optional, and full width of the reading column rather than the page: a
   banner wider than the words it introduces reads as a different page. The
   ratio is fixed so the space is reserved before the image arrives and the
   text below it does not jump. */
.post-banner{ padding:0 var(--pad); margin-block:0 clamp(1.25rem,3vw,2rem); }
.post-banner img{
  display:block; inline-size:100%; block-size:auto;
  max-inline-size:min(1100px, var(--maxw)); margin-inline:auto;
  aspect-ratio:16/9; object-fit:cover;
}

/* ---- the drafts panel -------------------------------------------------
   Sharon's own list of what she has written and not published. The listing
   below it shows the public site; this shows what only she can open, so it
   is drawn as a tool and not as content. Nothing here reaches a visitor:
   the Worker refuses the list without a preview cookie, and the panel stays
   empty and hidden.

   The [hidden] rule sits after the display it has to beat. A UA stylesheet
   [hidden] loses to any author display declaration, which is how the
   insights filter once counted cards it had not hidden. */
.draft-panel{ padding:0 var(--pad); margin-block:2.5rem -1.5rem; }
.draft-panel-in{
  max-width:var(--maxw); margin:0 auto;
  background:var(--gold-light); border:1px dashed var(--gold2);
  border-radius:3px; padding:1.15rem 1.35rem;
}
.draft-panel h2{
  font-family:'Heebo',sans-serif; font-size:.95rem; font-weight:600;
  color:var(--gold-text); letter-spacing:normal;
}
.draft-panel > .draft-panel-in > p{
  font-size:.8rem; color:var(--muted2); margin-block-start:.3rem; max-width:70ch;
}
.draft-panel ul{ list-style:none; margin-block-start:.9rem; display:grid; gap:.5rem; }
.draft-panel li{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.draft-panel li a{
  color:var(--ink); font-weight:500; font-size:.95rem;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--gold2);
}
.draft-panel li a:hover, .draft-panel li a:focus-visible{ color:var(--gold-text); }
.draft-panel-date{ font-size:.72rem; color:var(--muted); }
.draft-panel[hidden]{ display:none; }


/* ---- a single תובנה ---------------------------------------------------
   Same rhythm as the homepage: a cream opening band, the reading column on
   white, a navy close. A flat white page read as a text dump with a button.

   Body measure and rhythm follow the RTL guidance: 50 to 75 characters a line,
   1.7 line height, a touch of word spacing, and NO letter spacing. Tracking
   helps uppercase Latin and damages Hebrew, whose letters already stand apart. */

.post-hero{
  /* The nav is 64px and fixed. Anything beyond it plus a small breath is dead
     space before the reader reaches anything: measured against Vercel's blog,
     whose total header-to-headline distance is similar to ours but is FILLED,
     starting its content right under the header rather than 55px below it. */
  padding:clamp(80px,6vw,92px) var(--pad) clamp(1.9rem,3.2vw,2.6rem);
  background:var(--cream); border-block-end:1px solid var(--line);
}
.post-hero-in{ max-inline-size:min(1100px, var(--maxw)); margin-inline:auto; }

.post-back{
  display:inline-block; font-size:.82rem; font-weight:500;
  color:var(--navy); border-block-end:1px solid var(--gold);
  padding-block-end:2px;
}
.post-back:hover{ color:var(--gold-text); }
.post-back-light{ color:var(--cream); }
.post-back-light:hover{ color:var(--gold2); }
.post-hero .post-back{ margin-block-end:1.3rem; }

.post-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-block-end:.9rem; }
.post-date, .post-read{ font-size:.72rem; color:var(--muted2); }

.post h1{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.7rem, 1.2rem + 2vw, 2.9rem);
  font-weight:700; color:var(--ink); line-height:1.2;
  margin-block-end:1.1rem; text-wrap:balance;
}
.post-standfirst{
  font-size:clamp(1.02rem, 1.3vw, 1.2rem); color:var(--ink2);
  font-weight:300; line-height:1.75; max-inline-size:70ch;
}

.post-main{ padding:clamp(2rem,4vw,3.2rem) var(--pad) 0; background:var(--white); }
.post-body{
  max-inline-size:min(1200px, var(--maxw)); margin-inline:auto;
  font-size:clamp(.98rem, 1.1vw, 1.08rem);
  line-height:1.7; word-spacing:.05em; letter-spacing:normal;
  color:var(--ink2); font-weight:300;
}
.post-body > * + *{ margin-block-start:1.2rem; }
.post-body h2{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.25rem, 1.05rem + .8vw, 1.65rem);
  font-weight:700; color:var(--ink); line-height:1.35;
  margin-block-start:2.8rem; padding-block-start:.2rem;
}
.post-body h3{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.05rem, 1rem + .4vw, 1.25rem);
  font-weight:600; color:var(--ink); line-height:1.4;
  margin-block-start:2rem;
}
.post-body strong{ font-weight:600; color:var(--ink); }
.post-body a{ color:var(--navy); border-block-end:1px solid var(--gold); }
.post-body ul, .post-body ol{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
/* NOT display:flex on the li. A post item mixes a bold lead with the sentence
   that follows it, and flex would make those two separate columns. */
.post-body li{ position:relative; padding-inline-start:1.15rem; }
.post-body li::before{ content:'–'; position:absolute; inset-inline-start:0; color:var(--gold-text); }

/* A pull quote, not a callout box. border-inline-start is the RIGHT edge in RTL. */
.post-body blockquote{
  margin-block:2.6rem; padding-inline-start:1.4rem;
  border-inline-start:3px solid var(--gold);
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.1rem, 1rem + .6vw, 1.4rem);
  line-height:1.55; color:var(--ink); font-weight:500;
}
.post-body blockquote p{ margin:0; }

.post-author{
  max-inline-size:min(1200px, var(--maxw)); margin:0 auto clamp(1.8rem,3vw,2.4rem);
  display:flex; align-items:center; gap:1rem;
  padding-block-end:1.4rem; border-block-end:1px solid var(--line);
}
.post-author img{
  inline-size:52px; block-size:52px; border-radius:50%;
  object-fit:cover; object-position:top; flex-shrink:0;
}
.post-author-name{ font-family:'Assistant', sans-serif; font-size:1rem; font-weight:600; color:var(--ink); }
.post-author-role{ font-size:.78rem; color:var(--muted); margin-block-start:.15rem; }

.post-more{ max-inline-size:min(1200px, var(--maxw)); margin-inline:auto; padding-block:clamp(3rem,6vw,4.5rem) 0; }
.post-more h2{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight:700; color:var(--ink); margin-block-end:1.4rem;
}
.post-more-grid{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.post-more-grid .ins-card h3{
  font-family:'Assistant', sans-serif; font-size:1.02rem;
  font-weight:600; color:var(--ink); line-height:1.45;
}

.post-cta{ background:var(--navy); padding:clamp(3rem,6vw,5rem) var(--pad); margin-block-start:clamp(3rem,6vw,4.5rem); }
.post-cta-in{ max-inline-size:min(1200px, var(--maxw)); margin-inline:auto; }
.post-cta h2{
  font-family:'Assistant', sans-serif;
  font-size:clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight:700; color:var(--cream); line-height:1.3; margin-block-end:.7rem;
}
.post-cta p{ color:rgba(245,242,236,.72); font-size:.95rem; line-height:1.8; font-weight:300; }
.post-cta-btns{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-block-start:1.8rem; }

/* ---- accessibility statement page ------------------------------------- */
.a11y-section{ padding:var(--sect) var(--pad); background:var(--white); }
.a11y-inner{ max-width:min(72ch, var(--maxw)); margin:0 auto; }
.a11y-inner h2{
  font-family:'Assistant', sans-serif; font-weight:600; color:var(--ink);
  font-size:clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-block:2.5rem 0.8rem; line-height:1.35;
}
.a11y-inner h2:first-of-type{ margin-block-start:0; }
.a11y-inner p{ color:var(--ink2); line-height:1.9; margin-block-end:1rem; }
.a11y-inner ul{ list-style:none; margin-block-end:1rem; }
.a11y-inner li{
  color:var(--ink2); line-height:1.9;
  padding-inline-start:1.1rem; position:relative; margin-block-end:.5rem;
}
.a11y-inner li::before{
  content:'·'; position:absolute; inset-inline-start:0;
  color:var(--gold-text); font-weight:700;
}
.a11y-inner a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.a11y-contact li::before{ content:none; }
.a11y-contact li{ padding-inline-start:0; }
.a11y-date{ margin-block-start:2.5rem; color:var(--muted); font-size:.85rem; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:2px;
  border-radius:2px;
}
.calc-input input[type=range]:focus-visible{ outline-offset:6px; }
/* on navy and ink grounds the navy ring would vanish */
.results-inner :focus-visible, .cta-inner :focus-visible,
.calc-results :focus-visible, .site-footer :focus-visible,
.hero-card :focus-visible{ outline-color:var(--cream); }
.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:1rem;
  z-index:200; background:var(--navy); color:var(--cream);
  padding:.75rem 1.25rem; font-size:.85rem; text-decoration:none;
}
.skip:focus{ inset-block-start:.5rem; }
/* the fixed header covers anchor targets on mobile too, so this cannot stay
   inside the desktop-only media query */
html{ scroll-padding-block-start:clamp(60px, 14vw, 84px); }

@media (forced-colors: active){
  /* colour alone carried both indicators; forced-colors overrides colour */
  .nav-links a.is-current{ border-block-end:2px solid currentColor; }
  .ins-filter[aria-pressed="true"]{
    forced-color-adjust:none; background:Highlight; color:HighlightText;
    border:2px solid HighlightText;
  }
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible{ outline:3px solid CanvasText; }
}

@media print{
  /* five full-bleed dark sections set light text. Browsers drop background
     colours when printing but keep foreground ones, so about a third of the
     copy printed white on white. */
  nav, .hero-bg-fix, .skip{ display:none; }
  .diff-strip, .results-section, .result-card, .calc-results, .cta-section,
  .site-footer, .hero-card{ background:#fff !important; color:#000 !important; }
  .diff-title,.diff-desc,.hc-quote,.rc-title,.rc-desc,.rc-num,.calc-label,
  .calc-mini-num,.calc-mini-hint,.calc-year2,.calc-big,
  .cta-inner h2,.cta-inner p,.cta-note,.btn-tel,.btn-li,
  .footer-logo,.footer-links a,.footer-copy,
  .results-inner .section-title,.results-inner .section-sub,
  .results-inner .section-eyebrow,.cta-inner .section-eyebrow{ color:#000 !important; }
  .process-lead, .about-photo{ position:static; }
  section, .diff-strip{ break-inside:avoid; padding-block:1rem !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; }
}