/* ===========================================================
   AdhdNest - מערכת עיצוב v4 "יוקרה שקטה" (J v6)
   שנהב חם + פליז + סריף מודגש, זכוכית נעה, קשתות תלת-ממד,
   צללים רכים, מיקרו-אינטראקציות. Aman × Noomo.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Assistant:wght@400;600;700;800&display=swap');

:root{
  --ivory:#F8F5EE;
  --ivory-2:#EFE7D7;
  --sand:#E3D4B9;
  --card:#FFFDF8;
  --ink:#201A12;
  --ink-2:#4E4535;
  /* 5.12:1 on ivory and 4.53:1 on ivory-2 (WCAG AA for normal text). */
  --muted:#716754;
  --aubergine:#241A2E;
  --brass:#A9885A;
  --brass-dk:#77592C;
  --gold-line:#C4A96F;
  --hairline:rgba(90,75,50,.18);
  --glass:rgba(255,252,244,.55);
  --glass-border:rgba(255,255,255,.8);
  --shadow-soft:0 24px 50px -36px rgba(60,45,20,.45);
  --shadow-big:0 44px 90px -44px rgba(60,45,20,.4);
  --radius:4px;
  --radius-sm:3px;
  --maxw:1180px;
  --read:700px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Assistant','Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:18px;
  line-height:1.75;
  direction:rtl;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:'Frank Ruhl Libre','Suez One',Georgia,serif;
  line-height:1.26;
  font-weight:700;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.2rem,1.5rem + 2.9vw,3.7rem)}
h2{font-size:clamp(1.55rem,1.25rem + 1.4vw,2.3rem);margin-top:1.9em}
h3{font-size:clamp(1.2rem,1.08rem + .6vw,1.5rem);margin-top:1.5em}

