/* Backdrops for the landing page, 31 October 2026 (owner approved direction A).
   1. Section colours: hero deep navy, fees black, guard navy, contact electric.
      Tokens from landing.css are re-scoped inside .dk sections, so components follow;
      the term-sheet card, the fee card and the form fields stay on paper.
   2. Background layers drawn by backdrops.js: lattice (hero), track changes (rounds),
      silk light (fees), glyph field (guard). Hebrew is the default direction; the
      html:not([dir=rtl]) block at the end mirrors them for English. */

/* Direction A, alternating: hero deep navy, fees black, guard navy, contact electric.
   Tokens are re-scoped per section, so every component inside follows; the two
   "document" cards (term sheet, fee card) and the form fields stay on paper. */
.dk{
  --ink:#EEF2F8;--ink-2:#C9D3E0;--muted:#9AABC0;
  --rule:rgba(238,242,248,.17);--rule-soft:rgba(238,242,248,.09);
  --sys-ink:#8FAEFF;--sys-line:#3A5A9E;--law:rgba(227,207,168,.10);--law-line:#8C7A57;--law-ink:#E3CFA8;
  --oth-ink:#F2978A;--ok-ink:#8FD6AE;
  --fx-ink:238,242,248;--fx-silk:110,147,255;--fx-silk-a:2.4;
  background:var(--paper);color:var(--ink);border-color:var(--rule-soft);
}
#hero.dk{--paper:#061423;--band:#061423}
#fees.dk{--paper:#07090C;--band:#07090C}
#guard.dk{--paper:#0A1E33;--band:#0A1E33}
#contact.dk{--paper:#1550FF;--band:#1550FF;
  --ink:#FFFFFF;--ink-2:#E8EEFF;--muted:#D6E1FF;--rule:rgba(255,255,255,.38);--rule-soft:rgba(255,255,255,.22);--sys-ink:#FFFFFF}
