/* ── עמוד הבית: ראש צהוב, ואחריו המוצרים כמו חפצים על נייר. לכל מוצר ציור, צורה ומקום משלו, ואוויר ביניהם במקום קווים ── */
.hub-head { background: var(--yellow); text-align: center; }
.hub-head__in { padding-block: clamp(30px, 5.4vw, 72px) clamp(40px, 6vw, 84px); }
.hub-head h1 { font-size: clamp(50px, 14.4vw, 108px); line-height: 1.02; }
.hub-head .inkword { display: table; margin: 0.12em auto 0; padding: 0.02em 0.22em 0.12em; color: var(--yellow); background: var(--ink); border-radius: var(--leaf-sm); rotate: -1.4deg; }
.hub-head .lead { margin: 20px auto 0; max-width: none; font: clamp(19px, 4.8vw, 24px)/1.3 var(--f-ui); color: var(--ink); }

/* הציור: קו דיו לאדם ולרגע, חפץ נייר כבד למוצר, והצהוב רק על מה שחי.
   לכל ציור חלון משלו, כולם באותו גודל, כדי שהציורים לא יתערבבו: ביום נייר שנהב, בלילה חלון כהה, ומה שבהכנה מקווקו */
.scene { --s-ink: var(--ink); --s-paper: var(--ivory); --s-white: var(--sheet); display: block; overflow: hidden; background: var(--s-paper); border: 2px solid transparent; border-radius: var(--leaf); }
.scene svg { display: block; width: 100%; height: auto; }
.scene .o > * { fill: var(--s-ink); stroke: var(--s-ink); }
.scene .o > .w { fill: none; }
.scene .p > * { fill: var(--s-paper); stroke: none; }
.scene .p > .w { fill: none; stroke: var(--s-paper); }
.scene .p > .wh { fill: var(--s-white); }
.scene .k > * { fill: var(--s-ink); stroke: none; }
.scene .k > .w { fill: none; stroke: var(--s-ink); }
.scene .gr { fill: var(--s-ink); }
.scene :is(image, g, .gr) { transform-box: fill-box; }
.scene--night { --s-ink: var(--on-band); --s-paper: var(--band); --s-white: var(--band-2); }
.scene--soon { --s-paper: var(--page); border: 2px dashed var(--line-strong); }

.lineup { display: grid; gap: clamp(88px, 18vw, 136px); margin: 0; padding: clamp(48px, 9vw, 96px) 0 clamp(64px, 9vw, 120px); list-style: none; }
.pr { position: relative; display: grid; gap: 20px; align-content: start; scroll-margin-top: calc(var(--head-h) + 24px); }
.pr .scene { width: 100%; max-width: 560px; }
.pr__q { margin: 0; font: clamp(18px, 4.6vw, 21px)/1.3 var(--f-ui); color: var(--ink-2); }
.pr__name { margin: 4px 0 0; font: clamp(34px, 9.4vw, 52px)/1.08 var(--f-display); }
.pr__name a { color: var(--ink); text-decoration: none; outline: none; }
.pr__name a::after { content: ""; position: absolute; inset: -14px; z-index: 1; border-radius: var(--leaf); }
.pr:has(.pr__name a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 14px; border-radius: var(--leaf); }
/* המילה הצהובה נצבעת מימין לשמאל כשהמוצר נכנס למסך, כמו מרקר */
.pr__name mark { background-repeat: no-repeat; background-position: 100% 0; background-size: 100% 100%; }
.pr__what { max-width: 34ch; margin: 12px 0 0; font: clamp(18px, 4.6vw, 20px)/1.45 var(--f-body); color: var(--ink-2); text-wrap: pretty; }
.pr__price { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 14px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.pr__price b { font: 400 20px/1.2 var(--f-ui); color: var(--ink); }
.pr__go { width: 26px; height: 26px; margin-inline-start: 4px; color: var(--ink); stroke-width: 2.2; transition: translate 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.pr:hover .pr__go { translate: -5px 0; }

/* «בהכנה»: מקווקו, כמו בכל האתר (Dashed-Is-Not-Yet) */
.soon { display: inline-block; padding: 0 10px; font: 14px/24px var(--f-ui); font-style: normal; color: var(--ink-soft); border: 1.5px dashed var(--line-strong); border-radius: 999px; }

@media (min-width: 900px) {
  /* כל מוצר בשורה משלו: החלון והמילים שלו צמודים, והצדדים מתחלפים ממוצר למוצר */
  .lineup { gap: clamp(104px, 11vw, 152px); padding-top: clamp(64px, 7vw, 104px); }
  .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: clamp(48px, 7vw, 112px); }
  .pr__text { grid-area: 1 / 1; }
  .pr .scene { grid-area: 1 / 2; justify-self: end; }
  .pr:nth-child(even) .pr__text { grid-area: 1 / 2; }
  .pr:nth-child(even) .scene { grid-area: 1 / 1; justify-self: start; }
}

/* המשפט שנשאר: הלקוח אומר את זה, לא אנחנו */
.say { padding-block: clamp(30px, 4vw, 60px) clamp(56px, 7vw, 100px); }
.say__in { display: grid; justify-items: center; margin-block: 0; text-align: center; }
.say blockquote { margin: 0; max-width: 19ch; font: clamp(28px, 6vw, 46px)/1.16 var(--f-display); text-wrap: balance; }
.say figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 18px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.say img { flex: none; width: 52px; height: 38px; object-fit: cover; border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); }
.say figcaption a { color: var(--ink); }

