/* NDIGIT v2 · תהליך: מחברת העבודה. מחברת עברית (שדרה בימין) נפתחת בגלילה, כל דף שמתהפך הוא שלב.
   בדף הפעיל: עט כחול כותב הערות, מרקר ליים מסמן, חותמת נוחתת. מה שכבר עבר נשאר כתוב */
.nb { --paper: #f4f1e8; --ink: #1d1e19; --pencil: #8b8d82; --pen: #2c43c4; --marker: #c8f542;
  --hand: 'Playpen Sans Hebrew', 'Heebo', cursive;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background: var(--coal); color: var(--bone); }
.nb-head { display: grid; grid-template-columns: auto 1fr; gap: 20px 70px; align-items: end; padding-top: 120px; }
.nb-h { margin: 0; font: 700 clamp(58px, 6vw, 104px)/.9 var(--display); }
.nb-h .lt { font-weight: 300; color: var(--soft); }
.nb-intro { justify-self: end; margin: 0; padding-bottom: 12px; max-width: 38ch; font-size: 19px; line-height: 1.7; color: var(--soft); }
.nb-intro b { color: var(--bone); }

/* הגלילה: מסילה גבוהה, ובמה דביקה בגובה המסך */
.nb-rail { position: relative; height: 520vh; }
.nb-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(260px, .5fr) 1.5fr; gap: 56px; align-items: center; }