p{margin:0 0 1.1em}
a{color:var(--brass-dk);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.read{max-width:var(--read);margin-inline:auto}

/* ---------- mark helper ---------- */
.mark{background:linear-gradient(180deg, transparent 64%, rgba(196,169,111,.45) 64%);padding:0 .06em}
.mark.coral{background:linear-gradient(180deg, transparent 64%, rgba(169,136,90,.3) 64%)}

/* ---------- Skip link ---------- */
.skip{position:absolute;right:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{right:8px;top:8px}

/* ---------- Header: glass bar ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(248,245,238,.55);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 30px -24px rgba(40,30,15,.35);
  transition:background .4s ease;
}
.head-in{display:flex;align-items:center;gap:26px;padding:15px 22px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800}
.brand .mark{
  width:38px;height:38px;border-radius:8px;flex:0 0 38px;
  background:linear-gradient(160deg,#3A2D18,var(--ink));
  box-shadow:0 10px 22px -10px rgba(32,26,18,.6);
  display:grid;place-items:center;color:#E4C983;font-size:17px;font-weight:700;
  font-family:'Frank Ruhl Libre',serif;letter-spacing:-.5px;
  padding:0;transform:rotate(-3deg);
}
.brand .name{font-family:'Frank Ruhl Libre',serif;font-size:1.42rem;font-weight:700;letter-spacing:-.01em}
.brand .name em{font-style:normal;color:var(--brass)}
.nav{display:flex;gap:24px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.95rem;padding-bottom:3px;position:relative;border-bottom:none}
.nav a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:1.5px;background:var(--brass);transition:width .35s cubic-bezier(.22,.9,.3,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.nav .cta{
  background:var(--ink);color:var(--ivory);padding:11px 22px;border-radius:2px;
  box-shadow:0 14px 26px -14px rgba(32,26,18,.55);font-size:.88rem;font-weight:800;letter-spacing:.04em;
  transition:background .25s ease, transform .25s ease;
}
.nav .cta::after{display:none}
.nav .cta:hover{background:#3A3121;color:var(--ivory);transform:translateY(-2px)}

/* ---------- Mobile nav ---------- */
.nav-toggle{
  display:none;
  width:44px;height:44px;flex:0 0 44px;
  margin-inline-start:auto;
  border:1px solid var(--hairline);border-radius:8px;
  background:var(--card);box-shadow:0 8px 20px -14px rgba(40,30,15,.4);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  padding:0;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
.nav-toggle:active{transform:translateY(1px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:760px){
  .head-in{flex-wrap:nowrap}
  .nav-toggle{display:flex}
  .nav{
    display:none;
    position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(252,250,244,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 20px 40px -20px rgba(40,30,15,.35);
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav a{padding:17px 24px;border-bottom:1px solid var(--hairline);font-size:1.05rem}
  .nav a::after{display:none}
  .nav .cta{border-radius:2px;text-align:center;margin:14px 22px 18px;padding:14px 18px}
}

/* ---------- Hero: layered scene + glass panel ---------- */
.hero{position:relative;padding:70px 0 76px;overflow:hidden}
.hero::before{
  content:"";position:absolute;width:150%;height:52%;top:14%;right:-25%;
  background:linear-gradient(90deg, var(--sand) 0%, #EBDFC6 45%, rgba(235,223,198,0) 100%);
  transform:rotate(-7deg);z-index:0;pointer-events:none;
}
/* Contour field that spreads like ripples on water, standing in for the old
   half-arch outline. Each ring is born faint at the centre, brightens as it
   widens and fades again at the rim. The rings are evenly spaced and each
   carries its own scale target (--k) sized so that one cycle advances it by
   exactly one ring gap: it lands where the next ring started, so the loop has
   no seam, and every ring travels outwards at the same speed the way real
   ripples do. */
.hero-topo{
  position:absolute;top:-6%;inset-inline-start:1%;
  width:clamp(320px,42vw,560px);height:auto;
  color:var(--brass);opacity:.7;
  z-index:0;pointer-events:none;overflow:visible;
  -webkit-mask-image:radial-gradient(closest-side,#000 36%,rgba(0,0,0,.5) 68%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 36%,rgba(0,0,0,.5) 68%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  animation:topoDrift 54s ease-in-out infinite alternate;
}
.hero-topo path{
  transform-box:view-box;transform-origin:320px 320px;
  vector-effect:non-scaling-stroke;
  animation:topoRipple 6s linear infinite;
}
@keyframes topoRipple{
  from{transform:scale(1);opacity:var(--o0)}
  to{transform:scale(var(--k));opacity:var(--o1)}
}
@keyframes topoDrift{
  from{transform:translate3d(0,0,0) rotate(-3deg)}
  to{transform:translate3d(-18px,14px,0) rotate(3deg)}
}
@media(max-width:900px){.hero-topo{width:min(78vw,380px);top:-3%;opacity:.42}}
.hero-disc{position:absolute;border-radius:50%;filter:blur(46px);z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero .glass-wrap{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.45);-webkit-backdrop-filter:blur(22px) saturate(1.45);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-big), inset 0 1px 0 rgba(255,255,255,.9);
  padding:clamp(28px, 2.5vw + 16px, 54px);
  position:relative;overflow:hidden;
}
.hero .glass-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.4) 46%, rgba(255,255,255,.1) 54%, transparent 68%);
  transform:translateX(130%);
  animation:sweep 7s cubic-bezier(.4,.1,.3,.9) infinite;
}
@keyframes sweep{0%{transform:translateX(130%)}60%,100%{transform:translateX(-130%)}}
.hero .glow{
  position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(196,169,111,.28) 0%, rgba(196,169,111,0) 62%);
  top:0;left:0;will-change:transform;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;font-size:.78rem;font-weight:800;letter-spacing:.2em;
  color:var(--brass-dk);margin-bottom:22px;
}
.eyebrow::after{content:'';width:52px;height:1.5px;background:var(--gold-line)}
/* ---------- Hero headline as a typographic logotype ---------- */
/* A construction sheet: the headline sits on drawn type rules, with the
   verticals, bowls and diagonals running well past it top and bottom. The
   plate is deliberately tall so the drawing has room to breathe. */
.h1-plate{position:relative;padding-block:clamp(30px,5vw,70px);margin-block:clamp(-14px,-1vw,-6px)}
.h1-grid{
  position:absolute;z-index:0;pointer-events:none;
  top:50%;inset-inline-start:50%;
  width:min(118%,760px);height:auto;
  transform:translate(50%,-50%);   /* RTL: inset-inline-start is the right edge */
  color:var(--aubergine);
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,rgba(0,0,0,.45) 82%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 52%,rgba(0,0,0,.45) 82%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.h1-grid .warm{stroke:var(--gold-line)}
.hero h1{
  position:relative;z-index:1;
  max-width:none;color:var(--aubergine);
  /* Capped so the second line still fits the column on one line: at the widest
     layout it needs 696px of a 681px column at 64px, so 3.55rem is the ceiling. */
  font-size:clamp(2.1rem,5.4vw - 5px,3.55rem);
  line-height:1.16;letter-spacing:-.022em;
  margin-bottom:.42em;
}
/* The weight jump between the two lines is the logotype's thick/thin drama;
   Frank Ruhl Libre carries the stroke contrast inside the letterforms. */
.hero h1 .l1{font-weight:900}
.hero h1 .l2{font-weight:400;letter-spacing:.004em}
/* Carved relief: a brass extrusion trailing down-right as though lit from the
   upper left, darkening with distance, then an ambient shadow that lifts the
   whole line off the ground. Offsets are in em so the depth tracks the type
   size. Both word groups share one extrusion, so the white words and the dark
   ones read as cut from the same block. */
.hero h1{
  --relief:
    .018em .018em 0 #8F7850,
    .036em .036em 0 #7A6543,
    .054em .054em 0 #665336,
    .072em .072em 0 #52422A,
    .09em .09em 0 #3F321F,
    .06em .09em .13em rgba(60,45,20,.32);
}
.hero h1 .l1,
.hero h1 .l2{text-shadow:var(--relief)}
/* The white face has almost no contrast against the cream, so it gets a warm
   edge on the lit side: enough to bound the letterform without contradicting
   the light direction the way a dark outline would. */
.hero h1 .accent{
  color:#fff;font-weight:900;
  text-shadow:-.012em -.012em 0 #C0A87C, var(--relief);
}
/* The reveal masks each word with overflow:hidden, which would crop the relief:
   the deepest extrusion reaches .09em and the ambient shadow .22em. Pad the mask
   past both and pull the layout back with matching margins. The bottom stays the
   tightest of the three, since that edge is what the slide-up reveal rides on. */
.hero h1 .w{padding:0 .36em .3em;margin:0 -.36em -.3em}
/* That taller mask also opens a gap the resting word would peek through, so the
   hero's words start further down than the shared 112%. */
.hero h1 .wi{transform:translateY(135%)}
.hero h1.on .wi{transform:translateY(0)}
@media(max-width:900px){
  .h1-plate{padding-block:clamp(22px,6vw,44px)}
  .h1-grid{width:min(128%,520px)}
  /* Narrow columns cannot hold the second line, and forcing it would shrink
     the type past the point where it still reads as a logotype. */
  .hero h1 br{display:none}
}
.hero .lede{font-size:clamp(1.06rem,.98rem + .5vw,1.28rem);font-weight:600;color:var(--ink-2);max-width:56ch;margin-bottom:28px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:46px;align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}

/* word-by-word reveal */
h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
h1 .wi{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.19,.8,.22,1)}
h1.on .wi{transform:translateY(0)}

.btn{
  display:inline-block;background:var(--ink);color:var(--ivory);text-decoration:none;
  font-weight:800;padding:15px 30px;border-radius:2px;border:none;cursor:pointer;
  font-size:.95rem;letter-spacing:.04em;font-family:inherit;
  box-shadow:0 18px 34px -22px rgba(34,29,21,.6);
  transition:background .25s ease, box-shadow .25s ease;will-change:transform;
}
.btn:hover{background:#3A3121;color:var(--ivory);box-shadow:0 24px 44px -22px rgba(34,29,21,.65)}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--brass-dk);box-shadow:inset 0 0 0 1.5px var(--brass)}
.btn.ghost:hover{background:rgba(255,255,255,.85);color:var(--brass-dk)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.stat{background:transparent;padding:26px 16px;text-align:center;position:relative;border:none;box-shadow:none;border-radius:0}
.stat + .stat::before{content:'';position:absolute;inset-inline-start:0;top:20%;height:60%;width:1px;background:var(--hairline)}
.stat b{display:block;font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:2.3rem;color:var(--brass-dk);line-height:1.15}
.stat span{font-size:.87rem;color:var(--muted);font-weight:600}
.stat-il{display:block;margin:2px 0 6px;font-size:.8rem;font-weight:700;color:var(--brass-dk);opacity:.85}
.stat-counts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hairline)}
.stat-counts div{min-width:0;padding:0 8px}
.stat-counts div + div{border-inline-start:1px solid var(--hairline)}
.stat-counts dt{font-size:.68rem;font-weight:800;color:var(--muted);letter-spacing:.05em}
.stat-counts dd{margin:2px 0 0;color:var(--ink);font-size:.92rem;font-weight:800;line-height:1.35}
.stat-total b{font-size:2rem}
.stat-method{margin-top:12px;padding:12px 16px;border:1px solid var(--hairline);background:rgba(255,253,248,.55);color:var(--muted);font-size:.82rem;line-height:1.65}
.stat-method summary{cursor:pointer;color:var(--brass-dk);font-weight:800}
.stat-method p{margin:10px 0 0}
.stat-sources a{color:var(--brass-dk);font-weight:700}
@media(max-width:700px){.stats{grid-template-columns:1fr}.stat + .stat::before{display:none}.stat{padding-block:22px}.stat-counts{max-width:340px;margin-inline:auto;width:100%;margin-top:16px}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;padding:15px 0;background:rgba(255,253,248,.5)}
.mq-track{display:flex;white-space:nowrap;will-change:transform}
.mq-chunk{display:flex;align-items:center;gap:26px;padding-inline-end:26px;font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:1.35rem;color:var(--ink);flex:0 0 auto}
.mq-chunk i{font-style:normal;color:var(--brass-dk)}
.mq-chunk .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-line);flex:0 0 auto}

/* ---------- Sections / cards ---------- */
section{padding:64px 0}
.section-head{max-width:60ch;margin-bottom:32px}
.section-head h2{margin-top:0}
.section-head p{color:var(--ink-2)}

.grid{display:grid;gap:24px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.grid.c3,.grid.c2{grid-template-columns:1fr}}

.card{
  background:rgba(255,253,248,.82);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;flex-direction:column;
  transition:box-shadow .35s ease;transform-style:preserve-3d;will-change:transform;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{box-shadow:0 34px 64px -36px rgba(60,45,20,.55), inset 0 1px 0 rgba(255,255,255,.85)}
.card h3{margin-top:0;margin-bottom:.45em}
.card p{color:var(--ink-2);font-size:.97rem;font-weight:600;margin-bottom:.8em}
.card .more{margin-top:auto;color:var(--brass-dk);font-weight:800;font-size:.9rem;letter-spacing:.03em}

/* ---------- Courses ---------- */
.course-meta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 28px}
.course-meta span{border:1px solid var(--hairline);background:rgba(255,253,248,.8);padding:8px 12px;border-radius:999px;color:var(--ink-2);font-size:.88rem;font-weight:700}
.course-safety{border-inline-start:3px solid var(--brass)}
.course-chooser{margin:30px 0 42px}
.course-card h2{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);margin-top:0}
.course-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:6px 0 18px;padding:0;list-style:none;color:var(--muted);font-size:.88rem;font-weight:700}
.evidence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.course-map{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 26px}
.course-map a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--hairline);background:var(--card);color:var(--brass-dk);text-decoration:none;font-weight:800;border-radius:50%}
.course-map a:hover,.course-map a:focus-visible{background:var(--ink);color:var(--ivory);outline:none}
.course-module{margin:0 0 16px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:rgba(255,253,248,.82);box-shadow:0 16px 34px -28px rgba(60,45,20,.45);overflow:hidden;scroll-margin-top:92px}
.course-module summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none}
.course-module summary::-webkit-details-marker{display:none}
.course-module summary::after{content:'+';font-size:1.45rem;color:var(--brass-dk);grid-column:3;grid-row:1 / span 2}
.course-module[open] summary::after{content:'-'}
.course-module summary strong{font-family:'Frank Ruhl Libre',serif;font-size:1.18rem;color:var(--ink)}
.course-module summary small{grid-column:2;color:var(--muted);font-weight:600}
.course-num{grid-row:1 / span 2;color:var(--brass-dk);font-size:.76rem;font-weight:900;letter-spacing:.06em}
.course-module-body{padding:4px 24px 24px;border-top:1px solid var(--hairline)}
.course-module-body h3{font-size:1.08rem;margin-top:22px;color:var(--brass-dk)}
.practice-card{padding:14px 17px;margin:18px 0;background:var(--ivory-2);border-inline-start:3px solid var(--gold-line);color:var(--ink-2)}
.course-done{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hairline);font-weight:800;color:var(--ink-2);cursor:pointer}
.course-done input{width:20px;height:20px;accent-color:var(--brass-dk)}
.course-start{margin:26px 0;padding:24px;border:1px solid rgba(62,30,72,.14);border-radius:18px;background:linear-gradient(135deg,#fff 0%,#fbf8fc 100%)}
.course-start>h2{margin-top:0}
.course-start h3{font-size:1.05rem;margin-bottom:6px;color:var(--brass-dk)}
.course-start p{margin-top:6px}
.course-version{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(62,30,72,.12);font-size:.88rem;color:var(--muted)}
.evidence-note{margin-top:18px;padding:12px 14px;border-inline-start:4px solid var(--brass);background:#f7f1f8;border-radius:8px;font-size:.94rem}
.evidence-map td:nth-child(2){white-space:nowrap;font-weight:800}
.legal-review{border-color:#b65c39;background:#fff4ed}
@media(max-width:760px){.evidence-grid{grid-template-columns:1fr}.course-module summary{grid-template-columns:auto 1fr auto;padding:16px}.course-module-body{padding:2px 18px 20px}}

.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  color:var(--brass-dk);background:transparent;padding:0 0 6px;margin-bottom:14px;
  align-self:flex-start;border-bottom:1.5px solid var(--gold-line);border-radius:0;transform:none;
}
.chip.teal,.chip.plum,.chip.coral{color:var(--brass-dk);background:transparent;border-color:var(--gold-line)}

/* ---------- TL;DR / note ---------- */
.tldr{
  background:rgba(255,252,244,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-inline-start:3px solid var(--gold-line);
  border-radius:var(--radius-sm);
  padding:22px 24px;margin:28px 0;position:relative;
  box-shadow:0 14px 30px -24px rgba(60,45,20,.4);
}
.tldr h4{margin:0 0 .5em;font-size:1.06rem;color:var(--brass-dk);font-family:'Frank Ruhl Libre',serif;font-weight:700}
.tldr p,.tldr li{margin-bottom:.4em;font-size:1rem;color:var(--ink-2)}
.tldr ul{margin:0;padding-inline-start:20px}

.note{
  background:var(--ivory-2);border:1px solid rgba(150,118,72,.3);border-radius:var(--radius-sm);
  padding:16px 20px;margin:24px 0;font-size:.96rem;color:var(--ink-2);
}
.note strong{color:var(--ink)}

/* ---------- Article ---------- */
.article-head{padding:52px 0 14px;background:linear-gradient(180deg,var(--ivory-2) 0%,rgba(239,231,215,0) 100%)}
.meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:.88rem;margin-bottom:10px;font-weight:700}
.meta span{display:inline-flex;align-items:center;gap:6px}
article{padding:36px 0 10px}
article h2{padding-bottom:.3em;display:inline-block;border-bottom:2px solid var(--gold-line)}
article ul,article ol{padding-inline-start:22px;margin:0 0 1.2em}
article li{margin-bottom:.5em}
article blockquote{
  margin:28px 0;padding:14px 22px;border-inline-start:3px solid var(--gold-line);
  color:var(--ink-2);font-size:1.12rem;font-family:'Frank Ruhl Libre',serif;font-weight:500;
  background:rgba(255,252,244,.6);
}
.toc{
  background:rgba(255,253,248,.82);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:20px 24px;margin:24px 0;box-shadow:0 16px 34px -26px rgba(60,45,20,.45);
}
.toc strong{display:block;margin-bottom:.5em;font-size:.95rem;font-family:'Frank Ruhl Libre',serif;font-weight:700;color:var(--brass-dk)}
.toc ol{margin:0;padding-inline-start:20px;font-size:.97rem}
.toc a{color:var(--ink-2);font-weight:600;text-decoration:none}
.toc a:hover{color:var(--brass-dk)}

table{width:100%;border-collapse:collapse;margin:0;font-size:.96rem;background:var(--card)}
th,td{border-bottom:1px solid var(--hairline);padding:12px 14px;text-align:right;vertical-align:top}
th{background:var(--ink);color:#EFE8D8;font-weight:700;font-family:'Frank Ruhl Libre',serif;letter-spacing:.02em}
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;
  border:1px solid var(--hairline);border-radius:var(--radius-sm);
  box-shadow:0 16px 34px -28px rgba(60,45,20,.4);
}
@media(max-width:640px){table{font-size:.88rem}th,td{padding:9px 11px}}

/* ---------- Sources (מקורות) ---------- */
.sources{
  margin:44px 0 10px;padding:24px 26px;
  background:rgba(255,253,248,.8);border:1px solid var(--glass-border);
  border-inline-start:3px solid var(--gold-line);border-radius:var(--radius-sm);
  box-shadow:0 16px 34px -28px rgba(60,45,20,.4);
}
.sources h2,.sources h3{margin-top:0;border:none;font-size:1.15rem}
.sources ol{margin:0;padding-inline-start:20px;font-size:.9rem;color:var(--ink-2)}
.sources li{margin-bottom:.6em;line-height:1.6}
.sources a{color:var(--brass-dk);font-weight:700}
.sources .src-note{font-size:.82rem;color:var(--muted);margin:10px 0 0}

/* ---------- Newsletter ---------- */
.newsletter{
  background:linear-gradient(150deg,#241C10 0%,#3A2D18 55%,#241C10 100%);
  color:#F2EAD8;border-radius:6px;padding:46px 40px;margin:14px 0;
  box-shadow:0 30px 60px -30px rgba(36,28,16,.6);
  position:relative;overflow:hidden;border:1px solid rgba(196,169,111,.35);
}
.newsletter::after{
  content:"";position:absolute;left:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;
  background:rgba(196,169,111,.22);filter:blur(40px);
}
.newsletter::before{
  content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:rgba(255,220,160,.14);filter:blur(40px);
}
.newsletter h2,.newsletter h3{color:#F2EAD8;margin-top:0;position:relative}
.newsletter p{color:#CFC2A6;max-width:52ch;position:relative;font-weight:600}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;max-width:520px;position:relative}
.nl-form input[type=email]{
  flex:1 1 240px;padding:14px 16px;border-radius:2px;border:1px solid rgba(196,169,111,.5);font-family:inherit;font-size:1rem;
  background:rgba(255,253,248,.96);color:var(--ink);
}
.nl-form input[type=email]:focus{outline:2px solid var(--gold-line);outline-offset:2px}
.nl-form button{white-space:nowrap}
.newsletter .btn{background:linear-gradient(180deg,#F0D989,#C9A227 55%,#A9821A);color:#241505;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.newsletter .btn:hover{background:linear-gradient(180deg,#F6E29B,#D2AC30 55%,#B18A1E);color:#241505}
.nl-msg{margin-top:14px;font-weight:700;min-height:1.4em;font-size:.98rem;position:relative}
.nl-msg.ok{color:#E4C983}
.nl-msg.err{color:#FFC5B0}
.nl-small{font-size:.82rem;color:#A5987C;margin-top:10px;position:relative}

/* ---------- Quiz ---------- */
.quiz-card{
  background:rgba(255,253,248,.85);border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-soft);
}
.q{padding:18px 0;border-bottom:1px solid var(--hairline)}
.q:last-of-type{border-bottom:0}
.q p{font-weight:700;margin-bottom:10px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{
  border:1.5px solid rgba(169,136,90,.45);background:var(--card);border-radius:2px;padding:9px 18px;
  font-family:inherit;font-size:.92rem;cursor:pointer;color:var(--ink-2);font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.opt:hover{background:var(--ivory-2);border-color:var(--brass)}
.opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#E4C983;font-weight:800}
.result{margin-top:26px;padding:26px;border-radius:var(--radius);display:none;background:rgba(255,253,248,.9);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)}
.result.show{display:block}
.result h3{margin-top:0}
.bar{height:10px;background:var(--ivory-2);border:1px solid var(--hairline);border-radius:999px;overflow:hidden;margin:16px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--gold-line));width:0;transition:width .5s ease}

/* ---------- Calculator ---------- */
.calc-card{
  background:rgba(255,253,248,.85);border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-soft);
}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:700px){.calc-row{grid-template-columns:1fr}}
.calc-field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.calc-field select,.calc-field input[type=number]{
  width:100%;padding:12px 14px;border-radius:2px;border:1.5px solid rgba(90,75,50,.28);font-family:inherit;font-size:1rem;background:var(--card);color:var(--ink);
}
.calc-field select:focus,.calc-field input[type=number]:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(169,136,90,.18)}
.calc-out{margin-top:22px;padding:24px;background:var(--ivory-2);border:1px solid rgba(150,118,72,.35);border-radius:var(--radius-sm)}
.calc-out .big{font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:2.2rem;color:var(--brass-dk)}
.calc-legend{font-size:.86rem;color:var(--muted);margin-top:10px}

/* ---------- Index list ---------- */
.idx{
  border:1px solid var(--glass-border);border-radius:var(--radius);
  background:rgba(255,253,248,.82);box-shadow:var(--shadow-soft);overflow:hidden;
}
.idx-item{display:flex;align-items:baseline;gap:16px;padding:19px 24px;text-decoration:none;color:inherit;border-bottom:1px solid var(--hairline);transition:background .15s ease}
.idx-item:last-child{border-bottom:0}
.idx-item:hover{background:var(--ivory-2)}
.idx-item .num{font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:1.02rem;color:var(--brass-dk);flex:0 0 auto;min-width:1.6em}
.idx-item .txt{flex:1 1 auto}
.idx-item h4{margin:0 0 .25em;font-size:1.05rem;font-family:'Assistant',sans-serif;font-weight:800;color:var(--ink)}
.idx-item p{margin:0;font-size:.9rem;color:var(--ink-2)}
.idx-item .arrow{flex:0 0 auto;color:var(--brass-dk);font-size:1.2rem;transition:transform .3s cubic-bezier(.22,.9,.3,1)}
.idx-item:hover .arrow{transform:translateX(-5px)}
.track-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.track-head .count{font-size:.85rem;color:var(--muted);font-weight:700}

/* ---------- Avatars ---------- */
.avatar{
  border-radius:50%;border:2px solid #fff;box-shadow:0 8px 20px -10px rgba(60,45,20,.45);
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
}
.avatar svg{width:62%;height:62%;display:block}
.avatar.coral{background:linear-gradient(140deg,#C08B5C,#9C6B3A)}
.avatar.plum{background:linear-gradient(140deg,#4E4535,#201A12)}
.avatar.sun{background:linear-gradient(140deg,#E4C983,#C9A227)}
.avatar.lg{width:64px;height:64px;flex-basis:64px}
.avatar.md{width:46px;height:46px;flex-basis:46px}
.avatar-head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.avatar-head h2,.avatar-head h3{margin:0}
.avatar-stack{display:flex;margin-inline-end:6px}
.avatar-stack .avatar{margin-inline-start:-14px}
.avatar-stack .avatar:first-child{margin-inline-start:0}
.by-line{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--ink-2);font-size:.92rem;font-weight:600}

/* ---------- Personas: arch portals + 3D brain ---------- */
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:1}
@media(max-width:860px){.personas{grid-template-columns:1fr}}
.persona{
  background:rgba(255,253,248,.8);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.85);
  padding:20px 20px 26px;text-align:center;
  perspective:1000px;border-radius:var(--radius);
}
.arch-win{height:320px;position:relative;margin-bottom:20px;transform-style:preserve-3d;will-change:transform}
.arch-mask{
  position:absolute;inset:0;border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,#F0E4CD 0%,#E7D5B6 55%,#DCC69E 100%);
  border:1px solid rgba(150,118,72,.35);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  transform:translateZ(-48px) scale(1.07);
}
.arch-ring{position:absolute;inset:0;border-radius:999px 999px 0 0;border:1.5px solid rgba(169,136,90,.5);pointer-events:none}
.arch-ring.r1{transform:translateZ(26px) scale(.985);opacity:.7}
.arch-ring.r2{transform:translateZ(54px) scale(.96);opacity:.35}
.photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:0;
  filter:sepia(.22) saturate(.9) contrast(1.03) brightness(1.02);
  opacity:0;transform:scale(1.16);
}
.arch-win.in .photo{
  opacity:1;transform:scale(1);
  transition:opacity 1.1s ease, transform 1.7s cubic-bezier(.19,.8,.22,1);
  animation:kenburns 16s ease-in-out 1.9s infinite alternate;
}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.09) translate(1.2%,-1.4%)}}
.tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(255,253,248,.92) 0%, rgba(255,253,248,0) 24%),
    linear-gradient(180deg, rgba(240,228,205,.35) 0%, rgba(222,198,158,.1) 40%, rgba(160,120,60,.2) 100%);
}
.brain-hold{position:absolute;top:-4px;left:50%;margin-left:-65px;width:130px;height:104px;z-index:3;transform:translateZ(84px)}
.bob{position:relative;width:100%;height:100%;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.brain-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.brain-3d.on{opacity:1}
.dood{
  position:absolute;font-family:'Frank Ruhl Libre',serif;font-weight:700;color:var(--brass-dk);
  opacity:0;animation:doodFloat 2.9s ease-in-out infinite;z-index:3;text-shadow:0 1px 6px rgba(255,250,240,.8);
}
.dood.q1{top:26px;right:18%;font-size:1.4rem;animation-delay:.2s}
.dood.q2{top:66px;left:15%;font-size:1.05rem;animation-delay:1.2s}
.dood.q3{top:16px;left:27%;animation-delay:2s}
@keyframes doodFloat{
  0%{opacity:0;transform:translateY(8px) rotate(-8deg)}
  30%,60%{opacity:.85;transform:translateY(-4px) rotate(6deg)}
  100%{opacity:0;transform:translateY(-16px) rotate(-4deg)}
}
.persona h3{margin:0 0 8px;font-size:1.3rem}
.persona p{font-size:.93rem;font-weight:600;color:var(--ink-2);margin:0;line-height:1.68}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:.83rem;font-weight:700;color:var(--ink-2)}
.lg{display:inline-flex;align-items:center;gap:7px}
.sw{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}
.sw.gray{background:#AEB6C0}
.sw.blue{background:#2F7FDB}
.sw.red{background:#E04432}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---------- Custom cursor ---------- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;will-change:transform}
.cur-dot{width:8px;height:8px;background:var(--brass-dk);margin:-4px 0 0 -4px}
.cur-ring{width:38px;height:38px;border:1.5px solid rgba(169,136,90,.6);margin:-19px 0 0 -19px;transition:width .25s ease,height .25s ease,margin .25s ease,border-color .25s ease,background .25s ease}
.cur-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(169,136,90,.95);background:rgba(196,169,111,.08)}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ---------- Footer ---------- */
.site-foot{
  background:linear-gradient(160deg,#241C10 0%,#2E2314 100%);
  color:#CFC2A6;margin-top:70px;padding:52px 0 32px;font-size:.94rem;
  position:relative;overflow:hidden;
}
.site-foot::before{
  content:"";position:absolute;inset-inline-start:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brass),var(--gold-line),var(--brass));
}
.site-foot a{color:#EFE3C8}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{color:#F2EAD8;font-size:1rem;margin-bottom:.7em;font-family:'Frank Ruhl Libre',serif;font-weight:700}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.5em}
.disclaimer{border-top:1px solid rgba(196,169,111,.25);margin-top:34px;padding-top:20px;color:#A5987C;font-size:.86rem}

/* ---------- Utilities ---------- */
.center{text-align:center}
.mt0{margin-top:0}
.small{font-size:.9rem;color:var(--muted)}
hr{border:0;border-top:1px solid var(--hairline);margin:36px 0}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  h1 .wi{transform:none;transition:none}
  .hero .glass-wrap::after{animation:none;display:none}
  .hero .glow{display:none}
  .hero-topo,.hero-topo path{animation:none}
  .hero-topo path{opacity:var(--o0)}
  .photo{animation:none;opacity:1;transform:none}
  .arch-win{transform:none!important}
  .bob,.dood{animation:none}
  .dood{opacity:.75}
  .mq-track{transform:none!important}
  .cur-dot,.cur-ring{display:none}
}

/* ---------- מקורות אקדמיים ---------- */
h2#sources{
  margin-top:2.4em;padding-top:1.1em;border-top:1px solid var(--hairline);
  border-bottom:none;font-size:1.35rem;
}
ol.sources{
  margin:14px 0 0;padding:22px 26px 22px 22px;list-style-position:outside;
  background:rgba(255,253,248,.8);border:1px solid var(--glass-border);
  border-inline-start:3px solid var(--gold-line);
  box-shadow:0 16px 34px -28px rgba(60,45,20,.4);
  font-size:.9rem;color:var(--ink-2);
}
ol.sources li{margin:0 0 .85em;line-height:1.65;padding-inline-start:4px}
ol.sources li:last-child{margin-bottom:0}
ol.sources .src-t{font-weight:700;color:var(--ink);display:inline}
ol.sources em{color:var(--ink-2)}
ol.sources a{
  color:var(--brass-dk);font-weight:700;white-space:nowrap;
  text-decoration:none;border-bottom:1px solid rgba(119,89,44,.35);
}
ol.sources a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.note.med-disc{
  margin-top:26px;background:rgba(243,238,228,.75);
  border:1px solid var(--hairline);border-inline-start:3px solid var(--brass);
  font-size:.92rem;
}
.note.med-disc strong{color:var(--ink)}

/* ---------- למי האתר הזה: פורטרטים בקשתות + מוח דיאגרמטי ---------- */
.kicker{display:block;font-size:.76rem;letter-spacing:.24em;font-weight:800;color:var(--brass-dk);margin-bottom:12px}
.legend{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend .sw{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.legend .sw.gray{background:#AEB6C0}
.legend .sw.blue{background:#2F7FDB}
.legend .sw.red{background:#E04432}

.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.persona{
  background:rgba(255,253,248,.82);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-soft);padding:18px 20px 24px;text-align:center;
  perspective:1000px;
}
.persona h3{font-size:1.28rem;margin:0 0 8px}
.persona p{font-size:.95rem;color:var(--ink-2);margin:0 0 14px;line-height:1.7}
.persona .more{font-size:.88rem;font-weight:800;color:var(--brass-dk);text-decoration:none}
.persona .more:hover{color:var(--ink)}

.arch-win{
  position:relative;height:300px;margin-bottom:18px;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.22,.9,.3,1);
  border-radius:999px 999px 2px 2px;overflow:hidden;
  background:linear-gradient(180deg,#F0E4CD,#DCC69E);
  border:1px solid rgba(150,118,72,.35);
}
.p-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:sepia(.2) saturate(.92) contrast(1.02);
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.19,.8,.22,1);
}
.persona:hover .p-photo{transform:scale(1)}
.p-tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(255,253,248,.9) 0%,rgba(255,253,248,0) 26%),
             linear-gradient(180deg,rgba(240,228,205,.3) 0%,rgba(160,120,60,.2) 100%);
}
.p-ring{position:absolute;inset:0;border-radius:999px 999px 2px 2px;border:1.5px solid rgba(169,136,90,.45);pointer-events:none}
.p-ring.r1{transform:scale(.97);opacity:.65}
.p-ring.r2{transform:scale(.93);opacity:.3}

.brain-hold{
  position:absolute;top:6px;left:50%;width:112px;height:92px;margin-left:-56px;
  perspective:520px;animation:brainBob 3.6s ease-in-out infinite;pointer-events:none;
}
.brain-spin{display:block;width:100%;height:100%;animation:brainTurn 8s ease-in-out infinite;transform-style:preserve-3d}
.brain-spin svg{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 12px rgba(60,45,20,.3))}
/* נדנוד ולא סיבוב מלא: SVG שטוח נעלם כשהוא ניצב למסך */
@keyframes brainTurn{0%,100%{transform:rotateY(-26deg)}50%{transform:rotateY(26deg)}}
@keyframes brainBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:900px){.personas{grid-template-columns:1fr;gap:20px;max-width:460px;margin-inline:auto}
  .arch-win{height:270px}}
@media (prefers-reduced-motion: reduce){
  .brain-hold,.brain-spin{animation:none}
  .p-photo{transition:none;transform:none}
  .arch-win{transition:none}
}

/* ===========================================================
   נגישות ורספונסיביות - יעדי מגע, גודל טקסט מינימלי, ניווט בטאבלט
   =========================================================== */

/* תגיות קטגוריה: לא לרדת מתחת ל-12px */
/* rem נגזר משורש 16px, לכן .8rem = 12.8px - מעל מינימום הקריאות */
.chip{font-size:.8rem}
@media(max-width:900px){ .chip{font-size:.86rem} }

/* יעדי מגע: קישורים "עצמאיים" (ניווט/פוטר/תוכן עניינים/CTA של כרטיס).
   קישורים בתוך פסקאות רצות פטורים לפי WCAG 2.5.8 ולכן לא מרופדים,
   כדי לא לשבור את מרווח השורות בטקסט. */
.card .more,.persona .more,.idx-item,.toc a,.site-foot li a,.legend li{
  display:inline-block;
}
.card .more,.persona .more,.toc a,.site-foot li a{
  padding-block:7px;
}
@media(max-width:900px){
  .card .more,.persona .more,.toc a{padding-block:11px;min-height:24px}
  .site-foot li a{padding-block:10px}
  .site-foot li{margin-bottom:.15em}
  .nl-form button,.btn{min-height:48px}
  .opt{min-height:44px;display:inline-flex;align-items:center}
  .calc-field select,.calc-field input[type=number]{min-height:48px}
}

/* טאבלטים מקבלים את תפריט המגירה הנוח, לא את תפריט הדסקטופ הצפוף */
@media(min-width:761px) and (max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(252,250,244,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 20px 40px -20px rgba(40,30,15,.35);
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav a{padding:17px 24px;border-bottom:1px solid var(--hairline);font-size:1.05rem}
  .nav a::after{display:none}
  .nav .cta{border-radius:2px;text-align:center;margin:14px 22px 18px;padding:14px 18px}
}

/* ===== המוח התלת-ממדי בעמוד הבית =====
   פס כהה: הזכוכית של המוח בנויה על בלנדינג חיבורי, שעובד רק על רקע כהה. */
#brainband{color:#DCE5EF;border-block:2.5px solid #000;
  padding-block:clamp(48px,7vw,86px);
  /* שחור עמוק עם הילה חמה דקה - הזכוכית של המוח בולטת רק על רקע כהה באמת */
  background:
    radial-gradient(78% 62% at 50% 6%, rgba(196,169,111,.11) 0%, rgba(196,169,111,0) 62%),
    linear-gradient(180deg,#0A0C11 0%,#05070A 46%,#000 100%)}
#brainband .kicker{color:#C4A96F}
#brainband h2{color:#F3ECE0}
.b3-head{max-width:60ch;margin-inline:auto;text-align:center}
.b3-head p{color:#A9B8C9}

.b3-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:clamp(18px,3vw,34px) auto 0;max-width:1040px}
@media(max-width:820px){.b3-pair{grid-template-columns:1fr}}
.b3-cap{color:#EFE7D8;font-weight:800;font-size:1.02rem;text-align:center;
  padding:14px 10px 0;margin:0;position:relative;z-index:2}
.b3-cap span{display:block;font-weight:700;font-size:.78rem;color:#93A5B8;
  letter-spacing:.04em;margin-top:3px}
.b3.adhd .b3-cap{color:#FFD9CF}
.b3{position:relative;margin:0;
  aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:radial-gradient(66% 54% at 50% 44%,#11161F 0%,#070910 44%,#000 100%);
  border:1px solid rgba(196,169,111,.24);
  /* ויניטה פנימית שמכהה את הפינות, ומעט עומק מתחת למסגרת */
  box-shadow:inset 0 0 110px 34px rgba(0,0,0,.88), 0 26px 64px -34px rgba(0,0,0,.9)}
.b3-cv{display:block;width:100%;height:calc(100% - 52px);touch-action:pan-y}
.b3-msg{display:none;position:absolute;inset-block-start:47%;inset-inline:0;margin:0;
  text-align:center;color:#8FA3B8;font-size:.9rem;font-weight:700}
.b3-loading .b3-msg,.b3-off .b3-msg{display:block}
.b3-off .b3-cv{display:none}

.b3-legend{justify-content:center;margin-top:18px;color:#B9C6D4}
.b3-legend .sw.gray{background:#9FB2C6}
.b3-legend .sw.blue{background:#3E8BE0}
/* אותה סקאלה חמה שבה נצבעים האזורים בתלת-ממד */
.b3-legend .sw.hotbar{width:74px;height:11px;border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(to left,#2B0C33,#B8244A,#F05E3A,#FF992C,#FFF6D2)}

.b3-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
#brainband .btn.ghost{background:transparent;color:#EBDFC9;border:1px solid rgba(235,223,201,.42)}
#brainband .btn.ghost:hover{background:rgba(235,223,201,.1)}
.b3-note{max-width:66ch;margin:16px auto 0;text-align:center;
  font-size:.82rem;line-height:1.7;color:#8497A9}

@media(max-width:820px){ .b3{aspect-ratio:5/4} }
@media(max-width:640px){
  .b3{aspect-ratio:1/1;border-radius:12px}
  .b3-actions .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .b3-cv{cursor:default} }

/* שדה מלכודת לבוטים בטופס הניוזלטר. מוסתר מהעין ומקוראי מסך, וממולא
   על ידי בוטים. משתמש בטכניקת clip ולא במיקום מחוץ למסך, כי במסמך RTL
   מיקום שלילי יוצר גלישה אופקית. */
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* כותרות פאנלי המוח קודמו מ-h3 ל-h2 כדי לתקן קפיצת היררכיה אחרי ה-h1.
   הגודל והמרווח נשמרים כפי שהיו, כדי שהמראה בפאנל לא ישתנה. */
.brain-cell h2{font-size:clamp(1.2rem,1.08rem + .6vw,1.5rem);margin-top:0}

/* הקדשה בעמוד "מי אנחנו". מכוון מאופק: קו צד דק במקום תיבה צבעונית,
   כדי שלא ייראה כמו הודעת מערכת או באנר שיווקי. */
.dedication{
  border-inline-start:3px solid var(--sun);
  padding:2px 18px;
  margin:1.4em 0 2em;
}
.dedication p{
  margin:0;
  color:var(--ink-2);
  font-size:1.04rem;
  line-height:1.85;
}

/* ---------------- המוח בגיבור: מוח זכוכית על רקע האתר ---------------- */
.hero-side{display:flex;flex-direction:column;gap:22px}
.hero-brain{margin:0;background:none;border:0;box-shadow:none}
/* 23/08: הלוח הכחול ירד. המוח עומד על רקע האתר עצמו, כלומר על השנהב
   ועל הפס האלכסוני שמאחוריו, בלי קופסה ובלי צבע שאינו בפלטה. */
.hero-brain .bh-box{
  position:relative;aspect-ratio:1/1;width:100%;
  border-radius:18px;isolation:isolate;
  background:none;
  box-shadow:none;
}
.hero-brain .bh-cv{
  position:absolute;inset:0;z-index:1;
  display:block;width:100%;height:100%;
  touch-action:pan-y;
}
/* התווית וההנחיה היו תכולות כדי להיקרא על כחול. על שנהב הן חוזרות
   לשפה של .chip: פליז כהה עם קו זהב, בלי גלולה צבעונית. */
.hero-brain .bh-tag{
  position:absolute;z-index:2;inset-block-start:6px;inset-inline-start:6px;
  padding:0 0 5px;border-radius:0;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;
  color:var(--brass-dk);background:transparent;
  border-bottom:1.5px solid var(--gold-line);
}
.hero-brain .bh-hint{
  position:absolute;z-index:2;inset-block-end:6px;inset-inline-end:8px;margin:0;
  font-size:.76rem;font-weight:700;color:var(--muted);
}
.hero-brain .bh-credit{
  margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted);letter-spacing:.01em;
}
.hero-brain.bh-off .bh-cv{display:none}
.hero-brain.bh-off .bh-hint{display:none}
@media(max-width:900px){
  .hero-brain{max-width:420px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero-brain .bh-hint{display:none}
}

/* ===== שער "לקראת שנת הלימודים" =====
   ציר זמן ולא רשימת מאמרים: כל שלב נושא תווית "מתי", כדי שהקורא ידע איפה הוא
   עומד בלי לקרוא את כל הדף. */
.bts-step{margin:0 0 clamp(26px,4vw,40px);padding-inline-start:18px;
  border-inline-start:3px solid var(--gold-line)}
.bts-step h2{margin:.15em 0 .4em}
.bts-when{display:inline-block;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;color:var(--brass-dk);text-transform:none}
.bts-also{margin:0 0 1.6em;padding-inline-start:1.1em}
.bts-also li{margin-bottom:.5em}

/* ===========================================================
   קן גדית - הגיבור הרגשי ותיבת הפעולה (nest-anchor.js)
   העיקרון: מעל הקיפול יש בדיוק שני דברים - משפט אחד שמסביר למי זה,
   ותיבה אחת שאפשר לכתוב בה. כל השאר יורד מתחת לקו.
   =========================================================== */
.nest-hero{position:relative;padding:clamp(26px,3.4vw,52px) 0 clamp(38px,5vw,64px);
  overflow:hidden;text-align:center}
/* אין כאן ::before משלנו בכוונה. הקנבס של המוח שקוף, ולכן מה שמונח מאחוריו
   צובע את הזכוכית הכחולה. פס החול המקורי של .hero::before הוא הרקע שהמוח
   נראה עליו מאז שהוא נבנה, וכל שכבה חדשה מעליו משנה את צבע המוח. */
.nest-hero .wrap{position:relative;z-index:1}
.nest-in{max-width:1080px;margin-inline:auto}

.nest-eyebrow{display:inline-flex;align-items:center;gap:.5em;margin:0 0 10px;
  font-size:.82rem;font-weight:700;letter-spacing:.08em;color:var(--brass-dk)}
.nest-eyebrow::before,.nest-eyebrow::after{content:"";width:26px;height:1px;
  background:var(--gold-line)}

.nest-hero .nest-h1{margin:0 0 .26em;max-width:18ch;margin-inline:auto}
.nest-hero .nest-lede{margin:0 auto 8px;max-width:44ch;
  font-size:clamp(1.04rem,.98rem + .4vw,1.24rem);font-weight:600;color:var(--ink-2)}
.nest-sig{margin:0 auto clamp(20px,2.6vw,28px);max-width:52ch;font-size:.94rem;color:var(--muted)}

/* ---------- הבמה: התיבה והמוח זה לצד זה ---------- */
/* המוח יושב ליד התיבה ולא מעליה, כדי שהדבר הראשון שהעין פוגשת יישאר השדה
   שאפשר לכתוב בו. בטלפון הוא יורד מתחת לתיבה מאותה סיבה. */
.nest-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px);
  gap:clamp(18px,2.4vw,34px);align-items:center;text-align:start}
.nest-stage .anchor{margin-inline:0;max-width:none}
.nest-stage .hero-brain{margin:0;max-width:290px;width:100%}
@media(max-width:900px){
  .nest-stage{grid-template-columns:1fr;justify-items:center}
  .nest-stage .anchor{max-width:720px;width:100%}
  .nest-stage .hero-brain{max-width:260px}
}

/* ---------- תיבת העוגן ---------- */
.anchor{max-width:720px;margin-inline:auto;text-align:start;min-width:0;
  background:var(--card);border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-big)}
.anchor-q{margin:0 0 16px;font-size:clamp(1.22rem,1.05rem + .9vw,1.72rem);
  line-height:1.3;text-align:center}
.anchor-form{display:flex;flex-direction:column;gap:14px}
.anchor-field{position:relative}
#anchor-in{width:100%;min-height:74px;max-height:180px;resize:none;overflow:auto;
  padding:16px 18px;border:2px solid var(--sand);border-radius:12px;
  background:var(--ivory);color:var(--ink);
  font-family:inherit;font-size:1.06rem;line-height:1.6}
#anchor-in::placeholder{color:var(--muted);opacity:1}
#anchor-in:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 4px rgba(169,136,90,.18)}
.anchor-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.anchor-go{flex:1 1 240px;min-height:56px;padding:0 26px;border:0;border-radius:12px;
  background:var(--aubergine);color:#fff;cursor:pointer;
  font-family:inherit;font-size:1.12rem;font-weight:800;letter-spacing:.01em;
  transition:transform .12s ease,background .2s ease}
.anchor-go:hover{background:#160f1d}
.anchor-go:active{transform:translateY(1px)}
.anchor-go:disabled{opacity:.72;cursor:progress}
.anchor-mic{min-height:56px;padding:0 18px;border:2px solid var(--sand);border-radius:12px;
  background:var(--card);color:var(--ink-2);cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:700}
.anchor-mic.on{border-color:var(--brass);color:var(--brass-dk)}
.anchor-hint{margin:2px 0 0;font-size:.86rem;color:var(--muted);text-align:center}

/* ---------- טעינה ---------- */
.anchor-out{margin-top:20px}
.anchor-load{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem}
.anchor-load p{margin:0}
.anchor-load .dot{width:8px;height:8px;border-radius:50%;background:var(--brass);
  animation:anchor-pulse 1s infinite ease-in-out}
.anchor-load .dot:nth-child(2){animation-delay:.15s}
.anchor-load .dot:nth-child(3){animation-delay:.3s}
@keyframes anchor-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---------- שלושת הצעדים ---------- */
.anchor-card{border-top:1px solid var(--hairline);padding-top:18px;
  animation:anchor-in .28s ease both}
@keyframes anchor-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.anchor-card.is-crisis{border-top-color:var(--brass);background:rgba(196,169,111,.10);
  border-radius:12px;padding:18px}
.anchor-intro{margin:0 0 14px;font-weight:600;color:var(--ink-2)}
.anchor-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.anchor-step{margin:0}
.anchor-step .anchor-check{position:absolute;opacity:0;width:1px;height:1px}
.anchor-step label{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding:14px 16px;border:1.5px solid var(--hairline);border-radius:12px;
  background:var(--ivory);transition:border-color .18s ease,background .18s ease}
.anchor-step label:hover{border-color:var(--brass)}
.anchor-check:focus-visible + label{outline:3px solid var(--brass);outline-offset:2px}
.anchor-num{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--aubergine);color:#fff;font-weight:800;font-size:.98rem}
.anchor-body{display:flex;flex-direction:column;gap:3px}
.anchor-body b{font-size:1.06rem;line-height:1.4}
.anchor-detail{color:var(--ink-2);font-size:.96rem}
.anchor-time{font-size:.8rem;font-weight:700;color:var(--brass-dk)}
.anchor-step.done label{background:rgba(169,136,90,.13);border-color:var(--brass)}
.anchor-step.done .anchor-body b{text-decoration:line-through;color:var(--muted)}
.anchor-step.done .anchor-num{background:var(--brass);font-size:0}
.anchor-step.done .anchor-num::after{content:"\2713";font-size:1.05rem}

.anchor-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.anchor-speak,.anchor-again{display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:0 16px;border:2px solid var(--sand);border-radius:10px;
  background:var(--card);color:var(--ink-2);cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:700}
.anchor-speak.on{border-color:var(--brass);background:rgba(196,169,111,.16);color:var(--ink)}
.anchor-note{margin:14px 0 0;font-size:.84rem;color:var(--muted)}
.anchor-card.is-err .anchor-intro{color:var(--ink)}

/* ---------- שלוש דלתות מתחת לקיפול ---------- */
.nest-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:760px;margin:clamp(26px,4vw,38px) auto 0}
.nest-door{display:block;padding:16px 14px;text-align:center;text-decoration:none;
  border:1.5px solid var(--hairline);border-radius:12px;background:var(--card);
  color:var(--ink);font-weight:700;font-size:.98rem;
  transition:border-color .18s ease,transform .18s ease}
.nest-door:hover{border-color:var(--brass);transform:translateY(-2px);color:var(--ink)}
.nest-door small{display:block;margin-top:3px;font-weight:600;font-size:.8rem;color:var(--muted)}

@media(max-width:640px){
  .nest-doors{grid-template-columns:1fr}
  .anchor{border-radius:14px}
  .anchor-go{flex:1 1 100%}
  .anchor-mic{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .anchor-card,.anchor-load .dot{animation:none}
  .nest-door:hover{transform:none}
}

/* טקסט לקורא מסך בלבד. בניגוד ל-.skip הוא לא קופץ למסך בפוקוס, ולכן הוא
   מתאים לתוויות ולהכרזות ולא לקישור דילוג. */
.vh{position:absolute;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}

/* מדיניות העריכה מקופלת. היא חשובה לאמון אבל אף אחד לא צריך לקרוא 200 מילים
   בדרך למדריך. ההבהרה הרפואית שמתחתיה נשארת גלויה תמיד. */
.policy{margin:0 0 1.2em;padding:12px 16px;border:1px solid var(--hairline);
  background:rgba(255,253,248,.55);font-size:.94rem;line-height:1.7}
.policy summary{cursor:pointer;color:var(--brass-dk);font-weight:800}
.policy p{margin:12px 0 0}