/* תנועה, כמו בעמודי השירות של אחיה אוטומציה: כל ציור מצטייר בקו, גיליון אחרי גיליון (--i), ואז משחק את הרגע שלו פעם אחת.
   html.anim נקבע לפני הציור הראשון, וכל ציור מחכה בפריים הראשון עד שהוא נכנס למסך ([data-sc].is-in).
   בלי הסקריפט, כשמבקשים בלי תנועה או ב«עצירת אנימציות», רואים מיד את הציור הגמור */
html.anim [data-sc]:not(.is-in) :is(.scene *, .pr__name mark) { animation-play-state: paused !important; }
html.anim .scene :is(.o, .p, .k) > * { stroke-dasharray: 1; }
html.anim .scene :is(.o > .w, .p > .w, .k > .w) { animation: sc-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i, 0) * 0.14s) both; }
/* קו המתאר מצטייר, ורק כשהוא נסגר הדיו שבתוכו נכנס (אחרת נשאר צל דק של הצורה לפני שהיא מצוירת) */
html.anim .scene .o > :not(.w) { animation: sc-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i, 0) * 0.14s) both, sc-ink 0.8s steps(1, end) calc(0.15s + var(--i, 0) * 0.14s) both; }
html.anim .scene :is(.k > :not(.w), .p > .wh) { animation: sc-fade 0.3s ease calc(0.6s + var(--i, 0) * 0.14s) both; }
html.anim .scene .gr { transform-origin: 100% 50%; animation: sc-floor 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.anim .pr__name mark { animation: sc-mark 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }

/* בשיחות: הרולר עובר על הקיר, הטלפון נוחת על השולחן ומצלצל, והקשתות הצהובות נדלקות */
html.anim [data-p="phone"] .roll { transform-origin: 83.3% 100%; animation: sc-roll 1.5s ease-in-out 0.9s both; }
html.anim [data-p="phone"] .ring { transform-origin: 50% 100%; animation: sc-drop 0.55s cubic-bezier(0.3, 1.25, 0.5, 1) 0.95s both, sc-shake 1s ease-in-out 1.6s; }
html.anim [data-p="phone"] .live { animation: sc-blink 1.1s linear 1.6s both; }
/* בהודעות: לילה. הירח עולה, השאלה שלה קופצת, והתשובה הצהובה כבר שם */
html.anim [data-p="bot"] .sky { animation: sc-rise 0.9s ease-out 0.1s both; }
html.anim [data-p="bot"] .base { animation: sc-pop 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) 1.15s both; }
html.anim [data-p="bot"] .live { animation: sc-pop 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) 1.85s both; }
/* במשימות: המחשבות עולות מהראש, הדף נוחת, והעט מסמן את השורות אחת אחרי השנייה */
html.anim [data-p="tasks"] .th { transform-origin: 50% 50%; animation: sc-pop 0.4s cubic-bezier(0.3, 1.3, 0.5, 1) calc(0.9s + var(--n) * 0.16s) both; }
html.anim [data-p="tasks"] .note > .base { animation: sc-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.35s both; }
html.anim [data-p="tasks"] .tick { animation: sc-pop 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) calc(1.95s + var(--n) * 0.42s) both; }
html.anim [data-p="tasks"] .pen { animation: sc-pen 1.3s ease-in-out 1.6s both; }
/* במזכירה: היומן נתלה על הקיר, והתור הצהוב נחתם בו */
html.anim [data-p="agent"] .base { animation: sc-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
html.anim [data-p="agent"] .live { animation: sc-stamp 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) 1.7s both; }
html.anim .stage .scene { cursor: pointer; }