/* הצד של הטקסט */
.nb-info { position: relative; min-height: 300px; }
.nb-say { position: absolute; inset: auto 0 50% 0; transform: translateY(50%); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.nb-say.on { opacity: 1; visibility: visible; transition: opacity .45s .1s; }
.nb-say .k { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 700 14px/1 var(--text); color: var(--soft); }
.nb-say .k b { font: 400 22px/1 Anton, sans-serif; color: var(--lime); }
.nb-say h3 { margin: 14px 0 16px; font: 700 clamp(56px, 5.4vw, 92px)/.88 var(--display); }
.nb-say p { margin: 0; max-width: 34ch; font-size: 18px; line-height: 1.7; color: var(--soft); }
.nb-say .out { margin-top: 22px; padding: 14px 18px; border-radius: 14px; background: #16170f; border: 1px solid #2a2c24; color: var(--bone); font-size: 16px; }
.nb-say .out b { color: var(--lime); margin-left: 10px; }
.nb-dots { position: absolute; top: -34px; right: 0; display: flex; gap: 8px; }
.nb-dots i { width: 34px; height: 4px; border-radius: 2px; background: #2e3028; transition: background .3s; }
.nb-dots i.on { background: var(--lime); }

/* ===== המחברת ===== */
.nb-scene { perspective: 2400px; perspective-origin: 50% 40%; display: grid; place-items: center; }
.nb-book { position: relative; width: min(100%, 1000px, (100svh - 170px) * 1.46); aspect-ratio: 1.46; transform: translateX(var(--shift, 25%)) rotateX(8deg); transform-style: preserve-3d; }
/* הצל על השולחן */
.nb-book::before { content: ""; position: absolute; inset: 6% 2% -7% 2%; z-index: -2; background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.8), transparent 68%); filter: blur(26px); transform: translateZ(-2px); }
.nb-base, .nb-leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.nb-base.l { left: 0; } .nb-base.r { right: 0; opacity: var(--open, 0); }
/* הכריכה האחורית: מתחת לדפים בצד שמאל */
.nb-base.l::before { content: ""; position: absolute; inset: 0; border-radius: 16px 5px 5px 16px; background: var(--noise), radial-gradient(130% 90% at 30% 15%, #23261a, #121310 70%); }
/* הצד הפנימי של הכריכה הקדמית, מסביב לדף הראשון */
.nb-leaf.cv .nb-face.back { background: var(--noise), #15160f; border-radius: 5px 16px 16px 5px; }
/* הדפים קצת קטנים מהכריכה, כמו במחברת אמיתית */
.pg.l { inset: 1.6% 0 1.6% 1.4%; } .pg.r { inset: 1.6% 1.4% 1.6% 0; }
/* דף שמתהפך: צמוד לשדרה (הקצה הימני שלו), מסתובב אל הצד הימני */
.nb-leaf { left: 0; transform-origin: 100% 50%; transform-style: preserve-3d; transform: rotateY(calc(var(--a, 0) * 1deg)); }
.nb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.nb-face.back { transform: rotateY(180deg); }
.nb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0) 30%, rgba(0,0,0,.4)); opacity: var(--sh, 0); }
.nb-face.back::after { background: linear-gradient(to left, rgba(0,0,0,0) 30%, rgba(0,0,0,.4)); }
/* עובי הדפים: ערימה שנראית בתחתית ובקצה הפתוח */
.nb-base .pg, .nb-base .endpaper { box-shadow: 0 1px 0 #dcd8cb, 0 2px 0 #f1eee4, 0 3px 0 #d6d2c4, 0 4px 0 #efebe0, 0 5px 0 #cfcabb, 0 7px 10px rgba(0,0,0,.35); }
.nb-base.l .pg { box-shadow: -1px 1px 0 #dcd8cb, -2px 2px 0 #f1eee4, -3px 3px 0 #d6d2c4, -4px 4px 0 #efebe0, -5px 5px 0 #cfcabb, -6px 8px 12px rgba(0,0,0,.35), inset -34px 0 36px -22px rgba(0,0,0,.3); }
/* סימנייה: סרט ליים שיוצא מהשדרה */
.nb-ribbon { position: absolute; left: calc(50% - 1.4%); bottom: -9%; width: 2.2%; height: 16%; background: linear-gradient(90deg, #b3dc2f, var(--marker) 40%, #a9d12a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); opacity: var(--open, 0); transform: translateZ(1px); box-shadow: 0 6px 10px rgba(0,0,0,.3); }

/* ===== נייר ===== */
.pg { container-type: inline-size; position: absolute; inset: 0; padding: 8% 9% 7%; background: var(--noise), radial-gradient(rgba(29,30,25,.16) .9px, transparent 1.2px) 0 0 / 5.2cqw 5.2cqw, var(--paper); color: var(--ink); display: flex; flex-direction: column; font-family: var(--text); }
/* דף ימין: השדרה משמאלו. דף שמאל: השדרה מימינו */
.pg.r { border-radius: 3px 12px 12px 3px; box-shadow: inset 34px 0 36px -22px rgba(0,0,0,.3), inset 2px 0 0 rgba(0,0,0,.06); }
.pg.l { border-radius: 12px 3px 3px 12px; box-shadow: inset -34px 0 36px -22px rgba(0,0,0,.3), inset -2px 0 0 rgba(0,0,0,.06); }
.pg > * { position: relative; }
.pg-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2.2cqw; border-bottom: .3cqw solid var(--ink); font: 700 2.9cqw/1 var(--text); letter-spacing: .08em; color: var(--ink); }
.pg-top span:last-child { font: 400 3.2cqw/1 Anton, sans-serif; letter-spacing: .04em; }
.pg-t { margin: 4cqw 0 4cqw; font: 700 14cqw/.86 var(--display); }
.pg-t mark { background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 88%, transparent 88%); color: inherit; padding: 0 1cqw; }
.pg-f { margin: auto 0 0; display: flex; justify-content: space-between; font: 700 2.6cqw/1 var(--text); letter-spacing: .08em; color: var(--pencil); }

/* כתב יד: עט כחול, נכתב מימין לשמאל */
.hw { display: block; font: 500 4.3cqw/1.25 var(--hand); color: var(--pen); clip-path: inset(0 0 0 100%); transition: clip-path 1.1s cubic-bezier(.5,0,.4,1); }
.scr { display: block; height: 2.8cqw; width: var(--w, 70%); margin-top: 1.4cqw; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='14'><path d='M0 8 C4 2 7 12 11 7 S17 2 21 8 S28 12 31 6 S38 3 42 8 S48 11 52 7' fill='none' stroke='%232c43c4' stroke-width='1.6' stroke-linecap='round'/></svg>") repeat-x 0 50% / auto 100%; clip-path: inset(0 0 0 100%); transition: clip-path 1s cubic-bezier(.5,0,.4,1); }
.ink { fill: none; stroke: var(--marker); stroke-width: 1.3cqw; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.6,0,.3,1) .9s; vector-effect: non-scaling-stroke; opacity: .9; }
.ink.pen { stroke: var(--pen); stroke-width: .55cqw; opacity: 1; }
/* חותמת גומי */
.stamp { position: relative; align-self: flex-start; margin: 5cqw 2cqw 0 0; padding: 2cqw 3.6cqw; border: .6cqw solid currentColor; outline: .25cqw solid currentColor; outline-offset: .8cqw; border-radius: 1.4cqw; color: #2b2d27; font: 700 6.2cqw/1 var(--display); letter-spacing: .02em; transform: rotate(-8deg) scale(1.7); opacity: 0; transition: transform .3s cubic-bezier(.3,1.7,.5,1) 1.5s, opacity .15s 1.5s; }
.stamp.lime { color: #0b0b0a; background: rgba(200,245,66,.55); }
/* פתק דביק */
.note { position: absolute; padding: 3cqw 3.4cqw; width: 34cqw; background: var(--marker); color: var(--ink); font: 500 4cqw/1.3 var(--hand); box-shadow: 0 1.4cqw 2.4cqw -1cqw rgba(0,0,0,.35); transform: rotate(var(--r, 3deg)) translateY(4cqw); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1) 1.1s, opacity .3s 1.1s; }
/* נייר דבק */
.tape { position: absolute; z-index: 2; width: 17cqw; height: 4.6cqw; background: rgba(226,221,197,.78); box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.08); clip-path: polygon(2% 10%, 8% 0, 16% 12%, 26% 0, 38% 10%, 50% 0, 62% 10%, 74% 0, 86% 12%, 94% 0, 100% 12%, 98% 90%, 90% 100%, 80% 88%, 68% 100%, 56% 90%, 44% 100%, 32% 88%, 20% 100%, 8% 90%, 0 100%); }

/* ===== מצבים: הדף הפעיל נכתב, מה שעבר נשאר ===== */
.pg.live .hw, .pg.live .scr { clip-path: inset(0); }
.pg.live .ink { stroke-dashoffset: 0; }
.pg.live .stamp { transform: rotate(-8deg) scale(1); opacity: .92; }
.pg.live .note { transform: rotate(var(--r, 3deg)); opacity: 1; }
.pg.done .hw, .pg.done .scr { clip-path: inset(0); transition: none; }
.pg.done .ink { stroke-dashoffset: 0; transition: none; }
.pg.done .stamp { transform: rotate(-8deg); opacity: .92; transition: none; }
.pg.done .note { transform: rotate(var(--r, 3deg)); opacity: 1; transition: none; }
/* שורות כתב יד מדורגות */
.pg .d1 { transition-delay: .15s; } .pg .d2 { transition-delay: .45s; } .pg .d3 { transition-delay: .75s; } .pg .d4 { transition-delay: 1.05s; } .pg .d5 { transition-delay: 1.35s; }

/* ===== הכריכה ===== */
.cover { container-type: inline-size; position: absolute; inset: 0; border-radius: 16px 5px 5px 16px; background: var(--noise), radial-gradient(130% 90% at 30% 15%, #2a2d1f, #15160f 62%, #0f100b); box-shadow: inset -16px 0 22px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05), inset 1px 1px 0 rgba(255,255,255,.08); padding: 11% 11% 10% 19%; display: flex; flex-direction: column; color: var(--bone); }
/* שדרה בימין */
.cover::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.35) 40%, rgba(255,255,255,.05) 60%, rgba(0,0,0,.45)); border-radius: 0 5px 5px 0; }
.cover .band { position: absolute; top: -1%; bottom: -1%; left: 7%; width: 3.4cqw; background: linear-gradient(90deg, #9cc226, var(--marker) 35%, #d8ff6a 50%, var(--marker) 65%, #9cc226); box-shadow: 0 0 0 .3cqw rgba(0,0,0,.25), 2cqw 0 3cqw -1cqw rgba(0,0,0,.5); border-radius: 1cqw; }
.cover .ck { display: flex; justify-content: space-between; font: 700 3.3cqw/1 var(--text); color: #8d907f; letter-spacing: .14em; }
.cover .logo { width: 22cqw; height: auto; color: #3b3e31; filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) drop-shadow(0 -1px 0 rgba(0,0,0,.7)); }
.cover h4 { margin: auto 0 0; font: 700 22cqw/.82 var(--display); color: #efece2; text-shadow: 0 .4cqw 0 rgba(0,0,0,.5); }
.cover h4 b { display: block; background: linear-gradient(170deg, #e6ff8f, var(--marker) 45%, #9dc92a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 .4cqw 0 rgba(0,0,0,.5)); }
.cover .cm { margin-top: 6cqw; padding-top: 3cqw; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; font: 700 3.1cqw/1 var(--text); color: #8d907f; letter-spacing: .08em; }
.endpaper { container-type: inline-size; position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; background: var(--noise), repeating-linear-gradient(45deg, #1b1d15 0 2cqw, #202219 2cqw 4cqw); }

/* ===== 01 · מכירים ===== */
.qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.6cqw; }
.qa li { padding-bottom: 2.4cqw; border-bottom: .2cqw dashed #cfcabb; }
.qa b { position: relative; display: inline-block; font: 700 4.8cqw/1.1 var(--text); }
.qa .hw { margin-top: 1.2cqw; }
.circ svg { position: absolute; inset: -45% -9% -50% -9%; width: 118%; height: 195%; overflow: visible; }
.brief { display: grid; gap: 4.2cqw; margin-top: 1cqw; }
.brief div { display: grid; grid-template-columns: 15cqw 1fr; align-items: center; gap: 3cqw; }
.brief span { font: 700 3.6cqw/1 var(--text); letter-spacing: .04em; color: var(--pencil); }
.brief .scr { margin: 0; }

/* ===== 02 · כיוון ===== */
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; margin-top: 2cqw; }
.dir { position: relative; }
.dir .art { position: relative; aspect-ratio: .8; border-radius: 1cqw; overflow: hidden; box-shadow: 0 1.6cqw 3cqw -1cqw rgba(0,0,0,.35); }
.dir.a .art { background: #e7dfcf; transform: rotate(2deg); }
.dir.a .art i { position: absolute; border-radius: 50%; }
.dir.b .art { background: var(--ink); display: grid; place-items: center; transform: rotate(-2deg); }
.dir .tape { top: -2.2cqw; right: calc(50% - 8.5cqw); transform: rotate(-5deg); }
.dir.b .tape { transform: rotate(4deg); }
.dir .hw { margin-top: 3cqw; font-size: 4cqw; }
.dir svg { position: absolute; inset: -10% -10% auto -10%; width: 120%; aspect-ratio: .8; overflow: visible; z-index: 3; }
.sl { display: grid; gap: 6cqw; margin-top: 2cqw; }
.sl div { display: grid; grid-template-columns: 16cqw 1fr 16cqw; gap: 3cqw; align-items: center; font: 700 4cqw/1 var(--text); }
.sl div span:last-child { text-align: left; }
.sl .tr { position: relative; height: .5cqw; background: var(--ink); border-radius: 1cqw; }
.sl .tr::after { content: ""; position: absolute; top: 50%; right: 50%; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--paper); border: .7cqw solid var(--ink); transform: translate(50%, -50%); transition: right 1s cubic-bezier(.3,1.4,.5,1) .5s, background .3s 1.3s; }
.pg.live .sl .tr::after, .pg.done .sl .tr::after { right: var(--p, 50%); background: var(--marker); }
.pg.done .sl .tr::after { transition: none; }
.axis-note { margin-top: auto; }
.axis-note .hw { font-size: 4.6cqw; }

/* ===== 03 · בונים שפה ===== */
.mark-box { position: relative; margin: 2cqw auto 0; width: 60%; aspect-ratio: 1; display: grid; place-items: center; }
.mark-box .guide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark-box .guide * { fill: none; stroke: #b3ae9f; stroke-width: .25cqw; vector-effect: non-scaling-stroke; }
.mark-box .guide .dash { stroke-dasharray: 3 3; }
.mark { position: relative; width: 50%; aspect-ratio: 1; }
.mark i { position: absolute; }
.mark .c { inset: 0 28% 28% 0; border-radius: 50%; background: var(--marker); }
.mark .s { inset: 28% 0 0 28%; border: 3.2cqw solid var(--ink); border-radius: 3cqw; }
.mark-box .x { position: absolute; font: 500 3.4cqw/1 var(--hand); color: var(--pen); }
.variants { display: flex; justify-content: center; align-items: center; gap: 4cqw; margin-top: 5cqw; }
.variants > span { display: grid; place-items: center; width: 14cqw; aspect-ratio: 1; border-radius: 1.6cqw; box-shadow: 0 1cqw 2cqw -1cqw rgba(0,0,0,.4); }
.variants .v1 { background: #fff; }
.variants .mark { width: 60%; } .variants .mark .s { border-width: .9cqw; border-radius: 1cqw; }
.variants .v2 { background: var(--ink); } .variants .v2 .mark .s { border-color: var(--paper); }
.variants .v3 { background: var(--marker); } .variants .v3 .mark .c { background: var(--ink); }
.sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; margin: 2cqw 0 0; padding: 0; list-style: none; }
.sw li { position: relative; padding: 1.4cqw 1.4cqw 2.6cqw; background: #fff; box-shadow: 0 1.2cqw 2cqw -1cqw rgba(0,0,0,.35); transform: translateY(8cqw) rotate(var(--r, 0deg)); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1) .5s, opacity .3s .5s; }
.sw li:nth-child(1) { --r: -3deg; } .sw li:nth-child(2) { --r: 2deg; transition-delay: .6s; } .sw li:nth-child(3) { --r: -1deg; transition-delay: .7s; } .sw li:nth-child(4) { --r: 3deg; transition-delay: .8s; }
.sw i { display: block; aspect-ratio: 1; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.sw span { display: block; margin-top: 1.6cqw; font: 400 2.6cqw/1 Anton, sans-serif; color: var(--ink); direction: ltr; text-align: right; }
.pg.live .sw li, .pg.done .sw li { transform: rotate(var(--r)); opacity: 1; }
.pg.done .sw li { transition: none; }
.ts { margin-top: 5cqw; display: grid; gap: 2cqw; }
.ts div { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; padding-bottom: 1.6cqw; border-bottom: .2cqw dashed #cfcabb; }
.ts b { font-weight: 700; line-height: .95; }
.ts small { font: 500 3cqw/1 var(--hand); color: var(--pen); white-space: nowrap; }
.rules { display: flex; gap: 5cqw; margin-top: auto; font: 700 3.6cqw/1 var(--text); }
.rules .y { color: #0b0b0a; } .rules .n { color: #b3402a; text-decoration: line-through; }

/* ===== 04 · מוציאים לעולם ===== */
.apps { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 5cqw; align-items: start; margin-top: 1cqw; }
.apps .col { display: grid; gap: 7cqw; padding-top: 4cqw; }
.ap { position: relative; display: grid; place-items: center; transform: translateY(6cqw) rotate(var(--r, 0deg)); opacity: 0; transition: transform .7s cubic-bezier(.3,1.4,.5,1) .5s, opacity .3s .5s; box-shadow: 0 2cqw 3.4cqw -1cqw rgba(0,0,0,.4); }
.pg.live .ap, .pg.done .ap { transform: rotate(var(--r, 0deg)); opacity: 1; }
.pg.done .ap { transition: none; }
.ap .tape { top: -2.4cqw; right: calc(50% - 8.5cqw); transform: rotate(-4deg); }
.ap.post { --r: 2deg; aspect-ratio: .5; background: var(--ink); border: 1.4cqw solid #2b2d27; border-radius: 5cqw; align-content: start; gap: 2.4cqw; padding-top: 6cqw; }
.ap.post .in { width: 80%; aspect-ratio: 1; border-radius: 1.4cqw; background: #2b2d27; display: grid; place-items: center; }
.ap.post .ln { width: 80%; height: 1.3cqw; border-radius: 1cqw; background: #44463c; }
.ap.post .bt { width: 44%; height: 3.6cqw; border-radius: 3cqw; background: var(--marker); margin-top: 1cqw; }
.ap.card { aspect-ratio: 1.65; background: #fff; border-radius: .8cqw; --r: -4deg; transition-delay: .65s; }
.ap.sign { aspect-ratio: 1.25; background: var(--marker); border-radius: .8cqw; --r: 3deg; transition-delay: .8s; }
.ap .mark { width: 38%; } .ap .mark .s { border-width: 1.1cqw; border-radius: 1cqw; }
.ap.post .mark .s { border-color: var(--paper); }
.ap.sign .mark .c { background: var(--ink); }
.ap .cap { position: absolute; bottom: -5.4cqw; right: 0; font: 500 3.2cqw/1 var(--hand); color: var(--pen); }
.files { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; gap: 3.2cqw; }
.files li { display: grid; grid-template-columns: 6cqw 1fr auto; gap: 2.4cqw; align-items: center; padding-bottom: 2.2cqw; border-bottom: .2cqw dashed #cfcabb; font: 700 4.2cqw/1 var(--text); }
.files svg { width: 6cqw; height: 6cqw; overflow: visible; }
.files small { font: 400 2.8cqw/1 Anton, sans-serif; letter-spacing: .04em; color: var(--pencil); direction: ltr; }

@media (max-width: 899px) {
  .nb-head { grid-template-columns: 1fr; padding-top: 80px; }
  .nb-intro { justify-self: start; font-size: 17px; }
  .nb-rail { height: 560vh; }
  .nb-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 26px; }
  .nb-scene { order: -1; }
  .nb-book { width: min(100%, (100svh - 330px) * 1.46); transform: translateX(var(--shift, 25%)); }
  .nb-info { min-height: 210px; margin-top: 14px; }
  .nb-say { inset: 0 0 auto 0; transform: none; }
  .nb-say h3 { font-size: clamp(44px, 12vw, 60px); margin: 10px 0 10px; }
  .nb-say p { font-size: 15.5px; }
  .nb-say .out { margin-top: 12px; font-size: 14px; padding: 10px 14px; }
  .nb-dots { top: -14px; }
}
@media (prefers-reduced-motion: reduce) { .nb * { transition: none !important; } }

/* ===== גרסה 3: התוכן גדל וממלא את הדף (נתי: "יש עוד הרבה שטח לנצל") ===== */
.pg { padding: 7% 8% 6%; }
.pg-top { padding-bottom: 2.6cqw; border-bottom-width: .4cqw; font-size: 3.7cqw; }
.pg-top span:last-child { font-size: 4.2cqw; }
.pg-t { margin: 4cqw 0 4.4cqw; font-size: 18cqw; }
.hw { font-size: 5.6cqw; }
.scr { height: 3.8cqw; }
.stamp { margin-top: 7cqw; padding: 2.6cqw 4.6cqw; font-size: 8.6cqw; border-width: .8cqw; outline-width: .35cqw; outline-offset: 1cqw; }
.note { width: 46cqw; padding: 3.8cqw 4.2cqw; font-size: 5.4cqw; line-height: 1.28; }
/* 01 */
.qa { gap: 3.4cqw; }
.qa b { font-size: 6.4cqw; }
.brief { gap: 7cqw; }
.brief div { grid-template-columns: 20cqw 1fr; }
.brief span { font-size: 5cqw; }
/* 02 */
.dirs { gap: 7cqw; margin-top: 3cqw; }
.dir .hw { font-size: 5.4cqw; margin-top: 4cqw; }
.dir .tape { width: 21cqw; height: 5.6cqw; right: calc(50% - 10.5cqw); }
.sl { gap: 9cqw; }
.sl div { grid-template-columns: 21cqw 1fr 21cqw; font-size: 5.4cqw; }
.sl .tr { height: .7cqw; }
.sl .tr::after { width: 6.4cqw; height: 6.4cqw; border-width: .9cqw; }
.axis-note .hw { font-size: 6.4cqw; }
/* 03 */
.mark-box { width: 68%; }
.mark-box .x { font-size: 4.6cqw; }
.variants { gap: 5cqw; margin-top: 8cqw; }
.variants > span { width: 19cqw; }
.sw { gap: 3.4cqw; }
.sw span { font-size: 3.4cqw; }
.ts div b[style*="12cqw"] { font-size: 15cqw !important; }
.ts div b[style*="7cqw"] { font-size: 9cqw !important; }
.ts div b[style*="4.4cqw"] { font-size: 5.4cqw !important; }
.ts small { font-size: 4.2cqw; }
.rules { font-size: 4.8cqw; }
.rules .hw { font-size: 4.8cqw !important; }
/* 04 */
.ap .cap { font-size: 4.6cqw; bottom: -7cqw; }
.ap .tape { width: 21cqw; height: 5.6cqw; right: calc(50% - 10.5cqw); }
.files { gap: 4.2cqw; }
.files li { grid-template-columns: 8cqw 1fr auto; font-size: 5.8cqw; padding-bottom: 3cqw; }
.files svg { width: 8cqw; height: 8cqw; }
.files small { font-size: 3.6cqw; }
/* הכריכה: הגומייה בקצה, רחוקה מהטקסטים */
.cover { padding-left: 17%; }
.cover .band { left: 4.2%; width: 3cqw; }
.cover .ck { font-size: 3.8cqw; }
.cover .logo { width: 26cqw; }
.cover .cm { font-size: 3.8cqw; }

/* ===== מובייל: דף אחד ממלא את המסך, ו"מצלמה" נוסעת בין הדף הימני לשמאלי ===== */
@media (max-width: 899px) {
  .nb-scene { direction: ltr; width: min(100%, (100svh - 330px) * .73); justify-self: center; overflow: hidden; border-radius: 14px; perspective: 1800px; place-items: start; }
  .nb-book { width: 200%; transform: translateX(var(--cam, 0%)); }
  .pg, .cover { direction: rtl; }
  .nb-stage { gap: 30px; }
}

/* בדף הבית html מוקטן ל-88% מ-900px (layer.css). בלי תיקון הבמה ממלאת רק 88% מגובה המסך */
@media (min-width: 900px) {
  @supports (zoom: 1) { .nb-stage { height: calc(100svh / var(--nbz, 1)); } .nb-book { width: min(100%, 1000px, (100svh / var(--nbz, 1) - 170px) * 1.46); } }
}

/* הפרדה מ"מה אני עושה": קו לכל הרוחב, וכותרת קטנה שאומרת מה הסקשן */
.nb { border-top: 1px solid var(--line); }
.nb-k { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 15px/1 var(--text); letter-spacing: .04em; color: var(--lime); }
.nb-k::before { content: ""; width: 28px; height: 2px; background: currentColor; }

/* נתי 29.09: אפורדנס. גם כשהמחברת סגורה רואים שיש ארבעה עמודים (מספרים על הנקודות) ושגלילה פותחת אותה */
.nb-dots i { position: relative; }
.nb-dots i::after { content: attr(data-n); position: absolute; top: 10px; right: 0; font: 400 12px/1 Anton, sans-serif; letter-spacing: .06em; color: var(--soft); direction: ltr; }
.nb-dots i.on::after { color: var(--lime); }
.nb-hint { display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 0; font: 700 14px/1.3 var(--text); color: var(--bone); transition: opacity .4s; }
.nb-hint.gone { opacity: 0; }
.nb-hint-a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: #0b0b0a; font-size: 16px; animation: nb-nudge 1.6s ease-in-out 3; }
@keyframes nb-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .nb-hint-a { animation: none; } .nb-hint { transition: none; } }
/* נתי 29.09: מד השלבים מתחת למחברת, ממורכז, ולא בעמודת הטקסט */
.nb-scene .nb-dots { direction: rtl; position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; width: min(360px, 70%); margin: 26px auto 0; }
.nb-scene .nb-dots i { flex: 1; }
.nb-scene .nb-dots i::after { top: 10px; right: 50%; transform: translateX(50%); }
.nb-scene .nb-dots { margin-top: 78px; }
.nb-scene .nb-hint { position: relative; z-index: 3; display: flex; justify-content: center; margin: 22px auto 0; direction: rtl; }
/* מובייל: המחברת, המד והטקסט צריכים להיכנס במסך אחד. הרמז יורד (המספרים 01–04 כבר מראים שיש המשך), והמד צמוד יותר */
@media (max-width: 899px) {
  .nb-scene .nb-hint { display: none; }
  .nb-scene .nb-dots { margin-top: 18px; }
  .nb-stage { gap: 18px !important; }
  /* גובה המחברת לפי גובה המסך: תמיד נשאר מקום למד ולטקסט של השלב, כולל "יוצאים עם" */
  .nb-scene { width: min(100%, (100svh - 440px) * .73) !important; }
}
/* נתי 30.09: במובייל הטקסט של השלב ממורכז, כמו המחברת והמד שמעליו */
@media (max-width: 899px) {
  .nb-info, .nb-say { text-align: center; }
  .nb-say .k { justify-content: center; }
  .nb-say .out { margin-inline: auto; text-align: center; }
}

/* נתי 30.09: "יוצאים עם" בלי קופסה. שורה אחת: התווית, חץ שנוסע קדימה, והתוצאה עם מרקר ליים שנמתח מתחתיה.
   מתנגן בכל פעם שעמוד נפתח, כך שכל שלב "מוציא" משהו */
.nb-say .out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: none; font: 700 18px/1.3 var(--text); color: var(--bone); }
.nb-say .out b { display: inline-flex; align-items: baseline; gap: 10px; font: 700 14px/1 var(--text); color: var(--lime); letter-spacing: .02em; }
.nb-say .out b::after { content: "←"; display: inline-block; font: 700 18px/1 var(--text); color: var(--lime); }
.nb-say .out { background-image: linear-gradient(transparent 62%, rgba(200,245,66,.35) 62%, rgba(200,245,66,.35) 92%, transparent 92%); background-repeat: no-repeat; background-position: 0 0; background-size: 0 100%; }
.nb-say.on .out { animation: nb-mark .9s .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.nb-say.on .out b::after { animation: nb-go .7s .15s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes nb-go { 0% { transform: translateX(14px); opacity: 0; } 60% { transform: translateX(-6px); opacity: 1; } 100% { transform: none; } }
@keyframes nb-mark { to { background-size: 100% 100%; } }
/* המרקר מתחת לתוצאה בלבד: התווית והחץ יושבים מעליו עם הרקע של הדף */
.nb-say .out b { position: relative; z-index: 1; padding-inline-end: 4px; background: var(--coal, #0b0b0a); }
.nb-say .k { display: inline-flex; }
@media (max-width: 899px) { .nb-say .out { justify-content: center; margin-inline: auto; width: fit-content; } }
@media (prefers-reduced-motion: reduce) { .nb-say .out { background-size: 100% 100%; } .nb-say.on .out, .nb-say.on .out b::after { animation: none; } }

/* ===== נתי 29.09: מחברת גדולה במובייל, בלי מסגרת שחותכת. הדף ממלא ~86% מהרוחב, והדפדוף נראה במלואו (הצד השני יוצא מהמסך) ===== */
@media (max-width: 899px) {
  .nb { overflow-x: clip; }
  .nb-scene { width: min(86vw, (100svh - 330px) * .73) !important; overflow: visible !important; border-radius: 0 !important; }
  .nb-scene .nb-dots { margin-top: 30px !important; padding-bottom: 22px; }
  .nb-stage { gap: 8px !important; }
  .nb-info { min-height: 190px; margin-top: 0; }
}

/* נתי 30.09: בטלפון אמיתי ראש המחברת נכנס מתחת לכותרת העליונה. הבמה מתחילה מתחת לכותרת, והמחברת קטנה לפי הגובה הנותר */
@media (max-width: 899px) {
  .nb-stage { padding-top: 84px !important; box-sizing: border-box; }
  .nb-scene { width: min(86vw, (100svh - 440px) * .73) !important; }
  .nb-say p, .nb-say .out { margin-inline: auto !important; text-align: center !important; }
  .nb-say p { max-width: 34ch; }
}
/* נתי 30.09 (תיקון): במקום להקטין את המחברת, מקטינים את הטקסט שמתחתיה. הכותרת העליונה נעלמת בגלילה למטה, אז מספיק מרווח קטן */
@media (max-width: 899px) {
  .nb-stage { padding-top: 58px !important; gap: 4px !important; }
  .nb-scene { width: min(86vw, (100svh - 300px) * .73) !important; }
  .nb-scene .nb-dots { margin-top: 18px !important; padding-bottom: 16px; }
  .nb-info { min-height: 0 !important; }
  .nb-say h3 { font-size: clamp(34px, 9.5vw, 48px) !important; margin: 4px 0 6px !important; }
  .nb-say p { font-size: 14.5px !important; line-height: 1.5 !important; }
  .nb-say .out { margin-top: 8px !important; }
  .nb-scene .cap { font-size: 4.4cqw !important; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .nb-say .k { display: none; }
  .nb-say p { font-size: 13.5px !important; }
}