/* ==================================================================
   המטע — שפת העיצוב, לפי אתר רימון rimonmh.co.il
   הפונטים מוטמעים ב-style-fonts.css ומוזרקים לפני הגיליון הזה.
   ================================================================== */

:root{
  --cream:#FFFDF7;          /* רקע שמנת חמים */
  --paper:#FFFFFF;
  --card:#F5F0E3;           /* מילוי הכרטיסים — אפור־חיטה חמים */
  --ink:#0E0D0C;            /* שחור כמעט מלא */
  --ink-soft:#4A4542;
  --red:#E2170B;            /* האדום של הרצועה והכפתור */
  --red-soft:#FBE4E1;
  --grey:#8C8781;
  --line:#E4DFD5;
  --line-2:#C9C2B7;
  --shadow:none;
  --acc:#C9992E;          /* חיטה — הגוון הכפרי. לא צבע פעולה: האדום נשאר כזה. */
  --acc-soft:#F5EBD2;
  --peel:#F3EAD8;         /* קליפת הרימון, בגוון חיטה חם */
  --peel-2:#E3D3B4;
  --frame:#E3D6B8;        /* קווי המסגרת */
  --seed:#E2170B;         /* גרעין תפקיד */
  --seed-2:#8E1109;       /* גרעין תחום — יין עמוק, לא שחור */
  --display:"Danidin","Secular One",system-ui,sans-serif;
  --display-w:700;
  /* הכותרות הגדולות ב-Danidin Condensed Bold — צפוף וכבד, כמו באתר */
  --hero:"DanidinC","Danidin",system-ui,sans-serif;
  --body:"Futurism","Heebo",system-ui,sans-serif;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#141210; --paper:#1C1917; --card:#221E1B;
    --ink:#F4EFE8; --ink-soft:#BDB4AA;
    --red:#FF4B3A; --red-soft:#3A1D18;
    --grey:#948C84; --line:#332C27; --line-2:#443B34;
    --peel:#26211A; --peel-2:#3A3123;
    --acc:#D9AE4A; --acc-soft:#2A2417; --frame:#3A3226;
    --seed:#FF4B3A; --seed-2:#A8382C;
  }
}
:root[data-theme="dark"]{
  --cream:#141210; --paper:#1C1917; --card:#241F17;
  --ink:#F4EFE8; --ink-soft:#BDB4AA;
  --red:#FF4B3A; --red-soft:#3A1D18;
  --grey:#948C84; --line:#332C27; --line-2:#443B34;
  --peel:#26211A; --peel-2:#3A3123;
  --acc:#D9AE4A; --acc-soft:#2A2417; --frame:#3A3226;
  --seed:#FF4B3A; --seed-2:#A8382C;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}

/* ---------- הכותרת העליונה ---------- */
.top{background:var(--cream); position:sticky; top:0; z-index:40}
.top .wrap{display:flex; align-items:center; gap:12px; min-height:70px; flex-wrap:wrap}
.brand{display:block; text-decoration:none; order:1}
.brand img{height:40px; width:auto; display:block}
.top nav{
  margin-inline-start:auto; order:2;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.nl{
  text-decoration:none; font-size:14.5px; color:var(--ink);
  padding:6px 3px; white-space:nowrap;
}
.nl:hover{color:var(--red)}
.nav-b{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-family:var(--body); font-size:13.5px; padding:7px 13px;
  cursor:pointer; text-decoration:none; border-radius:0;
}
.nav-b:hover{background:var(--ink); color:var(--cream)}
.nav-b.wa svg{color:var(--red)}
.nav-b.wa:hover svg{color:var(--cream)}
/* הקיצור למדף הפרטי — נוכח, אבל לא צועק יותר מהאדום של הכניסה */
.nav-b.shelf-l{
  background:var(--gold-b); border-color:var(--gold-line); color:var(--ink);
  font-family:var(--display); font-weight:var(--display-w);
  max-width:32ch; overflow:hidden; text-overflow:ellipsis;
}
.nav-b.shelf-l svg{color:var(--gold); flex:none}
.nav-b.shelf-l:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.nav-b.shelf-l:hover svg{color:var(--acc)}

/* קפיצה לעוגן — שהכותרת לא תיחתך מתחת לסרגל העליון */
#shelf{scroll-margin-top:22px}

.nav-b.solid{background:var(--red); border-color:var(--red); color:#fff}
.nav-b.solid:hover{filter:brightness(1.08); background:var(--red); color:#fff}

/* ---------- הירו ---------- */
.hero{padding:22px 0 26px; overflow:hidden}
.hero-in{display:grid; gap:26px; align-items:center}
@media(min-width:900px){ .hero-in{grid-template-columns:1.05fr .95fr; gap:34px} }
.hero-txt{order:1}
.hero-art{order:2; color:var(--red); display:none; position:relative}
@media(min-width:900px){ .hero-art{display:block} }
.hero-art svg{width:100%; height:auto; max-height:330px; display:block}
.hero h1{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:clamp(52px,7.6vw,102px); line-height:.94;
  letter-spacing:-.015em; margin:0 0 14px;
}
.hero .tag{
  font-size:clamp(17px,1.9vw,23px); line-height:1.35; font-weight:500;
  margin:0 0 24px; max-width:22ch;
}
.hero .tag em{font-style:normal; color:var(--red)}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:#fff; border:0; border-radius:0;
  font-family:var(--body); font-size:15px; padding:12px 22px; cursor:pointer;
}
.cta:hover{filter:brightness(1.09)}
.cta-note{font-size:13px; color:var(--grey); margin:11px 0 0; max-width:52ch}

/* ---------- הרצועה האדומה ---------- */
.band{
  background:var(--red); color:#fff; overflow:hidden; padding:11px 0;
  /* נצמדת לעמודת התוכן ולקווי המסגרת, במקום להימתח מקצה לקצה */
  max-width:var(--wrap); margin-inline:auto;
}
.band-run{
  display:flex; align-items:center; gap:20px; width:max-content;
  animation:bandrun 42s linear infinite;
}
.band-run span{
  font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(15px,1.5vw,18px); white-space:nowrap;
}
.band-run i{font-style:normal; opacity:.6; font-size:11px}
@keyframes bandrun{ from{transform:translateX(0)} to{transform:translateX(50%)} }
@media (prefers-reduced-motion:reduce){ .band-run{animation:none} }

/* ---------- כותרות מקטע ---------- */
.eyebrow{
  display:inline-block; color:var(--ink);
  /* Futurism ב-13px נקרא דק מדי — התווית עוברת ל-Danidin Bold */
  font-family:var(--display); font-weight:var(--display-w);
  font-size:14px; letter-spacing:.015em;
  border-bottom:2px solid var(--red); padding-bottom:3px;
  margin:46px 0 16px;
}
h2.big{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:clamp(24px,2.9vw,36px); line-height:1.16;
  margin:0 0 22px; max-width:26ch;
}

/* ---------- ארבעת העמודים ---------- */
.pillars{display:grid; gap:0; border:1px solid var(--line); border-inline-start:0}
@media(min-width:760px){ .pillars{grid-template-columns:repeat(4,1fr)} }
.pillar{
  background:var(--card); padding:20px 19px 22px;
  border-inline-start:1px solid var(--line); border-top:1px solid var(--line);
}
@media(min-width:760px){ .pillar{border-top:0} }
.pillar:first-child{border-top:0}
.pillar .pi{width:19px; height:19px; color:var(--ink); display:block; margin-bottom:13px}
.pillar .pi .r{fill:var(--red)}
.pillar .pi .rs{stroke:var(--red)}
.pillar h3{font-family:var(--display); font-weight:var(--display-w); font-size:18px; margin:0 0 7px}
.pillar p{margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-soft)}

/* ---------- המסלולים ---------- */
.tracks{display:grid; gap:0; margin-bottom:64px; border:1px solid var(--line)}
@media(min-width:900px){ .tracks{grid-template-columns:1fr 1fr} }
.track{
  background:var(--paper); padding:24px 22px 20px;
  border-top:1px solid var(--line); position:relative;
}
.track:first-child{border-top:0}
@media(min-width:900px){
  .track:nth-child(2){border-top:0}
  .track:nth-child(odd){border-inline-start:1px solid var(--line)}
}
.track .kicker{font-size:12.5px; color:var(--red); margin-bottom:5px}
.track h2{font-family:var(--display); font-weight:var(--display-w); font-size:24px; margin:0 0 8px; line-height:1.18}
.track .blurb{color:var(--ink-soft); font-size:14px; margin:0 0 15px}
.track .meter{height:3px; background:var(--line); overflow:hidden; margin-bottom:12px}
.track .meter i{display:block; height:100%; background:var(--red); width:0; transition:width .4s}

.unit{
  display:flex; gap:11px; align-items:flex-start; text-decoration:none;
  padding:11px 0; border-top:1px solid var(--line); color:inherit;
}
.unit:first-of-type{border-top:0}
.unit .num{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--line-2); font-size:12.5px; color:var(--grey); margin-top:2px;
}
.unit.done .num{background:var(--red); border-color:var(--red); color:#fff}
.unit .t{font-size:15.5px; font-weight:600; line-height:1.35}
.unit .s{font-size:13.5px; color:var(--grey); margin-top:3px; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.unit:hover .t{color:var(--red)}
.lock{
  font-size:11.5px; padding:2px 9px; background:var(--red-soft);
  color:var(--red); border:1px solid transparent;
}
.open-b{font-size:11.5px; padding:2px 9px; background:var(--cream); border:1px solid var(--line); color:var(--grey)}

/* ---------- דף יחידה ---------- */
.crumbs{padding:26px 0 0; font-size:14px; color:var(--grey)}
.crumbs a{color:var(--grey); text-decoration:none}
.crumbs a:hover{color:var(--red)}
.doc{max-width:720px; margin:0 auto; padding:0 22px 70px}
.doc h1{font-family:var(--hero); font-weight:var(--display-w); font-size:clamp(28px,4vw,38px); line-height:1.12; margin:14px 0 10px}
.doc .meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:14px; color:var(--grey); margin-bottom:30px}
.doc .rule{height:1px; background:var(--line); margin:0 0 30px}
.doc h2{font-family:var(--display); font-weight:var(--display-w); font-size:22px; margin:38px 0 12px; line-height:1.25}
.doc p{margin:0 0 15px}
.doc .lead{font-size:17.5px; line-height:1.65; color:var(--ink); border-inline-start:3px solid var(--red); padding-inline-start:16px; margin-bottom:26px}
.doc em{font-style:normal; background:linear-gradient(transparent 62%, var(--red-soft) 0); padding:0 2px}

ul.ticks{list-style:none; padding:0; margin:0 0 18px}
ul.ticks li{position:relative; padding-inline-start:26px; margin-bottom:11px}
ul.ticks li::before{
  content:""; position:absolute; inset-inline-start:6px; top:12px;
  width:7px; height:7px; border-radius:50%; background:var(--red);
}

.steps{display:grid; gap:13px; margin:0 0 22px}
.steps > div{display:flex; gap:14px; align-items:flex-start}
.steps span{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-size:16px; margin-top:2px;
}

.callout{
  background:var(--paper); border:1px solid var(--line); border-inline-start:3px solid var(--red);
  border-radius:0; padding:16px 18px; margin:24px 0; font-size:16px;
}

table{width:100%; border-collapse:collapse; margin:6px 0 24px; font-size:15.5px; display:block; overflow-x:auto}
thead th{
  text-align:right; font-weight:600; font-size:13.5px; color:var(--grey);
  padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.6}
tbody tr:last-child td{border-bottom:0}

.compare{display:grid; gap:12px; margin:6px 0 22px}
@media(min-width:620px){ .compare{grid-template-columns:1fr 1fr} }
.compare > div{border:1px solid var(--line); border-radius:0; padding:14px 16px; background:var(--paper)}
.compare span{display:block; font-size:12.5px; font-weight:700; letter-spacing:.3px; margin-bottom:5px; color:var(--grey)}
.compare .good{border-color:var(--red)}
.compare .good span{color:var(--red)}
.compare p{margin:0; font-size:16px}

.tmpl{border:1px solid var(--line); border-radius:0; overflow:hidden; margin:20px 0 26px; background:var(--paper)}
.tmpl-h{
  display:flex; align-items:center; gap:10px; padding:11px 15px;
  background:color-mix(in srgb, var(--cream) 60%, var(--paper));
  border-bottom:1px solid var(--line); font-size:14.5px; font-weight:600;
}
.tmpl-h .copy{
  margin-inline-start:auto; font-family:var(--body); font-size:13px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:4px 12px; border-radius:999px; transition:.15s;
}
.tmpl-h .copy:hover{border-color:var(--red); color:var(--red)}
.tmpl-h .copy.ok{background:var(--red); border-color:var(--red); color:#fff}
.tmpl pre{
  margin:0; padding:16px 18px; font-family:ui-monospace,"Menlo",monospace;
  font-size:13.5px; line-height:1.85; white-space:pre-wrap; word-break:break-word;
  direction:rtl; text-align:right;
}

/* הניווט והסימון יושבים ברשת אחת רציפה, כמו שאר הדפים —
   מסגרת חיצונית אחת וקווים מפרידים, בלי רווחים מרחפים. */
.docfoot{margin-top:44px; border:1px solid var(--line); background:var(--paper)}
.mark{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; cursor:pointer; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink);
  font-family:var(--body); font-size:14.5px; padding:14px 16px;
}
.mark::before{
  content:""; width:15px; height:15px; border:1px solid var(--line-2); flex:none;
}
.mark:hover{background:var(--card)}
.mark.on{background:transparent; color:var(--red)}
.mark.on::before{background:var(--red); border-color:var(--red)}
.docnav{display:grid; gap:0}
@media(min-width:620px){ .docnav{grid-template-columns:repeat(3,1fr)} }
.docnav a{
  text-decoration:none; padding:16px 18px; background:transparent;
  border-top:1px solid var(--line); border-inline-start:1px solid var(--line);
}
@media(min-width:620px){ .docnav a{border-top:0} }
.docnav a:first-child{border-inline-start:0}
@media(max-width:619px){ .docnav a{border-inline-start:0} .docnav a:first-child{border-top:0} }
.docnav small{display:block; font-size:12px; color:var(--grey); margin-bottom:3px}
.docnav b{display:block; font-family:var(--display); font-weight:var(--display-w); font-size:17px; line-height:1.25}
.docnav a:hover{background:var(--card)}
.docnav a:hover b{color:var(--red)}

/* ---------- שער נעילה ---------- */
.gate{
  max-width:560px; margin:40px auto 80px; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  padding:44px 30px; box-shadow:var(--shadow);
}
.gate .ico{font-size:30px; margin-bottom:8px}
.gate h2{font-family:var(--display); font-weight:var(--display-w); font-size:28px; margin:0 0 10px}
.gate p{color:var(--ink-soft); font-size:16px; margin:0 auto 22px; max-width:420px}
.codeform{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}
.codeform input{
  font-family:var(--body); font-size:17px; letter-spacing:3px; text-align:center;
  padding:12px 16px; border-radius:0; border:1px solid var(--line);
  background:var(--cream); color:var(--ink); width:190px; direction:ltr;
}
.codeform input:focus{outline:2px solid var(--red); outline-offset:1px}
.codeform button{
  font-family:var(--body); font-size:16px; padding:12px 26px; border-radius:0;
  border:0; background:var(--red); color:#fff; cursor:pointer;
}
.err{color:var(--red); font-size:14.5px; margin-top:14px; min-height:20px}
.gate .peek{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); text-align:start}
.gate .peek h3{font-size:14px; color:var(--grey); margin:0 0 8px; font-weight:600}
.gate .peek p{margin:0; font-size:15.5px; color:var(--ink-soft); text-align:start}

/* ---------- תחתית ---------- */
footer{border-top:1px solid var(--line); padding:26px 0 40px; font-size:14px; color:var(--grey)}
footer .wrap{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
footer a{color:var(--grey)}
footer .who{margin-inline-start:auto}
footer .rights{
  display:block; color:var(--grey); font-size:12.5px; line-height:1.6;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}

/* ---------- מודאל כניסה ---------- */
.modal{position:fixed; inset:0; background:rgba(26,22,20,.55); display:none; place-items:center; z-index:60; padding:20px}
.modal.show{display:grid}
.modal .mbox{
  position:relative; background:var(--paper); border:1px solid var(--gold-line);
  border-radius:0; padding:32px 28px 28px; max-width:420px; width:100%;
  text-align:center; box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;
}
.modal h3{font-family:var(--display); font-weight:var(--display-w); font-size:25px; margin:0 0 8px; line-height:1.2}
.modal p{color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin:0 0 20px}
.modal .x{position:absolute; top:12px; inset-inline-end:14px; width:30px; height:30px; background:none; border:0; font-size:23px; line-height:1; color:var(--grey); cursor:pointer}
.modal .x:hover{color:var(--ink)}

/* חלון ״יש לי הערה״ — טופס, ולכן ישר לימין ולא ממורכז */
.modal .mbox.say{max-width:470px; text-align:start}
.say-f{display:block}
.say-f textarea, .say-f input{
  width:100%; font:inherit; font-size:15.5px; line-height:1.6;
  border:1px solid var(--line); background:var(--cream); color:var(--ink);
  padding:11px 13px; border-radius:0; outline:none; box-sizing:border-box;
}
.say-f textarea{resize:vertical; min-height:118px; margin-bottom:10px}
.say-f textarea:focus, .say-f input:focus{border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft)}
.say-two{display:grid; gap:9px; margin-bottom:16px}
@media(min-width:460px){ .say-two{grid-template-columns:1fr 1fr} }
.say-two input{font-size:14.5px; padding:10px 12px; min-width:0}
.say-f .send{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:var(--display-w); font-size:15.5px;
  background:var(--red); color:#fff; border:1px solid var(--red);
  padding:11px 30px; cursor:pointer; border-radius:0;
}
.say-f .send:hover{filter:brightness(1.08)}
.modal .err{margin-top:12px; text-align:start}
.say-f .say-hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; padding:0; border:0; opacity:0}