@keyframes sc-draw { from { stroke-dashoffset: 1; } }
@keyframes sc-ink { from { fill-opacity: 0; } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-floor { from { transform: scaleX(0); } }
@keyframes sc-mark { from { background-size: 0 100%; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes sc-stamp { from { opacity: 0; transform: scale(1.7) rotate(-10deg); } }
@keyframes sc-roll { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(3deg); } }
@keyframes sc-shake { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-4deg); } 20%, 40%, 60%, 80% { transform: rotate(4deg); } }
@keyframes sc-blink { 0% { opacity: 0; } 12%, 40%, 70%, 100% { opacity: 1; } 26%, 55% { opacity: 0.25; } }
@keyframes sc-pen {
  0% { opacity: 0; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  15%, 30% { opacity: 1; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  48%, 62% { opacity: 1; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); }
  82%, 100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene *, .pr__name mark { animation: none !important; }
  .pr__go { transition: none; }
  .pr:hover .pr__go { translate: none; }
}
html.a11y-no-motion .pr__go { transition: none; }
html.a11y-no-motion .pr:hover .pr__go { translate: none; }

/* ── עמודי השירות: הציור של המוצר, בגודל בינוני, מיד אחרי הפתיחה ── */
.stage { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5.4vw, 80px); }
.stage__in { display: grid; gap: 26px; justify-items: center; text-align: center; }
.stage__say { margin: 0; max-width: 22ch; font: clamp(27px, 6.6vw, 42px)/1.16 var(--f-display); text-wrap: balance; }
.stage__say span { display: block; }
.stage__say span + span { margin-top: 0.5em; font: clamp(18px, 4.6vw, 21px)/1.4 var(--f-ui); color: var(--ink-2); }
.stage .scene { width: min(100%, 560px); }
@media (min-width: 900px) {
  .stage__in { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: start; gap: clamp(40px, 6vw, 96px); text-align: start; }
  .stage .scene { justify-self: end; }
}

/* ── עמודי השירות: כל שירות פותח באותו שדה צהוב, והעובדות נשארות במקומן ── */
html[data-service] :is(.hero, .page-head) { background: var(--yellow); border-bottom: 0; }
html[data-service] .hero { padding-block: clamp(12px, 2vw, 28px) clamp(44px, 6vw, 84px); }
html[data-service] .page-head { padding-block: clamp(22px, 3.4vw, 46px) clamp(38px, 5.4vw, 76px); }
html[data-service] :is(.hero, .page-head) h1 { font-size: clamp(42px, 5.6vw, 78px); line-height: 1.08; }
html[data-service] .page-head:not(.page-head--lp) h1 { font-size: clamp(38px, 4.8vw, 64px); }
html[data-service] :is(.hero, .page-head) :is(.lead, .kicker, .crumbs, .crumbs a, .assure, .assure .i, .closed-note, .closed-note a) { color: var(--ink); }
html[data-service] :is(.hero, .page-head) mark { padding: 0 0.14em 0.06em; color: var(--yellow); background: var(--ink); border-radius: var(--leaf-xs); }
html[data-service] :is(.hero, .page-head) .btn--primary { --btn-bg: var(--ink); background: var(--ink); border-color: var(--ink); color: var(--yellow); box-shadow: 3px 4px 0 rgba(255, 253, 247, 0.92); }
html[data-service] :is(.hero, .page-head) .btn--primary:hover { box-shadow: 4px 6px 0 rgba(255, 253, 247, 0.92); }
html[data-service] :is(.hero, .page-head) .btn--primary:active { box-shadow: 1px 1px 0 rgba(255, 253, 247, 0.92); }
html[data-service] :is(.hero__visual, .lp-hero__visual) > .card, html[data-service] .errand__got { rotate: 1.4deg; box-shadow: 8px 10px 0 rgba(27, 26, 23, 0.9); }
html[data-service] .founder { box-shadow: 5px 6px 0 rgba(27, 26, 23, 0.9); }