.top{background:rgba(252,252,250,.97)}
.dk h1,.dk h2,.dk h3{color:var(--ink)}
.dk .btn{background:#F3F2EE;border-color:#F3F2EE;color:#0A1E33}
@media (hover:hover) and (pointer:fine){.dk .btn:hover{background:#FFFFFF;border-color:#FFFFFF}}
.dk .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
@media (hover:hover) and (pointer:fine){.dk .btn.ghost:hover{border-color:var(--ink)}}
#contact.dk .btn{background:#0A1E33;border-color:#0A1E33;color:#FFFFFF}
@media (hover:hover) and (pointer:fine){#contact.dk .btn:hover{background:#061423;border-color:#061423}}
.dk a:focus-visible,.dk button:focus-visible{outline-color:#FFFFFF}
/* paper cards keep the light palette */
.dk .spec,.dk .f input,.dk .f select,.dk .f textarea{
  --paper:#FCFCFA;--band:#F3F2EE;--ink:#22344A;--ink-2:#4A5A6E;--muted:#656B77;--rule:#E2DFD8;--rule-soft:#EDEAE4;
  --sys-ink:#3F5FD8;--sys-line:#C3D2FA;--law:#F7F1E7;--law-line:#D9C7A6;--law-ink:#6B5532;--oth:#FCEDE8;--oth-line:#EBB4A6;--oth-ink:#A84A38;
  color:var(--ink)}
.dk .spec{box-shadow:0 18px 50px rgba(0,0,0,.35)}
#contact.dk .f input:focus,#contact.dk .f select:focus,#contact.dk .f textarea:focus{outline-color:#0A1E33;border-color:#0A1E33}
#contact.dk .ack,#contact.dk .form-msg{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
#contact.dk .ack input{accent-color:#0A1E33}
#contact.dk .form-msg.bad{border-inline-start-color:#FFD2CC}

/* ---------- background layers ---------- */

:root{
  --fx-electric:#1550FF;
  --fx-grid-minor:rgba(34,52,74,.035);
  --fx-grid-major:rgba(34,52,74,.06);
  --fx-del:#B23A3A;
  --fx-ins:#1550FF;
  --fx-panel-bg:#FFFFFF;
  --fx-panel-ink:#22344A;
  --fx-panel-rule:#E2DFD8;
}
/* host sections */
.fx-host{position:relative;isolation:isolate;overflow:hidden}
.fx-host>.wrap{position:relative;z-index:1}
.fx-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.fx-layer canvas{display:block;width:100%;height:100%}
/* 2. lattice: strongest on the left (the spec column in RTL), fading under the headline */
#fx-lattice{-webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%)}
/* 3. redline text */
#fx-redline{
  direction:rtl;font-family:"Frank Ruhl Libre","Spectral",Georgia,serif;font-size:15px;line-height:2.15;
  color:rgba(34,52,74,.16);padding:56px max(16px,3vw) 0;overflow:hidden;
  inset:0 46% auto 0;height:min(520px,60%);
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 45% 45%,#000 35%,transparent 85%);
  mask-image:radial-gradient(ellipse 80% 75% at 45% 45%,#000 35%,transparent 85%);
}
#fx-redline p{margin:0;white-space:nowrap}
#fx-redline .del{color:inherit;background:linear-gradient(var(--fx-del),var(--fx-del)) no-repeat 100% 55%/0% 1.5px;transition:background-size 1.1s var(--ease,ease),color 1.1s}
#fx-redline .del.on{color:rgba(178,58,58,.5);background-size:100% 1.5px}
#fx-redline .ins{display:none;color:rgba(21,80,255,.55);border-bottom:1.5px solid rgba(21,80,255,.45)}
#fx-redline .ins.on{display:inline;animation:fx-ins 1.2s .5s both}
@keyframes fx-ins{from{opacity:0}to{opacity:1}}
#fx-redline .num{font-family:"IBM Plex Mono",monospace;font-size:12px;margin-inline-end:10px}
/* 4. silk + 5. glyphs fade toward the text side */
#fx-silk{-webkit-mask-image:linear-gradient(to right,#000 20%,transparent 85%);mask-image:linear-gradient(to right,#000 20%,transparent 85%)}
#fx-glyph{-webkit-mask-image:linear-gradient(to right,#000 10%,rgba(0,0,0,.6) 45%,transparent 80%);mask-image:linear-gradient(to right,#000 10%,rgba(0,0,0,.6) 45%,transparent 80%)}
@media (max-width:700px){
  #fx-redline{display:none}
  #fx-lattice,#fx-silk,#fx-glyph{-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 50%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 50%,transparent 85%)}
}

/* English: layers sit on the right, away from the headline */
html:not([dir="rtl"]) #fx-lattice{-webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%)}
html:not([dir="rtl"]) #fx-silk{-webkit-mask-image:linear-gradient(to left,#000 20%,transparent 85%);mask-image:linear-gradient(to left,#000 20%,transparent 85%)}
html:not([dir="rtl"]) #fx-glyph{-webkit-mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,.6) 45%,transparent 80%);mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,.6) 45%,transparent 80%)}
html:not([dir="rtl"]) #fx-redline{direction:ltr;font-family:"Spectral",Georgia,serif;inset:0 0 auto 46%;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 55% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 80% 75% at 55% 45%,#000 35%,transparent 85%)}
html:not([dir="rtl"]) #fx-redline .del{background-position:0% 55%}
@media (max-width:700px){html:not([dir="rtl"]) #fx-lattice,html:not([dir="rtl"]) #fx-silk,html:not([dir="rtl"]) #fx-glyph{-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 50%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 50%,transparent 85%)}}

/* ---------- Hero on paper, 3 November 2026 (owner chose direction F) ----------
   The hero leaves the navy: light paper, the lattice ridge behind the eight
   layers (backdrops.js), and the layers redrawn in the light palette. The gold of
   "Me" moves to the paper tokens (law-ink / law-line) so it keeps its contrast. */
#hero:not(.dk){background:var(--paper)}
#hero:not(.dk) .lx-pl{border-color:rgba(63,95,216,.55);background:rgba(21,80,255,.035)}
#hero:not(.dk) .lx-pl.is-on{border-color:#3F5FD8;background:rgba(21,80,255,.13)}
#hero:not(.dk) .lx-pl.is-me{border-color:#D9C7A6;background:rgba(247,241,231,.7)}
#hero:not(.dk) .lx-pl.is-me.is-on{border-color:#A88850;background:rgba(217,199,166,.45);
  box-shadow:0 0 0 2px rgba(217,199,166,.55),0 0 44px rgba(217,199,166,.65)}
#hero:not(.dk) .lx-pl.is-out.is-on{border-color:#1550FF;background:rgba(21,80,255,.38)}
#hero:not(.dk) .lx-doc{background:#FFFFFF;box-shadow:0 0 0 1px #E2DFD8,0 12px 28px rgba(22,38,58,.16)}
#hero:not(.dk) .lx-pen{background:#A88850}
#hero:not(.dk) .lx-ok{background:#6B5532}
#hero:not(.dk) .lx-ok svg{stroke:#FFFFFF}
#hero:not(.dk) .lx-lb.is-me.is-on,#hero:not(.dk) .lx-lb.is-me.is-on b{color:#6B5532}
#hero:not(.dk) .lx-badge{color:#FFFFFF;background:#6B5532}
/* the wordmark: LEVIT in capitals, in the sans, the same lockup as the LinkedIn banner.
   No "Adv." beside it (owner, 4 November 2026); the link keeps the full name for screen readers. */
.mark b{font-family:var(--sans);font-weight:600;letter-spacing:.07em}
.mark .mark-t > span{display:none}
/* larger wordmark and mark, in proportion (owner, 4 November 2026): about a third
   bigger than before; steps down on phones so the top bar stays one line, 64px or less */
.mark{gap:13px}
.mark-logo{width:40px;height:40px}
.mark b,[dir="rtl"] .mark b{font-size:1.6rem;letter-spacing:.07em;line-height:1}
@media(max-width:400px){.mark{gap:9px}.mark-logo{width:32px;height:32px}.mark b,[dir="rtl"] .mark b{font-size:1.28rem}}
@media(max-width:339px){.mark-logo{width:28px;height:28px}.mark b,[dir="rtl"] .mark b{font-size:1.1rem;letter-spacing:.05em}}
/* Hebrew top bar laid out like the English one (owner, 4 November 2026): the mark
   and LEVIT on the left, the symbol to the left of the name, the button on the right.
   The nav keeps its Hebrew reading order. */
[dir="rtl"] .top-in{direction:ltr}
[dir="rtl"] .topnav{direction:rtl}

/* logo 4 (owner, 4 November 2026): the grid lines run out of the square and the
   name sits inside them, the person inside the system. One SVG for the mark and the
   name; the HTML name stays for the build and is hidden (the link keeps its aria-label). */
.mark-lock{display:block;height:54px;width:auto;color:var(--ink);overflow:visible}
.mark-lock .ml-ext{stroke:currentColor;stroke-width:.8;opacity:.28;fill:none}
.mark-lock .ml-v{opacity:.16}
.mark-lock .ml-name{font-family:var(--sans);font-weight:600;font-size:15.6px;letter-spacing:.09em;fill:currentColor}
.mark .mark-t{display:none}
.top-in{padding-block:10px}
@media(max-width:400px){.top-in{padding-block:12px}.mark-lock{height:40px}}