/* =====================================================================
   מחולל חתימת מייל, כיוון א: הדף. סצנה אחת בכל מסך, כל סצנה שדה מלא שחור או לבן.
   נטען אחרי svc.css, שמביא את הטוקנים, ההדר, תפריט המובייל, הסמן, הכפתורים והפוטר.
   מקור: docs/hero-lab/signature-a.html ו-signature-shell.css. לא מגדיר font-family על הטקסט: הכל יורש.
   ===================================================================== */
.dark,:root{--ph:rgba(255,255,255,.5)}
.light{--ph:rgba(0,0,0,.56)}
@font-face{font-family:GveretLevin;src:url(fonts/GveretLevin-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:KalamPen;src:url(fonts/Kalam-Bold-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0100-02BA}
/* ===== בורר מקטעים ===== */
.sg-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.sg-sb{min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg-24);font-size:17px;font-weight:700;color:var(--fg);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);touch-action:manipulation}
.sg-sb[aria-pressed=true]{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}
@media (hover:hover){.sg-sb:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}}
.sg-sb:active{scale:.97}
/* ===== שדה: קו תחתון בלבד ===== */
.ul{position:relative;display:block}
.ul input,.ul textarea{display:block;width:100%;min-height:52px;margin:0;padding:10px 0;background:none;border:0;border-bottom:1.5px solid var(--fg-50);border-radius:0;outline:0;color:var(--fg);font:inherit;font-weight:400;font-size:22px;line-height:1.3;caret-color:var(--fg);transition:border-color .3s var(--ease);-webkit-appearance:none;appearance:none;resize:vertical}
.ul input[dir=ltr],.ul textarea[dir=ltr]{text-align:right}
.ul input::placeholder,.ul textarea::placeholder{color:var(--ph);opacity:1}
.ul input:focus,.ul textarea:focus{border-bottom-color:var(--fg);box-shadow:0 1.5px 0 var(--fg)}
/* ===== חלון המייל ===== */
.mw{--mw-bg:#fff;--mw-fg:#202124;--mw-m:rgba(32,33,36,.62);--mw-l:rgba(32,33,36,.14);min-width:0}
.mw[data-mode=dark]{--mw-bg:#1f1f1f;--mw-fg:#e8eaed;--mw-m:rgba(232,234,237,.66);--mw-l:rgba(232,234,237,.16)}
.mw-tools{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;margin-bottom:14px}
.mw-frame{position:relative;width:100%;margin-inline:auto;background:var(--mw-bg);color:var(--mw-fg);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--mw-l);transition:background-color .4s var(--ease),color .4s var(--ease)}
.mw[data-client=outlook] .mw-frame{border-radius:4px}
.mw[data-client=phone] .mw-frame{max-width:340px;border-radius:38px;box-shadow:0 0 0 6px var(--fg-24)}
.mw-chrome{padding:14px 22px 0}
.mw-bar{display:flex;align-items:center;gap:6px;height:24px;margin-bottom:14px}
.mw-bar i{width:9px;height:9px;border-radius:50%;background:var(--mw-l)}
.mw-bar b{flex:1;height:10px;margin-inline-start:12px;border-radius:999px;background:var(--mw-l)}
.mw[data-client=outlook] .mw-bar{height:32px;margin-inline:-22px;margin-top:-14px;padding:0 22px;background:var(--mw-l)}
.mw[data-client=outlook] .mw-bar i{border-radius:2px}
.mw[data-client=phone] .mw-bar{justify-content:center;height:22px;margin-bottom:10px}
.mw[data-client=phone] .mw-bar i{display:none}
.mw[data-client=phone] .mw-bar b{flex:none;width:84px;height:20px;margin:0;background:var(--mw-fg)}
.mw-sub{font-size:21px;font-weight:700;line-height:1.25;text-align:right}
.mw-meta{display:flex;align-items:center;gap:10px;padding:10px 0 12px;border-bottom:1px solid var(--mw-l);font-size:16px;color:var(--mw-m)}
.mw-av{width:30px;height:30px;border-radius:50%;background:var(--mw-l);flex:none}
.mw[data-client=outlook] .mw-av{border-radius:4px}
.mw-mail{padding:16px 22px 22px;font-family:Arial,Helvetica,sans-serif}
.mw[data-client=phone] .mw-mail{padding:14px 16px 26px}
.mw-p{margin:0 0 10px;font-size:16px;line-height:1.5;text-align:right;min-height:1em}
.mw-if{display:block;width:100%;height:60px;border:0;background:transparent;pointer-events:none;color-scheme:normal}
.mw-compact .mw-chrome{padding:10px 18px 0}
.mw-compact .mw-sub,.mw-compact .mw-meta{display:none}
.mw-compact .mw-bar{margin-bottom:6px}
.mw-compact .mw-mail{padding:10px 18px 20px}
.mw-warn{margin-top:12px;min-height:27px;text-align:right}
.mw-w{position:relative;margin:0 0 12px;padding-right:30px;color:var(--fg)}
.mw-w::before{content:"!";position:absolute;top:2px;right:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-size:14px;font-weight:900;line-height:1}
.mw-wt{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.mw-wb{margin:2px 0 0;font-size:16px;line-height:1.4;color:var(--fg-72);max-width:54ch}
.mw-w .w-link{margin-inline-end:16px;font-size:16px}
.mw-count,.mw-note{margin:6px 0 0;font-size:16px;line-height:1.4;color:var(--fg-72)}
.mw-empty{margin:0 0 8px;font-size:16px;line-height:1.4;color:var(--mw-m);text-align:right}
.mw-empty[hidden]{display:none}
/* ===== צבע: הפריט היחיד בעמוד שמותר לו צבע, כי הוא הצבע של הגולש ===== */
.clr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.clr-row{display:flex;flex-wrap:wrap;gap:8px}
.clr-b{position:relative;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--fg-24);transition:box-shadow .3s var(--ease),scale .2s var(--ease)}
.clr-b[aria-pressed=true]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg)}
.clr-b:active{scale:.94}
.clr-own{position:relative;display:block;width:44px;height:44px;cursor:pointer}
.clr-own input{display:block;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:conic-gradient(from 0deg,#000,#fff,#000);overflow:hidden;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 0 0 1px var(--fg-24)}
.clr-own input::-webkit-color-swatch-wrapper{padding:0}
.clr-own input::-webkit-color-swatch{border:0;border-radius:50%}
.clr-own::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px dashed var(--fg-50);pointer-events:none}
.clr-own input:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.clr-hex{width:120px}
.clr-hex input{min-height:44px;font-size:18px;text-align:right}
.clr-sug{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.clr-sug:empty,.clr .fb-err:empty{display:none}
.clr .fb-err{flex-basis:100%}
.clr-dot{width:28px;height:28px;border-radius:50%;background:var(--c);flex:none}
.clr-sug .fb-hint{flex:1;min-width:220px;margin:0}
/* ===== לוגו ===== */
.lgc-pane{margin-top:12px;min-height:52px}
.lgc-up{position:relative;min-height:52px;cursor:pointer}
.lgc-f{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
/* ===== שדה מלא ===== */
.fb{display:grid;gap:10px;min-width:0}
.fb-one{min-width:0}
.fb-hint{margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--fg-72);max-width:48ch}
.fb-hint:empty,.fb-err:empty{display:none}
.fin-done:empty,.fin-st:empty{min-height:0}
.fb-err{display:flex;align-items:flex-start;gap:10px;margin:8px 0 0;font-size:17px;line-height:1.35;font-weight:700}
.fb-err::before{content:"!";display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:900;font-size:15px;line-height:1}
.chk{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:18px;cursor:pointer}
.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk i{position:relative;flex:none;width:24px;height:24px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--fg);transition:background-color .25s var(--ease)}
.chk i::after{content:"";position:absolute;top:5px;left:9px;width:6px;height:11px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.chk input:checked+i{background:var(--fg)}
.chk input:checked+i::after{transform:rotate(45deg) scale(1)}
.chk input:focus-visible+i{outline:2px solid var(--fg);outline-offset:3px}
.lng-x{display:grid;gap:8px}
.lng-x:empty{display:none}
.lng-x{margin-top:12px}
/* ===== הודעות מצב ===== */
.nt{margin:0;font-size:18px;line-height:1.4}
.nt-h{margin:0 0 6px;font-size:clamp(26px,2.6vw,40px);font-weight:900;line-height:1.05;overflow-wrap:anywhere}
.nt-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
/* ===== סיום ===== */
.fin-main{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fin-cp{min-height:76px;padding-inline:40px 10px;font-size:clamp(22px,2vw,28px)}
.fin-cp .btn-ic{width:56px;height:56px}
.fin-cp .btn-ic svg{width:22px;height:22px}
.fin-st{margin:0;min-height:27px;font-size:20px;font-weight:700}
.fin-sec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin-top:48px}
.fin-s .fb-hint{margin-top:2px}
.fin-done{margin:4px 0 0;min-height:24px;font-size:17px;font-weight:700}
.fin-keep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;margin-top:32px;padding-top:32px;border-top:1.5px solid var(--fg-12)}
.fin-h{margin:0 0 8px;font-size:clamp(26px,2.4vw,36px);font-weight:300;line-height:1.05}
.fin-p{margin:0 0 14px;font-size:18px;line-height:1.45;max-width:48ch}
.fin-team .btn{min-height:52px}
.fin-cr{margin-top:32px;padding-top:24px;border-top:1.5px solid var(--fg-12)}
.fin-cr .fb-hint{margin-top:0}
/* ===== התקנה ===== */
.ins-pane{margin-top:22px}
.ins-ver{margin-bottom:6px}
.ins-list{margin:12px 0 0;padding:0;list-style:none;counter-reset:s}
.ins-list li{counter-increment:s;position:relative;padding:12px 44px 12px 0;font-size:clamp(19px,1.4vw,22px);line-height:1.35;border-bottom:1.5px solid var(--fg-12)}
.ins-list li::before{content:counter(s);position:absolute;top:12px;right:0;font-weight:900;font-variant-numeric:lining-nums}
.ins-n{margin:12px 0 0;font-size:18px;line-height:1.45;max-width:62ch}
.ins-lead{margin:0 0 14px}
.ins-end{margin-top:32px}
.ins-h{margin:0;font-size:clamp(28px,2.8vw,42px);font-weight:300;line-height:1.05}
.ins-tr{margin:18px 0 0;display:grid;gap:12px}
.ins-tr dt{font-weight:700;font-size:18px}
.ins-tr dd{margin:0;font-size:18px;line-height:1.4;color:var(--fg-72)}
.fin-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:8px}
/* כפתור העתקה והתווית שלידו */
.cp-st{display:inline-block;min-height:27px;font-size:18px;font-weight:700}
.w-link{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
@media (hover:hover){.w-link:hover{text-decoration-thickness:2px}}
.w-link:active{opacity:.6}
/* עט: איור קו, הקצה בנקודת הראשית */
.pen-tip{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;will-change:transform;color:inherit;z-index:3}
.pen-tip svg{position:absolute;left:0;bottom:0;width:150px;height:150px;overflow:visible;transform-origin:0 100%}
.pen-tip path,.pen-tip line,.pen-tip rect{fill:var(--bg);stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){
  .ul input,.ul textarea,.ul input[dir=ltr],.ul textarea[dir=ltr]{text-align:center}
  .mw-tools{justify-content:center}.sg-seg{justify-content:center}
  .mw-warn,.mw-w,.mw-count,.mw-note,.mw-empty{text-align:center}
  .mw-w{padding:26px 0 0}.mw-w::before{right:50%;transform:translateX(50%)}.mw-wb{margin-inline:auto}
  .clr{justify-content:center}.clr-row{justify-content:center}.clr-hex input{text-align:center}
  .fb-hint,.fin-p,.ins-n{margin-inline:auto;text-align:center}
  .fb-err{justify-content:center;text-align:right}
  .fb,.fb-one{text-align:center}
  .chk{justify-content:center}
  .ins-tabs{justify-content:center}
  .ins-list li{padding:40px 0 12px;text-align:center}
  .ins-list li::before{right:50%;transform:translateX(50%)}
  .ins-end,.ins-tr{text-align:center}
  .nt,.nt-h{text-align:center}.nt-row{justify-content:center}
  .fin-main{align-items:center;text-align:center}
  .fin-sec,.fin-keep{grid-template-columns:minmax(0,1fr);text-align:center}
  .fin-cr{text-align:center}
  .fin-row{justify-content:center}
  .pen-tip svg{width:96px;height:96px}
}

/* =====================================================================
   כיוון א: הדף. סצנה אחת בכל מסך, כל סצנה שדה מלא שחור או לבן.
   העט כותב על כל רוחב המסך. השדות הם קיר של מילים, לא טופס.
   ===================================================================== */
[hidden]{display:none!important}
html{overflow-anchor:none}
.dark{--sub:rgba(255,255,255,.9)}.light{--sub:rgba(0,0,0,.82)}
.fb-hint,.mw-count,.mw-note,.mw-wb,.ins-tr dd{color:var(--sub)}
.scene{position:relative;background:var(--bg);color:var(--fg);padding:150px var(--gut) 110px;overflow-x:clip}
.in{max-width:1600px;margin:0 auto}
.kick{margin:0;font-weight:300;font-size:clamp(30px,3.6vw,60px);line-height:1}
.big{margin:0;font-weight:900;font-size:clamp(56px,7vw,124px);line-height:.96;letter-spacing:-.01em}
.sub{margin:18px 0 0;font-size:clamp(20px,1.5vw,24px);font-weight:400;line-height:1.5;color:var(--sub);max-width:46ch}

/* ===== הירו ===== */
#s0{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:128px;padding-bottom:64px}
.hero{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 40px;align-items:center}
.h1{margin:0;font-weight:900;font-size:clamp(56px,7.4vw,144px);line-height:.96;letter-spacing:-.012em;text-wrap:balance}
.hero .sub{margin-top:26px}
.ink-h{position:relative;align-self:stretch;min-height:320px;color:#fff}
.ink-h canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf{margin-top:34px;max-width:860px}
.sf-box{position:relative;display:flex;align-items:center;gap:12px;height:88px;padding:0 30px 0 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg-24);transition:box-shadow .35s var(--ease)}
.sf-box:focus-within,.sf.bad .sf-box{box-shadow:inset 0 0 0 2px var(--fg)}
.sf input{flex:1;min-width:0;height:100%;margin:0;padding:0;background:none;border:0;outline:0;border-radius:0;color:var(--fg);font:inherit;font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:1;text-align:right;caret-color:var(--fg);-webkit-appearance:none;appearance:none}
.sf input::placeholder{color:var(--ph);opacity:1}
.sf .btn{flex:none;min-height:68px;padding-inline:30px 8px;font-size:20px}
.sf .btn .btn-ic{width:52px;height:52px}
.sf-err{display:none;align-items:center;gap:12px;margin:14px 0 0;font-size:18px;font-weight:700}
.sf-err::before{content:"!";display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:900;font-size:18px;line-height:1}
.sf.bad .sf-err{display:flex}
.sf-hint{margin:14px 0 0;font-size:18px;line-height:1.45;color:var(--sub);max-width:58ch}
.skip{margin-top:6px}
.nts{margin-top:12px}

#scan{min-height:100vh;min-height:100svh;padding-top:140px}
.scan-t{margin:0;font-weight:300;font-size:clamp(38px,5.6vw,96px);line-height:1.02;overflow-wrap:anywhere;text-wrap:balance}
.dots{display:inline-flex;gap:8px;margin-inline-start:14px;vertical-align:middle}
.dots i{width:10px;height:10px;border-radius:50%;background:currentColor;animation:dot 1s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}
.found{list-style:none;margin:24px 0 0;padding:0;border-top:1.5px solid var(--fg-24)}
.f-r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) auto;align-items:center;gap:6px 24px;min-height:60px;padding:6px 0;border-bottom:1.5px solid var(--fg-24);overflow:clip}
.f-l{font-size:20px;color:var(--sub)}
.f-v{text-align:right;font-size:clamp(22px,2.2vw,36px);font-weight:900;line-height:1.05;overflow-wrap:anywhere;min-width:0}
.f-a{display:flex;align-items:center;gap:14px;white-space:nowrap}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fg-24);font-size:16px}
.f-r.off .f-v{text-decoration:line-through;opacity:.45}
.scan-go{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ===== השם: העט על כל המסך ===== */
#s1{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:104px var(--gut) 44px}
.sheet{position:relative;flex:1;min-height:320px;margin:0 calc(var(--gut) * -1)}
.sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sline{position:absolute;right:var(--gut);left:var(--gut);top:66%;height:0;border-top:1.5px dashed var(--fg-24);pointer-events:none}
.sline::after{content:"";position:absolute;top:-14px;right:0;width:14px;height:14px;background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%)}
.ghost{position:absolute;right:var(--gut);left:var(--gut);top:66%;transform:translateY(-120%);margin:0;font-weight:300;font-size:clamp(34px,5.4vw,92px);line-height:1;color:var(--fg-50);text-align:center;pointer-events:none}
.name-f{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px 40px;align-items:end}
.name-f .ul input{font-size:clamp(26px,3vw,46px);font-weight:400;min-height:72px}
.name-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.name-a .btn{margin-inline-start:auto}
.memo{grid-column:1/-1;margin:0;min-height:27px;font-size:18px;line-height:1.4;color:var(--sub);max-width:70ch}
.snd{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:999px;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--fg-24);white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.snd[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.snd:active{scale:.97}

/* ===== קיר המילים ===== */
#s2{padding-top:130px}
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 72px;align-items:start}
.grp{margin-top:44px}
.grp-h{margin:0 0 12px;font-size:22px;font-weight:400;color:var(--sub);display:flex;flex-wrap:wrap;gap:0 14px;align-items:baseline}
.grp-h small{font-size:17px;color:var(--sub)}
.wall{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wd{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;min-width:44px;padding-inline:24px 8px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg-50);font-weight:700;font-size:clamp(20px,1.7vw,28px);line-height:1;white-space:nowrap;touch-action:manipulation;transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),scale .2s var(--ease)}
.wd-i{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg);transition:transform .45s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.wd-i::before,.wd-i::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px;transition:all .35s var(--ease)}
.wd-i::before{width:18px;height:2px;margin:-1px 0 0 -9px}
.wd-i::after{width:2px;height:18px;margin:-9px 0 0 -1px}
.wd[aria-expanded=true]{box-shadow:inset 0 0 0 2.5px var(--fg)}
.wd[aria-expanded=true] .wd-i{transform:rotate(45deg)}
.wd.on{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.wd.on .wd-i{background:var(--bg);color:var(--fg)}
.wd.on .wd-i::before{width:8px;margin:1px 0 0 -8px;transform:rotate(45deg)}
.wd.on .wd-i::after{width:2px;height:14px;margin:-8px 0 0 2px;transform:rotate(45deg)}
.wd.on[aria-expanded=true] .wd-i{transform:none}
@media (hover:hover){.wd:hover{box-shadow:inset 0 0 0 2.5px var(--fg)}}
.wd:active{scale:.97}
.wd-p{flex-basis:100%;min-width:0;overflow:hidden}
.wd-pi{padding:10px 0 26px;max-width:640px}
.side{position:sticky;top:112px;min-width:0}
.side-h{display:none}
.peek{display:none}

/* ===== גלריית התבניות ===== */
#s3{padding-bottom:64px;overflow:clip}
#s3 .pin{min-height:calc(100vh - 214px);display:flex;flex-direction:column;justify-content:center}
.g-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px 48px;align-items:start}
.g-tools{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:flex-end}
.g-tools .clr{justify-content:flex-end}
.track-w{margin:36px calc(var(--gut) * -1) 0;padding:6px var(--gut) 18px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.track-w::-webkit-scrollbar{display:none}
.is-pin .track-w{overflow:visible}
.track{display:flex;gap:24px;width:max-content}
.card{position:relative;flex:none;width:clamp(440px,38vw,620px);scroll-snap-align:center;text-align:right;border-radius:22px;padding:8px;box-shadow:inset 0 0 0 1.5px var(--fg-24);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.card[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--fg)}
@media (hover:hover){.card:hover{box-shadow:inset 0 0 0 3px var(--fg)}}
.card .mw-chrome{display:none}
.card .mw-frame{box-shadow:none;border-radius:16px;height:clamp(240px,38vh,380px);display:flex;align-items:center;background:#fff;overflow:hidden}
.card .mw-mail{width:100%;padding:18px 24px}
.card-b{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px 8px}
.card-n{font-size:clamp(28px,2.6vw,40px);font-weight:900;line-height:1}
.card-d{font-size:17px;color:var(--sub);text-align:left}
.card-m{position:absolute;top:16px;left:16px;display:none;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#000;color:#fff;font-size:16px;font-weight:700;z-index:2}
.card[aria-pressed=true] .card-m{display:inline-flex}

/* אחרי בחירה: התבנית הנבחרת גדולה, והשאר תמונות קטנות */
/* לוגו ושפה: הדבר הראשון בעיצוב, והתוצאה ליד */
#s3a{padding-top:130px;padding-bottom:0}
.d-first{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 72px;align-items:start}
.d-sec{margin-top:30px}
.d-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:clamp(24px,2vw,32px);font-weight:300;line-height:1.1}
.d-h .tag{font-size:16px;font-weight:700}
.d-pv{position:sticky;top:112px;min-width:0}
.d-pv .mw-frame{box-shadow:0 0 0 1.5px #000}
#s3{padding-top:110px}
#s3c{padding-top:8px;padding-bottom:72px}
.d-cr{padding-top:24px;border-top:1.5px solid var(--fg-24);max-width:640px}
.d-cr .chk{font-size:20px;font-weight:700}
.soc-sh{display:flex;margin-top:8px}
.soc-h{margin-top:8px;max-width:38ch}
#s3.is-picked{padding-bottom:40px}
#s3.is-picked .pin{min-height:0}
#s3.is-picked .track-w{overflow:visible;margin:28px 0 0;padding:0;scroll-snap-type:none}
#s3.is-picked .pin>.track-w{width:100%;max-width:1600px;margin-inline:auto}
#s3.is-picked .track{display:flex;flex-wrap:wrap;align-items:stretch;width:auto;gap:10px}
#s3.is-picked .card{width:clamp(96px,14vw,160px);flex:none;padding:4px;border-radius:12px;display:flex;flex-direction:column}
#s3.is-picked .card.chosen{order:-1;width:100%;padding:8px;border-radius:22px}
#s3.is-picked .card:not(.chosen) .card-m,#s3.is-picked .card:not(.chosen) .card-d{display:none}
#s3.is-picked .card:not(.chosen) .card-b{justify-content:center;padding:6px 0 4px}
#s3.is-picked .card:not(.chosen) .card-n{font-size:16px;font-weight:700;white-space:nowrap}
#s3.is-picked .card:not(.chosen) .mw-frame{height:clamp(64px,8.4vw,132px);min-height:0;border-radius:8px;display:block;position:relative}
#s3.is-picked .card:not(.chosen) .mw-mail{position:absolute;top:0;right:0;width:560px;padding:14px 18px}
#s3.is-picked .card.chosen .mw-frame{height:auto;min-height:220px}
.pick-bar{display:flex;align-items:center;justify-content:center}
.pick-bar .btn{min-height:52px}
.clr-l{margin:0 0 8px;font-size:18px;font-weight:700;text-align:right}
/* בדסקטופ: הנבחרת מימין, ומשמאל רשת של 3 על 2 שממלאה את כל הגובה שלה. בלי חלל ריק */
@media (min-width:1100px){
  #s3.is-picked .track{display:grid;grid-template-columns:minmax(0,640px) repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:12px}
  #s3.is-picked .card.chosen{order:0;grid-column:1;grid-row:1 / span 2;width:auto}
  #s3.is-picked .card:not(.chosen){width:auto}
  #s3.is-picked .pick-bar{order:9}
  #s3.is-picked .card:not(.chosen)>div:not(.card-b){flex:1;min-height:0;display:flex;flex-direction:column}
  #s3.is-picked .card:not(.chosen) .mw-frame{flex:1;height:auto;min-height:150px}
}
/* ===== התצוגה הגדולה ===== */
#s4{padding-top:120px}
.pv-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px;margin-bottom:28px}
.pv{max-width:1100px;margin:0 auto}
#s4 .mw-frame{transform-origin:50% 0}
.next-row{display:flex;justify-content:center;margin-top:56px}

/* ===== הסיום ===== */
#s5{padding-top:120px}
.fin-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end;margin-bottom:40px}
.ink-c{position:relative;height:clamp(110px,12vw,180px)}
.ink-c canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fin{margin-top:18px}
.ins-w{margin-top:88px}
.ins-w .sub{margin-bottom:22px}

/* ===== הרצועה השחורה שסוגרת ===== */
.close{background:#000;color:#fff;padding:130px var(--gut) 90px;--fg:#fff;--bg:#000;--fg-72:rgba(255,255,255,.72);--fg-24:rgba(255,255,255,.24);--fg-12:rgba(255,255,255,.12);--fg-50:rgba(255,255,255,.5)}
.cl-h{margin:0;font-weight:300;font-size:clamp(46px,7.4vw,136px);line-height:1;text-wrap:balance;max-width:14ch}
.cl-b{margin:26px 0 0;font-size:clamp(20px,1.5vw,24px);font-weight:400;line-height:1.5;color:var(--fg);opacity:.9;max-width:52ch}
.cl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:64px;border-top:1.5px solid var(--fg-24)}
.cl-c{padding:32px 0 36px;padding-inline-end:48px}
.cl-c+.cl-c{padding-inline:48px 0;border-inline-start:1.5px solid var(--fg-24)}
.cl-c h3{margin:0;font-weight:900;font-size:clamp(34px,3.6vw,60px);line-height:1}
.cl-c p{margin:14px 0 24px;font-size:20px;font-weight:400;line-height:1.45;color:var(--fg);opacity:.9;max-width:38ch}
.cl-x{margin:32px 0 0;font-size:18px}

.st-n{display:none}
.sg-steps{position:fixed;top:50%;right:6px;z-index:40;display:none;flex-direction:column;align-items:center;transform:translateY(-50%);mix-blend-mode:difference;color:#fff;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.sg-steps.on{opacity:1;visibility:visible;pointer-events:auto}
html.menu-open .sg-steps{visibility:hidden}
.sg-steps::before{content:"";position:absolute;top:22px;bottom:22px;left:50%;width:1.5px;margin-left:-.75px;background:currentColor;opacity:.4}
.st-b{position:relative;display:grid;place-items:center;width:44px;height:64px;color:#fff}
.st-d{position:relative;width:9px;height:9px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1.5px #fff;transition:transform .35s var(--ease),background-color .35s var(--ease)}
.st-b[aria-current=step] .st-d{background:#fff;transform:scale(1.5)}
.st-w{position:absolute;top:50%;right:32px;transform:translateY(-50%);font-size:16px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;writing-mode:vertical-rl;transition:opacity .3s var(--ease)}
.st-b[aria-current=step] .st-w{opacity:1}
@media (min-width:1024px){.sg-steps{display:flex}}
/* ===== טאבלט ===== */
@media (max-width:1023px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .st-n{display:block;margin:0 0 10px;font-size:17px;font-weight:700}
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .hero-t{display:contents}
  .hero-t>*{order:3}
  .h1{order:1}
  .ink-h{order:2;min-height:180px;height:22vh;margin:6px 0 0}
  .two{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:48;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:#000;box-shadow:0 -1.5px 0 rgba(255,255,255,.5);transform:translateY(102%);visibility:hidden;max-height:76vh;overflow:auto;--fg:#fff;--bg:#000;--fg-72:rgba(255,255,255,.72);--fg-24:rgba(255,255,255,.24)}
  .side.is-open{transform:none;visibility:visible}
  .side-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#fff;font-size:20px;font-weight:700}
  .peek{position:fixed;left:0;right:0;bottom:0;z-index:47;display:flex;align-items:center;justify-content:center;min-height:56px;padding-bottom:env(safe-area-inset-bottom);background:#000;color:#fff;box-shadow:0 -1.5px 0 #fff;font-size:18px;font-weight:700;white-space:nowrap;transition:opacity .3s var(--ease)}
  #s2{padding-bottom:120px}
  .peek.gone{opacity:0;pointer-events:none}
  .g-top{grid-template-columns:minmax(0,1fr)}
  .d-first{grid-template-columns:minmax(0,1fr)}
  .d-pv{position:static}
  #s3.is-picked .pick-bar{width:100%;justify-content:flex-start}
  .g-tools,.g-tools .clr{justify-content:flex-start}
  .fin-grid{grid-template-columns:minmax(0,1fr)}
  .fin-sec{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .card{width:min(70vw,520px)}
  #s3 .pin{min-height:0}
}
/* ===== מובייל: טקסט ממורכז, סצנה לכל מסך ===== */
@media (max-width:720px){
  .scene{padding:112px 16px 80px;text-align:center}
  #s0{align-items:flex-start;padding-top:96px;padding-bottom:40px}
  .h1{font-size:clamp(50px,14.4vw,92px)}
  .hero .sub,.sub,.sf-hint{margin-inline:auto}
    .ink-h{min-height:130px;height:17svh;margin-top:2px}
  .sf-box{height:68px;padding:0 18px 0 6px;gap:8px}
  .sf input{font-size:20px;text-align:center}
  .sf .btn{min-height:56px;padding-inline:18px 6px;font-size:17px;gap:8px}
  .sf .btn .btn-ic{width:44px;height:44px}
  .sf-err{justify-content:center;text-align:right}
  .skip{justify-content:center}
  .nts{text-align:center}
  .scan-t{font-size:clamp(34px,10vw,60px)}
  .f-r{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:14px 0}
  .scan-go{justify-content:center}
  #s1{padding:84px 16px 30px}
  .sheet{min-height:34svh;margin:0 -16px}
  .sline{right:16px;left:16px}
  .ghost{right:16px;left:16px}
  .name-f{justify-items:stretch;text-align:center}
  .name-a .btn{margin-inline:auto}

  .name-f .ul input{font-size:26px;min-height:60px}
  .name-a{justify-content:center;flex-wrap:wrap}
  .memo{margin-inline:auto}
  .grp-h{justify-content:center}
  .wall{justify-content:center;gap:8px}
  .wd{font-size:20px;min-height:56px;padding-inline:20px 6px;gap:10px}
  .wd-pi{margin-inline:auto}
  .g-tools,.g-tools .clr{justify-content:center}
  .g-tools{flex-direction:column}
  .card{width:82vw;padding:6px;text-align:center}
  #s3.is-picked .track{justify-content:center;gap:6px}
  #s3.is-picked .card{width:calc((100% - 24px) / 5);min-width:44px}
  #s3.is-picked .card.chosen{width:100%;margin:0 0 6px}
  #s3.is-picked .pick-bar{order:-2;width:100%;margin-bottom:10px}
  #s3.is-picked .card:not(.chosen) .mw-frame{height:60px;min-height:0}
  .clr-l{text-align:center}
  .d-first{grid-template-columns:minmax(0,1fr)}
  .d-pv{position:static}
  .d-h{justify-content:center}
  .d-sec,.d-c{text-align:center}
  .d-cr{margin-inline:auto;text-align:center}
  .soc-h{margin-inline:auto}
  #s3.is-picked .card:not(.chosen) .card-n{font-size:16px;letter-spacing:-.02em}
  .card-b{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .card-d{text-align:center}
  .card .mw-frame{height:auto;min-height:230px}
  .card .mw-mail{padding:14px}
  .track-w{margin-inline:-16px;padding-inline:9vw;scroll-snap-type:x mandatory}
  .pv-top{flex-direction:column;align-items:center;text-align:center}
  .fin-sec{grid-template-columns:minmax(0,1fr)}
  .fin{margin-top:8px}
  .ins-w{margin-top:64px}
  .close{padding:88px 16px 64px;text-align:center}
  .cl-h{margin-inline:auto;font-size:clamp(44px,12.4vw,72px)}
  .cl-b{margin-inline:auto}
  .cl-cards{grid-template-columns:minmax(0,1fr);margin-top:44px}
  .cl-c,.cl-c+.cl-c{padding:30px 0 34px;border-inline-start:0;border-bottom:1.5px solid var(--fg-24)}
  .cl-c p{margin-inline:auto}
}

/* ===== מילוי מהאתר ===== */
.f-v img{display:block;max-width:220px;max-height:64px;width:auto;height:auto;padding:6px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.f-ex{grid-column:1/-1;margin:0;font-size:18px;line-height:1.4;color:var(--sub);max-width:64ch}
.f-ch{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.f-ch button{display:grid;place-items:center;min-width:88px;min-height:64px;padding:6px 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--fg-24);font-size:18px;font-weight:700;transition:box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.f-ch button[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--fg)}
.f-ch.ph button{min-height:44px;min-width:44px}
.f-ch.ph button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.f-ch img{display:block;max-width:150px;max-height:52px;width:auto;height:auto;padding:4px;border-radius:6px;background:#fff}
.scan-b{margin:22px 0 0;font-size:clamp(20px,1.5vw,24px);line-height:1.5;color:var(--sub);max-width:52ch;overflow-wrap:anywhere}
.scan-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px}
.lgc-st{font-weight:700}
.sc-note{margin:14px 0 0;font-size:17px;color:var(--sub)}
@media (max-width:720px){
  .f-ch{justify-content:center}
  .f-ex{margin-inline:auto;text-align:center}
  .scan-b{margin-inline:auto}
  .scan-acts{justify-content:center}
  .f-v img{margin-inline:auto}
}

/* ===== חתימה שהגיעה בקישור: קודם רואים לאן היא מובילה ===== */
.lk #s0{visibility:hidden}
#rv{min-height:100vh;min-height:100svh;padding-top:130px}
.rv-list{list-style:none;margin:28px 0 0;padding:0;border-top:1.5px solid var(--fg-24)}
.rv-r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4px 24px;align-items:baseline;padding:12px 0;border-bottom:1.5px solid var(--fg-24);font-size:18px;line-height:1.4}
.rv-l{color:var(--sub)}
.rv-v{min-width:0;overflow-wrap:anywhere}
.rv-v b{display:block;font-size:clamp(20px,1.6vw,26px);font-weight:700;line-height:1.25;text-align:right}
.rv-v small{display:block;margin-top:2px;font-size:16px;color:var(--sub);text-align:right}
.rv-legal .rv-v{font-size:17px;color:var(--sub)}
.rv-note{display:block;color:var(--sub)}
.rv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px}
.rv-pv{position:sticky;top:112px;min-width:0}
.fin-cr .nt-row{margin-top:12px}
@media (max-width:1023px){.rv-pv{position:static}}
@media (max-width:720px){
  .rv-r{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .rv-v b,.rv-v small{text-align:center}
  .rv-acts{justify-content:center}
}
.f-warn{order:-1;margin-bottom:6px}
.f-warn p{margin:0}
.f-warn .w-link{font-size:18px}