/* בתוך העמוד: כותרות גדולות ואוויר, ומה שארוך נפתח בפלוס */
html[data-service] .chapter { padding-block: clamp(56px, 8vw, 120px); }
html[data-service] .chapter h2, html[data-service] .plans h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; }
html[data-service] .facts.faq { display: grid; gap: 0 clamp(28px, 5vw, 72px); margin-top: 26px; }
html[data-service] .facts.faq li { display: block; padding: 0; border: 0; }
html[data-service] .facts.faq details:last-child { border-bottom: 0; }
html[data-service] .facts.faq details { padding: 16px 0; }
html[data-service] .facts.faq p { margin-top: 8px; }
@media (min-width: 761px) { html[data-service] .facts.faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── ניווט: «עונים לי», בעמוד מוצר גם המילה שלו, וחוגה שפותחת את כל המוצרים ── */
.mark-line { --name: 26px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark-line .brand__name { font-size: var(--name); }
/* «מבית אחיה אוטומציה» לא דוחף את המילה הלאה: היא יושבת מיד אחרי השם, כמו במשפט. בבית אין מילה, והשורה תופסת את מקומה כדי לא לגלוש מתחת לחוגה */
.mark-line .brand__by { white-space: nowrap; }
.mark-line:has(> .fx-now) .brand__by { width: 0; }
.fx-now { align-self: flex-start; margin-inline-start: -6px; padding: 0 0.06em; font: var(--name)/1 var(--f-display); color: var(--ink); white-space: nowrap; background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); view-transition-name: product-lit; }
.chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* החוגה: גלולה כהה עם חוגה קטנה, כמו הלוגו */
.fx-dial { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 3px; padding-inline: 3px 15px; color: var(--on-band); background: var(--band); border: 0; border-radius: 999px; font: 15px/1 var(--f-ui); cursor: pointer; transition: scale 0.1s ease; }
.fx-dial:active { scale: 0.97; }
.fx-dial:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mini-dial { flex: none; width: 38px; height: 38px; }
.mini-dial__body { fill: none; stroke: var(--on-band); stroke-width: 2.2; stroke-linejoin: round; }
.mini-dial__w circle { fill: var(--on-band); }
.mini-dial__w { transform-origin: 20px 20px; transition: rotate 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.mini-dial__spot { fill: var(--yellow); }
.fx-dial:hover .mini-dial__w { rotate: var(--turn); }

@media (max-width: 760px) { .mark-line { --name: 23px; gap: 10px; } }
/* בטלפון הכפתור הצהוב כבר בסרגל התחתון, והשורה העליונה נשארת למותג ולמוצרים */
@media (max-width: 480px) { .masthead-row:has(> .mark-line) :is(.mast-cta, .mast-go) { display: none; } }
@media (max-width: 560px) {
  .fx-dial { padding-inline: 3px; }
  .fx-dial > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── החוגה נפתחת מעל העמוד, ונסגרת בלחיצה בחוץ או ב-Esc ── */
.fx-pop { display: none; position: fixed; inset: auto; margin: 0; padding: 0; color: var(--ink); background: none; border: 0; overflow: visible; }
.fx-pop:popover-open { display: block; transition: opacity 0.16s ease, translate 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@starting-style { .fx-pop:popover-open { opacity: 0; translate: 0 -8px; } }
.fx-pop::backdrop { background: rgba(27, 26, 23, 0.16); }

/* הלוגו בגדול. כל מוצר בחור, החור הצהוב הוא «עניתי», ולוחצים כדי לחייג. החור של העמוד הנוכחי והחור שחייגו אליו שקופים, ולכן הם נצבעים בצהוב כשהם על הנקודה. כל הכללים תחת .dial__wheel, כי .hole הוא גם רכיב של האתר (צעדים, ממסר, לוח), כך שהחור של העמוד הנוכחי נצבע בצהוב */
.fx-b { --S: min(460px, calc(100vw - 24px)); width: var(--S); }
/* הלוח הכהה שסביב החוגה, בלי תלות ב-.dial של family.css. הבועה והגלגל באותו תא, כדי שהחורים יסתובבו בדיוק סביב המרכז שלה */
.fx-b .dial { display: grid; justify-items: center; gap: 16px; padding: 24px 20px 20px; color: var(--on-band); background: var(--band); border-radius: 22px 6px; }
.dial__base, .dial__wheel { grid-area: 1 / 1; }
.dial__base { display: block; width: var(--S); height: var(--S); overflow: visible; filter: drop-shadow(5px 7px 0 rgba(27, 26, 23, 0.9)); }
.dial__body { fill: var(--sheet); stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.dial__spot { fill: var(--yellow); }
.dial__hub { fill: none; stroke: var(--ink); stroke-width: 6; }
.dial__wheel { --t: 0.5s; position: relative; width: var(--S); height: var(--S); rotate: var(--spin, 0deg); transition: rotate var(--t) cubic-bezier(0.45, 0.05, 0.3, 1); }
.dial__wheel .hole { position: absolute; left: calc(50% + 26.17% * sin(var(--a)) - 12%); top: calc(50% - 26.17% * cos(var(--a)) - 12%); display: grid; place-content: center; justify-items: center; gap: 1px; width: 24%; height: 24%; color: var(--ink); text-decoration: none; background: var(--sheet); border: max(3px, calc(var(--S) * 0.009)) solid var(--ink); border-radius: 50%; rotate: calc(var(--spin, 0deg) * -1); transition: rotate var(--t) cubic-bezier(0.45, 0.05, 0.3, 1), background-color 0.15s ease; }
.dial__wheel .hole img { width: calc(var(--S) * 0.118); height: calc(var(--S) * 0.118); object-fit: contain; }
.dial__wheel .hole b { font: 400 max(12px, calc(var(--S) * 0.031))/1.1 var(--f-ui); white-space: nowrap; }
.dial__wheel .hole:not([aria-current], .is-dialed):hover { background: var(--ivory); }
.dial__wheel .hole:is([aria-current], .is-dialed) { background: none; }
.dial__wheel .hole.is-soon { border-style: dashed; }
.dial__wheel .hole:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@starting-style {
  .fx-b:popover-open .dial__wheel { rotate: calc(var(--spin, 0deg) - 40deg); }
  .fx-b:popover-open .hole { rotate: calc((var(--spin, 0deg) - 40deg) * -1); }
}
.dial__say { width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 8px 16px; font: 15.5px/1.3 var(--f-ui); text-align: center; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .fx-pop:popover-open, .dial__wheel, .dial__wheel .hole, .mini-dial__w { transition: none; }
}
html.a11y-no-motion :is(.fx-pop:popover-open, .dial__wheel, .dial__wheel .hole, .mini-dial__w) { transition: none; }

/* התפריט בטלפון נפתח עם המוצרים */
.mnav-family { display: none; }
@media (max-width: 940px) {
  html.nav-enhanced .masthead .site-nav .mnav-family { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding-block-end: 6px; margin-block-end: 2px; border-bottom: 2px solid var(--ink); }
  .mnav-family a { display: flex; align-items: center; gap: 8px; min-height: 48px; color: var(--ink); font: 16px/1.1 var(--f-ui); text-decoration: none; background: none; }
  .mnav-family img { width: 34px; height: 34px; }
}

/* הגיליון של כל המוצרים. בטלפון עולה מלמטה, במחשב כרטיס */
.fam-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88dvh; margin: 0; padding: 0; color: var(--ink); background: var(--sheet); border: 0; border-top: 2px solid var(--ink); border-radius: 26px 26px 0 0; overflow: auto; translate: 0 100%; transition: translate 0.26s cubic-bezier(0.22, 1, 0.36, 1), display 0.26s allow-discrete, overlay 0.26s allow-discrete; }
.fam-sheet[open] { translate: 0 0; }
@starting-style { .fam-sheet[open] { translate: 0 100%; } }
.fam-sheet::backdrop { background: rgba(27, 26, 23, 0.34); }
.fam-sheet__in { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.fam-sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.fam-sheet__head b { font: 19px/1.1 var(--f-display); }
.fam-sheet__head button { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -8px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.fam-sheet__head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fam-sheet ul { margin: 4px 0 0; padding: 0; list-style: none; }
.fam-sheet li + li { border-top: 1px solid var(--hair); }
.fam-sheet a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding-block: 5px; color: var(--ink); text-decoration: none; }
.fam-sheet img { flex: none; width: 58px; height: 58px; }
.fam-sheet b { font: 17.5px/1.2 var(--f-ui); }
.fam-sheet small { display: block; margin-top: 1px; font: 14.5px/1.3 var(--f-body); color: var(--ink-soft); }
.fam-sheet a[aria-current] b { background: linear-gradient(176deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); }
@media (min-width: 761px) {
  .fam-sheet { inset: calc(var(--head-h) + 8px) 0 auto 0; width: min(760px, calc(100vw - 40px)); margin-inline: auto; max-height: calc(100dvh - var(--head-h) - 24px); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); translate: 0 -10px; opacity: 0; transition: translate 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
  .fam-sheet[open] { translate: 0 0; opacity: 1; }
  @starting-style { .fam-sheet[open] { translate: 0 -10px; opacity: 0; } }
  .fam-sheet__in { padding: 14px 22px 18px; }
  .fam-sheet ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .fam-sheet li + li { border-top: 0; }
  .fam-sheet a { border-radius: 10px; padding-inline: 6px; }
  .fam-sheet a:hover { background: var(--ivory); }
}
@media (prefers-reduced-motion: reduce) { .fam-sheet { transition: none; } }

/* הסרגל התחתון בטלפון: השם הוא גם הדרך לשאר המוצרים */
.sticky-pick { display: grid; min-height: 44px; padding: 2px 4px; text-align: start; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.sticky-pick b { display: block; font: 15px/1.2 var(--f-ui); }
.sticky-pick small { display: inline-flex; align-items: center; gap: 3px; font: 13px/1.3 var(--f-body); color: var(--ink-soft); }
.sticky-pick .chev { width: 13px; height: 13px; rotate: 180deg; }

/* עוד מעונים לי: לפני הפס הסוגר של כל עמוד מוצר */
.more-family { padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--hair); }
.more-family h2 { font-size: clamp(24px, 2.6vw, 32px); }
.more-family ul { display: grid; gap: 0 clamp(20px, 3vw, 40px); margin: 14px 0 0; padding: 0; list-style: none; }
.more-family li { border-top: 1px solid var(--hair); }
.more-family a { display: flex; align-items: center; gap: 12px; min-height: 84px; padding-block: 8px; color: var(--ink); text-decoration: none; }
.more-family img { flex: none; width: 66px; height: 66px; }
.more-family b { display: block; font: 19px/1.16 var(--f-display); }
.more-family a > span > span { font: 15.5px/1.3 var(--f-ui); }
@media (min-width: 761px) {
  .more-family ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-family img { width: 76px; height: 76px; }
  .more-family b { font-size: 22px; }
}

/* מעבר בין עמודים: המפתח המואר מחליק בעקום של האתר */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(product-lit) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}


/* עמודי /bot/: הזוויות והמוצא של כל ציור, שבאתר כתובים בתוך הדף (bot_prod.py) */
.fh1 { --turn:45deg; }
.fh2 { --i:0; }
.fh3 { --i:1; }
.fh4 { --i:2; }
.fh5 { --i:3; }
.fh6 { --i:4; }
.fh7 { transform-origin:10.4% 84.7%; }
.fh8 { transform-origin:70.8% 65.1%; }
.fh9 { --spin:270deg; }
.fh10 { --a:324deg; }
.fh11 { --a:54deg; }
.fh12 { --a:144deg; }
.fh13 { --a:234deg; }
/* באפליקציות של החנות אין דרך לשאר האתר (marketing.css, ‏.in-store) */
.in-store :is(.fx-dial, .sticky-pick, .more-family) { display: none; }