@media print{
  .top,.docnav,.mark,.docfoot,footer,.crumbs{display:none}
  body{background:#fff}
  .doc{max-width:none}
  .tmpl-h .copy{display:none}
}

/* ---------- הנכס בתחתית היחידה ---------- */
.aud{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0}
.aud span{
  font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:3px 11px;
}
.asset{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:38px 0 8px; padding:20px 22px;
  border:1px solid var(--line); border-radius:0; background:var(--paper);
}
.asset-t{display:flex; align-items:center; gap:14px; min-width:0}
.asset-t b{display:block; font-family:var(--display); font-size:18px; font-weight:400}
.asset-t small{display:block; color:var(--ink-soft); font-size:13.5px; margin-top:3px}
.asset .ai{
  flex:none; width:40px; height:40px; border-radius:0; display:grid; place-items:center;
  background:var(--red-soft); color:var(--red); font-size:17px;
}
.asset-btn{
  flex:none; background:var(--red); color:#fff; text-decoration:none;
  border-radius:0; padding:11px 22px; font-size:15px; font-weight:500;
}
.asset-btn:hover{filter:brightness(1.08)}
.asset.ext{border-style:dashed}
.asset.ext .ai{background:transparent; border:1px solid var(--line); color:var(--ink-soft)}
.asset.ext .asset-btn{background:transparent; color:var(--ink); border:1px solid var(--line)}
@media(max-width:560px){
  .asset{flex-direction:column; align-items:stretch}
  .asset-btn{text-align:center}
}

/* ---------- המדף הפרטי של הלקוח ---------- */
.shelf{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2px 0 40px; margin-top:14px}
.shelf .eyebrow.mine{border-bottom-color:var(--red); color:var(--red)}
.shelf-b{color:var(--ink-soft); font-size:15px; max-width:64ch; margin:-10px 0 20px}
/* המדף הוא כרטיסים נפרדים על משטח, לא שורות ברשת אחת. הרווח
   ביניהם הוא מה שמבדיל בין מדף לבין רשימה. */
.shelf-g{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
@media(max-width:430px){ .shelf-g{grid-template-columns:1fr} }
.shelf-i{
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--paper); padding:13px 13px 11px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.shelf-i:hover{
  background:var(--cream); border-color:var(--gold-line);
  transform:translateY(-2px); box-shadow:0 4px 14px rgba(12,11,9,.08);
}
.shelf-i:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* הסמל. מרובע רך בגוון הפריט, עם הקו עצמו בצבע מלא. */
.shelf-i .face{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; margin-bottom:9px;
  background:var(--acc-soft); color:var(--gold);
  border:1px solid var(--gold-line);
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.shelf-i .face svg{width:17px; height:17px}
.shelf-i.t-red .face{background:#FBEAE8; color:var(--red); border-color:#F0C4BF}
.shelf-i.t-ink .face{background:var(--card); color:var(--ink); border-color:var(--line)}
.shelf-i:hover .face{background:var(--gold); color:#fff; border-color:var(--gold)}
.shelf-i.t-red:hover .face{background:var(--red); color:#fff; border-color:var(--red)}
.shelf-i.t-ink:hover .face{background:var(--ink); color:var(--cream); border-color:var(--ink)}

.shelf-i .bd{display:flex; flex-direction:column; gap:4px}
.shelf-i .k{font-size:11px; letter-spacing:.5px; color:var(--grey)}
.shelf-i b{font-family:var(--display); font-weight:var(--display-w); font-size:16px; line-height:1.24}
/* התקציר נחתך אחרי שתי שורות, כדי שכל הקוביות יישארו באותו גובה */
.shelf-i .s{
  font-size:13px; color:var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shelf-i .mt{font-size:11.5px; color:var(--grey)}

/* שורת הפעולה נדבקת לתחתית הכרטיס, כדי שכל הכרטיסים ייגמרו באותו קו. */
.shelf-i .go{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:var(--display-w); font-size:12.5px;
  color:var(--grey); margin-top:auto; padding-top:11px;
  transition:color .2s ease;
}
.shelf-i .go svg{transition:transform .2s ease}
.shelf-i:hover .go{color:var(--red)}
.shelf-i:hover .go svg{transform:translateX(-3px)}

/* ---------- לפי רגע: תחנות על נתיב ---------- */
/* בלי מסגרות. קו אחד עובר לרוחב, והתחנות יושבות עליו. */
.path{position:relative; display:grid; gap:26px; margin:0 0 12px; padding:6px 0 30px}
@media(min-width:760px){ .path{grid-template-columns:repeat(4,1fr); gap:0} }
.path::before{
  content:""; position:absolute; inset-inline:0; top:23px; height:1px;
  background:linear-gradient(to left,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);
  display:none;
}
@media(min-width:760px){ .path::before{display:block} }
.st{
  position:relative; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; align-items:flex-start;
  padding-inline-end:24px;
}
@media(min-width:760px){ .st{padding-inline-end:30px} }
.st-d{
  position:relative; z-index:1; width:46px; height:46px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--cream); border:1px solid var(--line-2);
  color:var(--red); font-size:17px; margin-bottom:15px;
  transition:background .22s, border-color .22s, color .22s, transform .22s;
}
.st:hover .st-d{background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px)}
.st-t{
  font-family:var(--display); font-weight:var(--display-w);
  font-size:23px; line-height:1.16; margin-bottom:5px;
}
.st:hover .st-t{color:var(--red)}
.st-s{font-size:12.5px; color:var(--grey)}
.st-1{
  font-size:13px; color:var(--ink-soft); margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); max-width:26ch;
  opacity:0; transform:translateY(-3px); transition:.24s ease;
}
@media(min-width:760px){ .st:hover .st-1{opacity:1; transform:none} }
@media(max-width:759px){ .st-1{opacity:1; transform:none} }

/* ---------- לפי תפקיד: אינדקס טיפוגרפי ---------- */
/* שורות ארוכות, קווי שיער, בלי אף קופסה. */
.idx{margin:0 0 8px; border-top:1px solid var(--line)}
.ix{
  position:relative; display:flex; align-items:baseline; gap:18px;
  text-decoration:none; color:inherit; padding:20px 4px 18px;
  border-bottom:1px solid var(--line);
  transition:padding-inline-start .24s ease;
}
.ix:hover{padding-inline-start:14px}
.ix-n{
  flex:none; font-family:var(--display); font-weight:var(--display-w);
  font-size:14px; color:var(--line-2); min-width:26px; letter-spacing:.5px;
}
.ix:hover .ix-n{color:var(--red)}
.ix-t{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:clamp(24px,3.2vw,38px); line-height:1.1;
}
.ix:hover .ix-t{color:var(--red)}
.ix-k{font-size:13px; color:var(--grey); display:none}
@media(min-width:720px){ .ix-k{display:block} }
.ix-c{
  margin-inline-start:auto; flex:none;
  font-family:var(--display); font-weight:var(--display-w);
  font-size:20px; color:var(--ink-soft);
}
.ix-c::after{content:" פריטים"; font-family:var(--body); font-size:12.5px; color:var(--grey)}
.ix-a{
  flex:none; color:var(--red); font-size:16px;
  opacity:0; transform:translateX(8px); transition:.22s ease;
}
.ix:hover .ix-a{opacity:1; transform:none}

/* ---------- דף עדשה ---------- */
.lens{padding-bottom:64px}
.lens .eyebrow{margin-top:26px}
.lens-h{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:clamp(28px,3.6vw,44px); line-height:1.1; margin:0 0 10px;
  display:flex; align-items:center; gap:12px;
}
.lens-h .ic{color:var(--red); font-size:.68em; line-height:1}
.lens-b{color:var(--ink-soft); font-size:16px; max-width:60ch; margin:0 0 26px}
.lens-l{border:1px solid var(--line); background:var(--paper)}
.lens-i{
  display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit;
  padding:15px 18px; border-top:1px solid var(--line);
}
.lens-i:first-child{border-top:0}
.lens-i:hover{background:var(--card)}
.lens-i .n{
  flex:none; width:24px; height:24px; display:grid; place-items:center; margin-top:2px;
  font-size:12.5px; color:var(--grey); border:1px solid var(--line-2);
}
.lens-l.ord .n{background:var(--red); border-color:var(--red); color:#fff}
.lens-i .b{min-width:0}
.lens-i .t{display:block; font-size:16.5px; font-weight:600; line-height:1.32}
.lens-i:hover .t{color:var(--red)}
.lens-i .w{display:block; font-size:14px; color:var(--ink-soft); margin-top:2px}
.lens-i .s{display:flex; gap:7px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--grey); margin-top:5px}
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:22px; font-size:13.5px; color:var(--grey)}
.chip{
  text-decoration:none; color:var(--ink); border:1px solid var(--line);
  padding:6px 13px; font-size:13.5px;
}
.chip:hover{border-color:var(--red); color:var(--red)}
.chip.alt{border-style:dashed}

/* ---------- רשת הקטגוריות שנפתחת ---------- */
.cats{display:grid; gap:0; border:1px solid var(--line); margin-bottom:64px; background:var(--paper)}
@media(min-width:820px){ .cats{grid-template-columns:1fr 1fr} }
.cat{border-top:1px solid var(--line); display:flex; flex-direction:column; min-width:0}
@media(min-width:820px){
  .cat:nth-child(odd){border-inline-start:1px solid var(--line)}
  .cat:nth-child(1),.cat:nth-child(2){border-top:0}
  .cat.on{grid-column:1 / -1; border-inline-start:0}
}
.cat:first-child{border-top:0}

.cat-h{
  display:flex; gap:15px; align-items:flex-start; width:100%; text-align:start;
  background:transparent; border:0; cursor:pointer; color:inherit;
  font-family:var(--body); padding:20px 20px 18px;
}
.cat-h:hover{background:var(--card)}
.cat.on .cat-h{background:var(--card)}
.cat-n{
  flex:none; font-family:var(--display); font-weight:var(--display-w);
  font-size:23px; line-height:1; color:var(--line-2); margin-top:3px; min-width:30px;
}
.cat.on .cat-n,.cat-h:hover .cat-n{color:var(--red)}
.cat-b{flex:1; min-width:0}
.cat-k{display:block; font-size:12px; color:var(--red); margin-bottom:3px}
.cat-t{
  display:block; font-family:var(--display); font-weight:var(--display-w);
  font-size:24px; line-height:1.15;
}
.cat-d{
  display:block; font-size:14px; line-height:1.6; color:var(--ink-soft); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cat.on .cat-d{-webkit-line-clamp:none; overflow:visible}
.cat-m{
  flex:none; text-align:center; min-width:74px; align-self:center;
  display:flex; flex-direction:column; gap:1px;
}
.cat-m b{font-family:var(--display); font-weight:var(--display-w); font-size:26px; line-height:1}
.cat-m span{font-size:11px; color:var(--grey)}
.cat-m em{font-style:normal; font-size:11px; color:var(--grey); margin-top:4px}
.cat-m em.read{color:var(--red)}
/* המפתח: פלוס שהופך למינוס */
.cat-x{
  flex:none; width:22px; height:22px; position:relative; align-self:center;
  border:1px solid var(--line-2); transition:.18s;
}
.cat-x::before,.cat-x::after{
  content:""; position:absolute; inset-inline-start:50%; top:50%; background:var(--ink);
  transform:translate(50%,-50%); transition:.18s;
}
.cat-x::before{width:9px; height:1px}
.cat-x::after{width:1px; height:9px}
.cat-h:hover .cat-x{border-color:var(--red)}
.cat.on .cat-x{background:var(--red); border-color:var(--red)}
.cat.on .cat-x::before{background:#fff}
.cat.on .cat-x::after{height:0}

.cat-p{border-top:1px solid var(--line); animation:catin .22s ease}
@keyframes catin{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .cat-p{animation:none} }
.cat-p .ucs{border:0}
.cat-p .uc{border-top:1px solid var(--line)}
@media(min-width:680px){ .cat-p .ucs{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .cat-p .ucs{grid-template-columns:repeat(3,1fr)} }
.cat-all{
  display:block; text-align:center; text-decoration:none; color:var(--ink);
  font-size:14px; padding:14px; border-top:1px solid var(--line); background:var(--cream);
}
.cat-all:hover{color:var(--red)}
.uc.done .uc-g{background:var(--card); border-color:var(--line-2); color:var(--grey)}
.uc.done .uc-t{color:var(--grey)}

/* ---------- כרטיס פריט ---------- */
.ucs{display:grid; gap:0; border:1px solid var(--line); background:var(--paper)}
@media(min-width:680px){ .ucs{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .ucs{grid-template-columns:repeat(3,1fr)} }
.uc{
  display:flex; flex-direction:column; gap:0; text-decoration:none; color:inherit;
  padding:20px 20px 18px; border-top:1px solid var(--line);
  border-inline-start:1px solid var(--line);
}
.uc:hover{background:var(--card)}
.uc-h{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.uc-g{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--ink); font-size:12px; line-height:1; color:var(--ink);
  font-family:var(--body);
}
.uc.live .uc-g{background:var(--red); border-color:var(--red); color:#fff}
.ucs.ord .uc-g{background:var(--ink); border-color:var(--ink); color:var(--cream); font-size:12.5px}
.uc-k{font-size:12px; color:var(--grey)}
.uc-h .lock{margin-inline-start:auto}
.uc-t{
  display:block; font-family:var(--display); font-weight:var(--display-w);
  font-size:20px; line-height:1.2; margin-bottom:7px;
}
.uc:hover .uc-t{color:var(--red)}
.uc-s{
  display:block; font-size:14px; line-height:1.6; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.uc-f{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  font-size:12px; color:var(--grey); margin-top:auto; padding-top:13px;
}
.uc.lk .uc-t{color:var(--ink-soft)}

.lib-b{color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:62ch; margin:-12px 0 26px}

/* ==================================================================
   מערכת טיפוגרפיה ומקצב — שכבת ההרמוניה
   ------------------------------------------------------------------
   סולם אחד לכל הגדלים, ומקצב אנכי אחיד לכל המקטעים.
   הכללים כאן באים אחרונים ולכן גוברים על מה שנקבע נקודתית קודם.
   ================================================================== */

:root{
  /* סולם טיפוגרפי, יחס 1.25 */
  --t-label:13.5px;
  --t-micro:14px;
  --t-small:15.5px;
  --t-body:18px;
  --t-lead:20px;
  --t-card:21.5px;
  --t-h3:clamp(21px,1.7vw,25px);
  --t-h2:clamp(27px,3vw,40px);
  --t-h1:clamp(34px,4.4vw,54px);
  --t-hero:clamp(60px,8.4vw,124px);

  /* מקצב אנכי */
  --s1:6px;  --s2:12px; --s3:18px; --s4:26px;
  --s5:38px; --s6:56px; --s7:82px; --s8:112px;
}

body{font-size:var(--t-body); line-height:1.78}

/* ---------- תווית מקטע ---------- */
/* קו אדום קצר ותווית לצידו, במקום מילה זעירה עם קו תחתון */
.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-size:var(--t-label); letter-spacing:.055em; color:var(--ink-soft);
  border:0; padding:0; margin:0 0 var(--s3);
}
.eyebrow::before{
  content:""; flex:none; width:30px; height:2px; background:var(--red);
}
.eyebrow.mine::before{width:30px}
* + .eyebrow{margin-top:var(--s8)}
.lens > .eyebrow:first-child,
.wrap > .eyebrow:first-child{margin-top:var(--s6)}

/* ---------- כותרות ---------- */
/* עברית צפופה בגדלים גדולים דורשת ליווי הדוק וטרקינג שלילי קל */
h2.big{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:var(--t-h2); line-height:1.08; letter-spacing:-.018em;
  margin:0 0 var(--s4); max-width:20ch;
}
.hero h1{
  font-size:var(--t-hero); line-height:.88; letter-spacing:-.03em;
  margin:0 0 var(--s3);
}
.hero .tag{
  font-size:var(--t-lead); line-height:1.42; font-weight:400;
  margin:0 0 var(--s4); max-width:24ch; color:var(--ink-soft);
}
.hero .tag em{color:var(--ink)}
.lens-h{
  font-size:var(--t-h1); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 var(--s2);
}
.doc h1{font-size:var(--t-h1); line-height:1.04; letter-spacing:-.022em; margin:var(--s3) 0 var(--s2)}
.doc h2{font-size:var(--t-h3); line-height:1.2; letter-spacing:-.012em; margin:var(--s6) 0 var(--s2)}
.doc .lead{font-size:var(--t-lead); line-height:1.68}
.doc p{margin:0 0 var(--s3)}

/* ---------- פסקאות מובילות ---------- */
.lib-b,.lens-b,.shelf-b{
  font-size:var(--t-small); line-height:1.75; color:var(--ink-soft);
  max-width:58ch; margin:calc(var(--s4) * -1 + 2px) 0 var(--s5);
}
.cta-note{font-size:var(--t-micro); margin-top:var(--s2)}

/* ---------- מרווחי מקטעים ---------- */
.hero{padding:var(--s5) 0 var(--s6)}
.band{padding:10px 0}
.pillars,.cats,.tbs,.ucs,.mos,.rls{margin-bottom:0}
.cats{margin-bottom:var(--s8)}
.path{padding:var(--s1) 0 var(--s5)}
.idx{margin-bottom:0}
.lens{padding-bottom:var(--s8)}
footer{margin-top:0}

/* ---------- כרטיסים ותחנות ---------- */
.uc-t{font-size:var(--t-card); line-height:1.18; letter-spacing:-.01em; margin-bottom:var(--s1)}
.uc-s{font-size:var(--t-small); line-height:1.66}
.uc-k,.uc-f{font-size:var(--t-label)}
.cat-t{font-size:var(--t-h3); line-height:1.1; letter-spacing:-.014em}
.cat-d{font-size:var(--t-small); line-height:1.66}
.st-t{font-size:var(--t-h3); line-height:1.1; letter-spacing:-.014em; margin-bottom:var(--s1)}
.st-s{font-size:var(--t-label)}
.st-1{font-size:var(--t-micro)}
.ix-t{font-size:clamp(26px,3.4vw,42px); line-height:1.04; letter-spacing:-.026em}
.ix{padding:var(--s4) 4px calc(var(--s4) - 4px)}
.pillar h3{font-size:var(--t-h3); line-height:1.15; letter-spacing:-.012em; margin-bottom:var(--s1)}
.pillar p{font-size:var(--t-small); line-height:1.66}
.pillar{padding:var(--s4) var(--s3) calc(var(--s4) - 4px)}
.shelf-i b{font-size:16.5px; line-height:1.2; letter-spacing:-.008em}

/* ---------- ניווט עליון ---------- */
.top .wrap{min-height:76px}
.nl{font-size:var(--t-small); letter-spacing:.005em}
.nav-b{font-size:var(--t-micro); padding:8px 14px}
.brand img{height:42px}

/* ---------- כותרת תחתונה ---------- */
footer .wrap{padding-block:var(--s4)}

/* ---------- אינדקס התפקידים: שורה בשתי רמות ---------- */
.ix{align-items:center; gap:var(--s3)}
.ix-b{min-width:0; flex:1}
.ix-t{display:block}
.ix-k{
  display:block; font-size:var(--t-micro); color:var(--grey);
  margin-top:4px; letter-spacing:.01em;
}
@media(min-width:720px){ .ix-k{display:block} }
.ix-n{
  font-size:var(--t-label); min-width:24px; align-self:flex-start; margin-top:9px;
}
.ix-c{
  font-size:var(--t-h3); line-height:1; align-self:center;
  display:flex; align-items:baseline; gap:5px;
}
.ix-c::after{font-size:var(--t-label)}
.ix-a{align-self:center}

/* ---------- לפי תפקיד: גרגרים בתוך רימון ---------- */
/* שבעה תפקידים, גרגר לכל אחד. מתחת ל-760 הצורה נפתחת לשתי עמודות. */
/* ==================================================================
   הרימון — בורר התפקידים והתחומים
   הפרי ריבועי כדי שהצללית תהיה עיגול ולא אליפסה. הגרגרים יושבים
   בארבע שורות 2·4·4·2 שנכנסות לתוך העיגול, והמקרא מחוץ לפרי.
   ================================================================== */
.pom{margin:clamp(26px,3.4vw,44px) auto clamp(20px,2.6vw,32px); max-width:640px}
.pom-fruit{position:relative; aspect-ratio:1 / 1}

.pom-skin{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.pom-skin .peel{fill:var(--peel)}
.pom-skin .peel-in{
  fill:none; stroke:var(--peel-2); stroke-width:1.1;
  transform:scale(.94); transform-origin:center; opacity:.9;
}
/* הכתר של הלוגו — סימן עדין בראש הפרי */
.pom-calyx{
  position:absolute; inset-block-start:4.5%;
  inset-inline-start:50%; transform:translateX(50%);
  width:clamp(24px,3.2vw,34px); height:auto; fill:var(--acc); opacity:1;
  pointer-events:none;
}

.pom-body{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(24,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:clamp(8px,1.3vw,14px);
  padding:12.5% 6.5%;
}

/* הגרגר: צורת גרעין רימון — רחב למעלה, מתחדד קלות למטה */
.sd{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-align:center; text-decoration:none;
  color:#fff; background:var(--seed);
  border-radius:52% 52% 46% 46% / 44% 44% 56% 56%;
  padding:6px clamp(6px,1vw,11px);
  box-shadow:0 1px 2px rgba(12,11,9,.14), inset 0 3px 8px rgba(255,255,255,.22);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.sd b{
  font-family:var(--hero); font-weight:var(--display-w); line-height:1.06;
  font-size:clamp(13px,1.55vw,18px); text-wrap:balance; letter-spacing:-.01em;
}
.sd .n{font-size:clamp(10px,.95vw,12px); opacity:.7; letter-spacing:.02em}
.sd .n::after{content:" פריטים"}
/* גרגר של תחום — יין עמוק, נבדל בלי להיות חור בפרי */
.sd.dm{background:var(--seed-2)}
.sd:hover,.sd:focus-visible{
  transform:translateY(-4px) scale(1.045);
  box-shadow:0 8px 18px rgba(12,11,9,.18), inset 0 3px 8px rgba(255,255,255,.26);
}
.sd:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* פיזור: 3 · 4 · 4 · 2 — שלוש-עשרה גרעינים בתוך העיגול */
.sd:nth-child(1){grid-area:1 / 4 / 2 / 10}
.sd:nth-child(2){grid-area:1 / 10 / 2 / 16}
.sd:nth-child(3){grid-area:1 / 16 / 2 / 22}
.sd:nth-child(4){grid-area:2 / 1 / 3 / 7}
.sd:nth-child(5){grid-area:2 / 7 / 3 / 13}
.sd:nth-child(6){grid-area:2 / 13 / 3 / 19}
.sd:nth-child(7){grid-area:2 / 19 / 3 / 25}
.sd:nth-child(8){grid-area:3 / 1 / 4 / 7}
.sd:nth-child(9){grid-area:3 / 7 / 4 / 13}
.sd:nth-child(10){grid-area:3 / 13 / 4 / 19}
.sd:nth-child(11){grid-area:3 / 19 / 4 / 25}
.sd:nth-child(12){grid-area:4 / 7 / 5 / 13}
.sd:nth-child(13){grid-area:4 / 13 / 5 / 19}

/* מקרא — מתחת לפרי, לא בתוכו */
.pom-key{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0; font-size:var(--t-label); color:var(--grey);
}
.pom-key span{width:11px; height:11px; border-radius:52% 52% 46% 46% / 44% 44% 56% 56%}
.pom-key .k-r{background:var(--seed)}
.pom-key .k-d{background:var(--seed-2); margin-inline-start:10px}

/* ---------- מתג התצוגה — מופיע רק בנייד ---------- */
.pom-switch{display:none}

@media(max-width:759px){
  .pom{max-width:100%; margin-top:var(--s4)}

  .pom-switch{
    display:flex; justify-content:center; gap:0; margin:0 0 16px;
    border:1px solid var(--line); width:fit-content; margin-inline:auto;
  }
  .pom-switch button{
    font-family:var(--display); font-weight:var(--display-w); font-size:13.5px;
    background:transparent; border:0; color:var(--grey);
    padding:9px 22px; cursor:pointer;
  }
  .pom-switch button + button{border-inline-start:1px solid var(--line)}
  .pom-switch button[aria-pressed="true"]{background:var(--seed); color:#fff}

  /* ברירת המחדל בנייד: רשימה קריאה, שתי עמודות */
  .pom-fruit{aspect-ratio:auto}
  .pom-skin,.pom-calyx{display:none}
  .pom-body{
    position:static; grid-template-columns:1fr 1fr; grid-template-rows:none;
    gap:10px; padding:0;
  }
  .sd:nth-child(n){grid-area:auto}
  .sd{
    min-height:0; padding:15px 12px; gap:4px;
    border-radius:26px 26px 22px 22px / 20px 20px 26px 26px;
    box-shadow:0 1px 2px rgba(12,11,9,.12);
  }
  .sd b{font-size:16px; line-height:1.15}
  .sd .n{font-size:12px}
  .sd:hover,.sd:focus-visible{transform:none}
  .sd:active{transform:scale(.97)}
  .pom-key{margin-top:16px}

  /* מי שבוחר "רימון" מקבל את הפרי, מוקטן אבל שלם */
  .pom[data-pomview="fruit"] .pom-fruit{aspect-ratio:1 / 1}
  .pom[data-pomview="fruit"] .pom-skin,
  .pom[data-pomview="fruit"] .pom-calyx{display:block}
  .pom[data-pomview="fruit"] .pom-body{
    position:absolute; inset:0;
    grid-template-columns:repeat(24,1fr); grid-template-rows:repeat(4,1fr);
    gap:5px; padding:12% 5%;
  }
  .pom[data-pomview="fruit"] .sd{
    padding:4px 5px; border-radius:52% 52% 46% 46% / 44% 44% 56% 56%;
  }
  .pom[data-pomview="fruit"] .sd b{font-size:11.5px; line-height:1.04}
  .pom[data-pomview="fruit"] .sd .n{font-size:9px}
  .pom[data-pomview="fruit"] .sd .n::after{content:""}
  .pom[data-pomview="fruit"] .sd:nth-child(1){grid-area:1 / 4 / 2 / 10}
  .pom[data-pomview="fruit"] .sd:nth-child(2){grid-area:1 / 10 / 2 / 16}
  .pom[data-pomview="fruit"] .sd:nth-child(3){grid-area:1 / 16 / 2 / 22}
  .pom[data-pomview="fruit"] .sd:nth-child(4){grid-area:2 / 1 / 3 / 7}
  .pom[data-pomview="fruit"] .sd:nth-child(5){grid-area:2 / 7 / 3 / 13}
  .pom[data-pomview="fruit"] .sd:nth-child(6){grid-area:2 / 13 / 3 / 19}
  .pom[data-pomview="fruit"] .sd:nth-child(7){grid-area:2 / 19 / 3 / 25}
  .pom[data-pomview="fruit"] .sd:nth-child(8){grid-area:3 / 1 / 4 / 7}
  .pom[data-pomview="fruit"] .sd:nth-child(9){grid-area:3 / 7 / 4 / 13}
  .pom[data-pomview="fruit"] .sd:nth-child(10){grid-area:3 / 13 / 4 / 19}
  .pom[data-pomview="fruit"] .sd:nth-child(11){grid-area:3 / 19 / 4 / 25}
  .pom[data-pomview="fruit"] .sd:nth-child(12){grid-area:4 / 7 / 5 / 13}
  .pom[data-pomview="fruit"] .sd:nth-child(13){grid-area:4 / 13 / 5 / 19}
}
@media(prefers-reduced-motion:reduce){
  .sd{transition:none}
  .sd:hover,.sd:focus-visible{transform:none}
}

/* ---------- כפתור אל הספרייה, מתחת לרימון ---------- */
.pom-more{display:flex; justify-content:center; margin-top:clamp(18px,3vw,28px)}
.btn-lib{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(15px,1.7vw,18px); color:var(--ink); text-decoration:none;
  border:1px solid var(--line-2); background:var(--cream);
  padding:14px clamp(22px,3.5vw,34px);
  transition:border-color .2s ease, color .2s ease;
}
.btn-lib span{color:var(--red); transition:transform .2s ease}
.btn-lib:hover{border-color:var(--red); color:var(--red)}
.btn-lib:hover span{transform:translateY(3px)}
.btn-lib:focus-visible{outline:2px solid var(--red); outline-offset:3px}
@media(prefers-reduced-motion:reduce){ .btn-lib,.btn-lib span{transition:none} .btn-lib:hover span{transform:none} }

/* ---------- כמה קבצים ביחידה אחת ---------- */
.asset.files{display:block}
.fl{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.fl-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 2px; border-bottom:1px solid var(--line);
}
.fl-t{flex:1 1 220px; min-width:0; display:flex; flex-direction:column}
.fl-t b{font-family:var(--display); font-weight:var(--display-w); font-size:16px; line-height:1.25}
.fl-t small{color:var(--grey); font-size:12.5px}
.fl-a{flex:none; display:flex; gap:8px}
.fl-a a{
  font-family:var(--display); font-weight:var(--display-w); font-size:13.5px;
  text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line-2); padding:7px 16px;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.fl-a a:hover{border-color:var(--red); color:var(--red)}
.fl-a a.dl{background:var(--red); border-color:var(--red); color:var(--cream)}
.fl-a a.dl:hover{filter:brightness(1.08); color:var(--cream)}
.fl-a a:focus-visible{outline:2px solid var(--red); outline-offset:2px}


/* ---------- לפי תחום: ארבע לוחיות ---------- */
.doms{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); margin:0 0 8px;
  grid-template-columns:1fr;
}
@media(min-width:720px){ .doms{grid-template-columns:1fr 1fr} }
.dom{
  display:grid; gap:2px; text-decoration:none; color:inherit;
  background:var(--cream); padding:clamp(20px,3vw,30px) clamp(18px,2.6vw,28px);
  transition:background .18s ease;
}
.dom:hover{background:var(--card)}
.dom-n{
  font-family:var(--display); font-weight:var(--display-w);
  font-size:13px; color:var(--line-2); letter-spacing:.5px;
}
.dom:hover .dom-n{color:var(--red)}
.dom-t{
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:clamp(22px,2.8vw,32px); line-height:1.1;
}
.dom:hover .dom-t{color:var(--red)}
.dom-k{color:var(--grey); font-size:13.5px; line-height:1.45}
.dom-c{
  margin-top:6px; font-family:var(--display); font-weight:var(--display-w);
  font-size:13px; color:var(--ink-soft);
}
@media(prefers-reduced-motion:reduce){ .dom{transition:none} }


/* ---------- העלאת קובץ למדף, מצד הלקוח ---------- */
.up{
  margin:22px 0 0; padding:clamp(18px,2.6vw,26px);
  background:var(--paper); border:1px solid var(--line);
  display:grid; gap:14px;
}
.up-t b{display:block; font-family:var(--display); font-weight:var(--display-w); font-size:17px}
.up-t span{display:block; color:var(--grey); font-size:13.5px; line-height:1.5; margin-top:3px}
.up-f{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.up-f input[type=text]{
  flex:1 1 200px; font:inherit; font-size:15px; padding:11px 13px;
  border:1px solid var(--line); background:var(--cream); color:var(--ink); outline:none;
}
.up-f input[type=text]:focus{border-color:var(--red)}
.up-pick{
  flex:0 1 auto; max-width:100%; cursor:pointer; font-size:14px; color:var(--ink-soft);
  border:1px dashed var(--line-2); padding:11px 18px; background:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.up-pick:hover{border-color:var(--red); color:var(--red)}
.up-pick input{display:none}
.up-f button{
  flex:none; font-family:var(--display); font-weight:var(--display-w); font-size:15px;
  background:var(--red); color:var(--cream); border:1px solid var(--red);
  padding:11px 26px; cursor:pointer;
}
.up-f button[disabled]{opacity:.6; cursor:default}
.up-msg{margin:0; font-size:13.5px; color:var(--grey); min-height:18px}
.up-msg.bad{color:var(--red); font-weight:600}

/* ---------- כפתור המצפן הדיגיטלי, לצד כניסת הלקוחות ---------- */
.cta-alt{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:transparent; color:var(--ink); border:1px solid var(--line-2);
  margin-inline-start:10px;
  transition:border-color .18s ease, color .18s ease;
}
.cta-alt span{color:var(--red)}
.cta-alt:hover{border-color:var(--red); color:var(--red)}
.cta-alt:focus-visible{outline:2px solid var(--red); outline-offset:3px}
@media(max-width:619px){
  .cta-alt{margin-inline-start:0; margin-top:10px; width:100%; justify-content:center}
}

/* ---------- קווי השיער שתוחמים את הדף ---------- */
/* שני קווים אנכיים בשולי עמודת התוכן, לכל גובה החלון. מופיעים רק
   כשיש מספיק רוחב — אחרת הם נצמדים לקצה המסך ונראים כמו מסגרת. */
.frame{display:none}
@media(min-width:1240px){
  .frame{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    display:flex; justify-content:center;
  }
  .frame i{
    display:block; width:var(--wrap); height:100%;
    border-inline:1px solid var(--line);
  }
  /* התוכן מעל הקווים, והכותרת הדביקה מסתירה אותם מאחוריה */
  /* אלמנטים צפים (כפתור ההערה, החלונות) שומרים על position:fixed שלהם */
  body > *:not(.frame):not(.saybtn):not(.modal){position:relative; z-index:1}
}

/* ---------- ההדגשה של המרחב הכפרי ---------- */
/* סימון מרקר שנמשח פעם אחת מימין לשמאל. אותה שפה של ההדגשות
   בגוף התוכן (.doc em), רק בגדול ועם תנועה אחת בכניסה. */
.hero .tag em{
  font-style:normal; color:var(--red); white-space:nowrap;
  background-image:linear-gradient(var(--red-soft), var(--red-soft));
  background-repeat:no-repeat;
  background-position:right .04em;
  background-size:0% .46em;
  padding:0 .1em;
  animation:markersweep .8s cubic-bezier(.22,.7,.3,1) .45s forwards;
}
@keyframes markersweep{to{background-size:100% .46em}}
@media(prefers-reduced-motion:reduce){
  .hero .tag em{animation:none; background-size:100% .46em}
}

/* ---------- המוטו בלב גרפיקת הנקודות ---------- */
/* הרשת מחברת נקודות, והמוטו אומר בדיוק את זה. הילה בגוון הרקע
   מפרידה בין האותיות לקווים שמאחוריהן, בלי מלבן חוסם. */
.motto{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(17px,1.45vw,22px); letter-spacing:.03em;
  color:var(--ink); text-align:center; pointer-events:none;
  text-shadow:
    0 0 10px var(--cream), 0 0 10px var(--cream),
    0 0 18px var(--cream), 0 0 26px var(--cream);
  opacity:0; animation:mottoin .9s ease .85s forwards;
}
@keyframes mottoin{to{opacity:1}}
@media(prefers-reduced-motion:reduce){ .motto{opacity:1; animation:none} }

/* ---------- כותרת שנשארת בשורה אחת ---------- */
/* h2.big מוגבל ל-20ch ולכן נשבר. כאן מסירים את התקרה ואוסרים שבירה,
   ובנייד מחזירים שבירה רגילה כדי שלא יגלוש מהמסך. */
h2.big.one-line{max-width:none; white-space:nowrap}
@media(max-width:820px){
  h2.big.one-line{white-space:normal; max-width:20ch}
}

/* ==================================================================
   גוון החיטה — הנוכחות הכפרית
   האדום נשאר צבע הפעולה (כפתורים, תוויות, קישורים). החיטה היא
   אווירה בלבד: הרשת, הכתר, השיבולת, הקליפה ורקע מקטע אחד.
   ================================================================== */
.hero-art{color:var(--acc)}
.frame i{border-inline-color:var(--frame)}

/* שיבולת לצד הכתר של הרימון */
.pom-sprig{
  position:absolute; inset-block-start:1.5%; inset-inline-start:50%;
  transform:translateX(135%) rotate(11deg);
  width:clamp(17px,2.4vw,26px); height:auto;
  color:var(--acc); pointer-events:none;
}
@media(max-width:759px){
  .pom-sprig{display:none}
  .pom[data-pomview="fruit"] .pom-sprig{display:block; inset-block-start:2%}
}

/* מקטע העמודים הוא משטח החיטה של הדף: רשת בקווי זהב דקים על
   רקע שמנת־חיטה, והאייקונים בזהב עם נגיעת האדום שנשארת. */
.pillars{background:var(--gold-b); border-color:var(--gold-line)}
.pillar{
  background:transparent;
  border-inline-start-color:var(--gold-line);
  border-top-color:var(--gold-line);
  transition:background .25s ease;
}
.pillar:hover{background:var(--acc-soft)}
.pillar .pi{color:var(--gold)}

/* ==================================================================
   המצפן הדיגיטלי
   לא מלבן: מדליון בצורת הרימון של הלוגו, עם מחט מצפן בתוכו.
   הצורה עושה את העבודה, ולכן אין קופסה ואין מסגרת.
   ================================================================== */
:root{--gold:#B98A19; --gold-line:#D9BE73; --gold-a:#F1DFB0; --gold-b:#FCF7EA}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --gold:#E0B857; --gold-line:#6B5626; --gold-a:#3A2F16; --gold-b:#241F17}}
:root[data-theme="dark"]{--gold:#E0B857; --gold-line:#6B5626; --gold-a:#3A2F16; --gold-b:#241F17}

.agent-s{margin:clamp(18px,2.4vw,30px) auto clamp(16px,2vw,26px)}
.agent{
  position:relative; display:flex; align-items:center;
  gap:clamp(13px,1.8vw,20px); flex-wrap:wrap; justify-content:center;
  text-decoration:none; color:var(--ink);
  background:none; border:0; padding:0;
}

/* המדליון */
.ag-mark{flex:none; width:clamp(56px,6vw,74px); aspect-ratio:1; display:block}
.ag-mark svg{width:100%; height:100%; display:block; overflow:visible}
.m-peel{fill:var(--gold-a)}
.m-peel-in{fill:none; stroke:var(--gold-line); stroke-width:2.4;
  transform:scale(.93); transform-origin:center}
.m-ring{fill:none; stroke:var(--gold-line); stroke-width:2.2; opacity:.8}
.m-n{fill:var(--red)}
.m-s{fill:var(--gold)}
.m-pin{fill:var(--gold-b); stroke:var(--gold); stroke-width:2.4}
/* המחט מתנדנדת ומתייצבת, כמו מצפן אמיתי */
.m-needle{transform-origin:100px 100px;
  animation:agneedle 9s ease-in-out 2 forwards}
@keyframes agneedle{
  0%,100%{transform:rotate(-7deg)}
  38%{transform:rotate(9deg)}
  62%{transform:rotate(-3deg)}
}
.agent:hover .m-needle{animation:agneedle 2.6s ease-in-out infinite}
.agent:hover .m-peel{fill:var(--gold-b)}
.agent:hover .m-peel-in,.agent:hover .m-ring{stroke:var(--gold)}

/* ניצוצות סביב המדליון */
.ag-mark{position:relative}
.ag-sparks{position:absolute; inset:-10% -14%; pointer-events:none}
.ag-sparks svg{position:absolute; fill:var(--gold); opacity:0;
  animation:agtwinkle 4.6s ease-in-out 3 forwards}
.ag-sparks .s1{width:11px; height:11px; inset-block-start:0;   inset-inline-end:2%;  animation-delay:.4s}
.ag-sparks .s2{width:7px;  height:7px;  inset-block-end:6%;    inset-inline-start:0; animation-delay:2.4s}
@keyframes agtwinkle{0%,100%{opacity:0; transform:scale(.6) rotate(0deg)}
  50%{opacity:1; transform:scale(1) rotate(30deg)}}

.ag-body{flex:0 1 auto; min-width:0; display:grid; gap:2px}
.ag-title{font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(19px,2vw,23px); line-height:1.15}
.ag-sub{font-family:var(--display); font-weight:var(--display-w);
  font-size:15px; line-height:1.4; color:var(--ink-soft)}

.ag-go{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:var(--display-w); font-size:15px;
  background:var(--red); color:#fff; padding:9px 18px;
  transition:filter .2s ease, gap .2s ease;
}
.agent:hover .ag-go{filter:brightness(1.1); gap:10px}
.agent:hover .ag-sparks svg{animation-iteration-count:infinite}
.agent:focus-visible{outline:2px solid var(--gold); outline-offset:4px}

@media(max-width:619px){
  .ag-go{width:100%; justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .m-needle{animation:none; transform:rotate(-4deg)}
  .ag-sparks svg{animation:none; opacity:.85}
}
/* מפריד לא נשאר לבד בתחילת שורה. חל על כל טקסט שנשבר בכרטיסים. */
.sd b, .ix-t, .dom-t, .uc-t, .cat-t{text-wrap:balance}
.sd b{hyphens:none; overflow-wrap:normal}

/* ---------- תיבת החיפוש ---------- */
.find{display:flex; gap:8px; margin:0 0 var(--s5); max-width:560px}
.find input{
  flex:1; font:inherit; font-size:16px; padding:12px 15px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  outline:none; min-width:0;
}
.find input:focus{border-color:var(--red)}
.find button{
  flex:none; font-family:var(--display); font-weight:var(--display-w); font-size:15px;
  background:var(--red); color:#fff; border:1px solid var(--red);
  padding:12px 24px; cursor:pointer;
}
.find button:hover{filter:brightness(1.08)}
.lens .find{margin-top:var(--s3)}

/* ---------- קישור "מה נוסף לאחרונה" ---------- */
.whatsnew{margin:calc(var(--s4) * -1) 0 var(--s4); font-size:var(--t-small)}
.whatsnew a{
  color:var(--red); text-decoration:none;
  font-family:var(--display); font-weight:var(--display-w);
  border-bottom:1px solid transparent;
}
.whatsnew a:hover{border-bottom-color:var(--red)}

/* ---------- תוכן עניינים ביחידה ארוכה ---------- */
.toc{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  background:var(--card); padding:16px 18px; margin:0 0 var(--s4);
  border-inline-start:3px solid var(--acc);
}
.toc b{
  font-family:var(--display); font-weight:var(--display-w);
  font-size:var(--t-label); letter-spacing:.05em; color:var(--grey);
  flex:1 0 100%;
}
.toc a{
  font-family:var(--display); font-weight:var(--display-w); font-size:14.5px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2);
}
.toc a:hover{color:var(--red); border-bottom-color:var(--red)}
.doc h2{scroll-margin-top:90px}

/* ==================================================================
   הקפצה גרפית לדפי התוכן
   ------------------------------------------------------------------
   הטקסט נשאר הגיבור. מה שנוסף הוא מקצב: ספרות רפאים לפרקים,
   פסקת פתיחה שנקראת ככרזה, ותיבות שיש להן משקל ולא רק מסגרת.
   ================================================================== */

/* — פסקת הפתיחה: גדולה, עם קו חיטה עבה — */
.doc .lead{
  font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(19px,2.1vw,25px); line-height:1.34; color:var(--ink);
  border-inline-start:5px solid var(--acc); padding-inline-start:20px;
  margin:0 0 var(--s5);
}

/* — פרקים ממוספרים: ספרה גדולה מאחורי הכותרת — */
.doc h2{position:relative; padding-top:var(--s3)}
.doc h2[data-n]::before{
  content:attr(data-n);
  position:absolute; inset-block-start:-.18em; inset-inline-start:-.06em;
  font-family:var(--hero); font-weight:var(--display-w);
  font-size:2.9em; line-height:1; color:var(--acc); opacity:.20;
  pointer-events:none; z-index:0;
}
.doc h2 > *{position:relative; z-index:1}
.doc h2::after{
  content:""; display:block; width:44px; height:3px;
  background:var(--red); margin-top:var(--s2);
}

/* — כותרות משנה: קו דק לפני — */
.doc h3{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:var(--display-w);
  font-size:clamp(17px,1.7vw,20px); margin:var(--s5) 0 var(--s2);
}
.doc h3::before{
  content:""; flex:none; width:14px; height:2px; background:var(--acc);
}

/* — תיבת הדגשה: משקל, לא רק מסגרת — */
.callout{
  background:var(--acc-soft); border:0;
  border-inline-start:5px solid var(--acc);
  padding:18px 20px; margin:var(--s4) 0; border-radius:0;
}
.callout strong{font-family:var(--display); font-weight:var(--display-w); color:var(--ink)}

/* — רשימת סימונים: וי בעיגול חיטה — */
.ticks li{position:relative; padding-inline-start:30px; margin-bottom:10px; list-style:none}
.ticks{padding:0; margin:var(--s3) 0 var(--s4)}
.ticks li::before{
  content:"✓"; position:absolute; inset-inline-start:0; inset-block-start:.15em;
  width:19px; height:19px; border-radius:50%;
  background:var(--acc-soft); color:var(--acc);
  font-size:11px; display:grid; place-items:center; font-weight:700;
}

/* — שלבים: ספרה בעיגול אדום, כבר קיים — מחזקים — */
.steps{counter-reset:st; padding:0; margin:var(--s3) 0 var(--s4); list-style:none}
.steps li{
  position:relative; padding-inline-start:44px; margin-bottom:14px;
  counter-increment:st;
}
.steps li::before{
  content:counter(st); position:absolute; inset-inline-start:0; inset-block-start:-.1em;
  width:30px; height:30px; border-radius:50%;
  background:var(--red); color:#fff;
  font-family:var(--display); font-weight:var(--display-w); font-size:15px;
  display:grid; place-items:center;
}
.steps li span{display:none}

/* — השוואה: שתי תיבות עם ראש צבעוני — */
.compare{display:grid; gap:14px; margin:var(--s4) 0}
@media(min-width:760px){.compare{grid-template-columns:1fr 1fr}}
.compare > div{
  background:var(--card); padding:18px 20px;
  border-top:3px solid var(--acc);
}
.compare > div:nth-child(even){border-top-color:var(--red)}
.compare b{
  display:block; font-family:var(--display); font-weight:var(--display-w);
  font-size:17px; margin-bottom:6px;
}
.compare p{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-soft)}

/* — טבלאות: ראש כהה, שורות מתחלפות — */
.doc table{border:1px solid var(--line)}
.doc table th{
  background:var(--ink); color:var(--cream);
  font-family:var(--display); font-weight:var(--display-w);
  font-size:13.5px; padding:11px 13px; text-align:start; white-space:nowrap;
}
.doc table td{padding:11px 13px; border-top:1px solid var(--line); vertical-align:top}
.doc table tbody tr:nth-child(even){background:var(--card)}

/* — תבנית להעתקה: נראית כמו פתק — */
.tmpl{
  background:var(--card); border:1px dashed var(--line-2);
  padding:16px 18px; margin:var(--s3) 0 var(--s4);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px; line-height:1.8; white-space:pre-wrap;
}

/* ---------- כפתור "יש לי הערה" ---------- */
/* שקט: מסגרת זהב על שמנת, לא גוש כהה. מתמלא רק בריחוף. */
.saybtn{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:55;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:var(--display-w); font-size:13px;
  background:var(--gold-b); color:var(--ink-soft);
  border:1px solid var(--gold-line); border-radius:999px;
  padding:8px 15px; cursor:pointer; box-shadow:0 2px 10px rgba(12,11,9,.10);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.saybtn svg{flex:none; color:var(--gold)}
.saybtn:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.saybtn:hover svg{color:var(--acc)}
.saybtn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media(max-width:619px){
  .saybtn{inset-block-end:12px; inset-inline-end:12px; padding:8px 12px; font-size:12.5px}
  .saybtn span{display:none}
}
@media print{.saybtn{display:none}}