/* TZOR · shared site system. Tokens, chrome, type, forms, motion.
   Locked in docs/00-foundation.md §5 — 7 sizes, 3 weights, ground-decides-accent.
   Page-specific rules live in that page's own <style>. */
/* Assistant — variable 200..800, OFL. Only 300 / 500 / 800 are used. */
@font-face{
  font-family:"Assistant";
  src:url("/assets/fonts/assistant.woff2") format("woff2-variations"),
      url("/assets/fonts/assistant.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:        #F2EDE5;
  --bg-alt:    #E9E2D4;
  --bg-deep:   #1B1814;
  --ink:       #16130F;
  --ink-soft:  #2E2922;
  --ink-muted: #6F6354;
  --rule:      #D6CBB6;
  --rule-soft: #E1D6C0;

  /* The ground decides the accent token — docs/00-foundation.md §4.
     bone -> --accent 4.66:1 · bg-alt -> --accent-deep 5.86:1 · deep -> --accent-tint 13.49:1 */
  --accent:      #B04A2F;
  --accent-deep: #8E3A24;
  --accent-tint: #F4DDC7;
  --live:        #2C6E3F;

  /* 7 sizes, 3 weights. A fourth weight or an eighth size is a bug. */
  --t-micro: 11px;
  --t-small: 13px;
  --t-body:  16px;
  --t-lede:  20px;
  --t-h3:    28px;
  --t-h2:    clamp(32px, 5vw, 64px);
  --t-h1:    clamp(40px, 7vw, 112px);

  --pad-x: clamp(20px, 6vw, 96px);
  --pad-y: clamp(64px, 9vh, 128px);
  --max:   1240px;

  --font: "Assistant", -apple-system, system-ui, "Segoe UI", sans-serif;

  --dur-fast: 200ms;
  --dur-base: 320ms;
  --ease-in:  cubic-bezier(0.22, 0.61, 0.36, 1);

  --radius-chip: 12px;
  --radius-card: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:300;
  font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* `bolder` resolves RELATIVE to the parent, so <strong> inside a 300-weight
   paragraph computes to 400 — emphasis that is almost invisible, and a fourth
   weight on the page. Pin the WEIGHT everywhere; the colour must stay inherited.
   Pinning colour to --ink put dark ink on the dark success panel (1.12:1) — the
   emphasis is the weight, and weight works on any ground. */
strong,b{font-weight:800;color:inherit}
img,svg{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;top:8px;left:8px;
  background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:8px;
  font-size:var(--t-small);font-weight:800;letter-spacing:0.06em;
  transform:translateY(-200%);
  transition:transform var(--dur-fast) var(--ease-in);
  z-index:200;
}
.skip:focus{transform:translateY(0)}

/* Case/product page back link. display:flex (not inline-flex) so the eyebrow
   that follows starts on its own line instead of sitting alongside it. */
.back{
  font-size:var(--t-small);font-weight:800;letter-spacing:0.04em;color:var(--ink-muted);
  display:flex;align-items:center;gap:8px;min-height:44px;width:fit-content;margin-bottom:8px;
  transition:color var(--dur-fast) var(--ease-in);
}
html[data-lang="he"] .back{letter-spacing:0}
.back:hover{color:var(--ink)}

html[data-lang="en"] [lang="he"]{display:none !important}
html[data-lang="he"] [lang="en"]{display:none !important}
html[data-lang="he"] .arrow{transform:scaleX(-1)}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(242,237,229,.88);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-in);
}
.nav.scrolled{border-color:var(--rule)}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{font-weight:800;font-size:var(--t-small);letter-spacing:0.2em;display:flex;align-items:center;gap:10px;white-space:nowrap;min-height:44px}
.brand-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);line-height:0}
.brand-mark img{height:100%;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center;font-size:var(--t-small);font-weight:500;color:var(--ink-muted)}
.nav-links a{transition:color var(--dur-fast) var(--ease-in);min-height:44px;display:inline-flex;align-items:center}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;gap:10px;align-items:center}
.lang-toggle{
  display:inline-flex;align-items:center;
  border:1px solid var(--rule);border-radius:999px;padding:3px;
  font-size:var(--t-micro);font-weight:800;letter-spacing:0.08em;
}
.lang-toggle button{
  padding:8px 12px;border-radius:999px;color:var(--ink-muted);
  min-width:40px;min-height:34px;transition:all var(--dur-fast) var(--ease-in);
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.nav-cta{
  font-size:var(--t-small);font-weight:800;letter-spacing:0.04em;
  padding:12px 20px;background:var(--ink);color:var(--bg);
  border-radius:999px;min-height:44px;display:inline-flex;align-items:center;
  transition:background var(--dur-fast) var(--ease-in);white-space:nowrap;
}
.nav-cta:hover{background:var(--accent)}
@media (max-width:900px){.nav-links{display:none}.nav-cta{padding:10px 16px}}

/* ============ TYPE ============ */
.eyebrow{
  font-size:var(--t-micro);font-weight:800;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:14px;margin-bottom:28px;
}
html[data-lang="he"] .eyebrow{letter-spacing:0.1em}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent);flex-shrink:0}
.section.alt .eyebrow{color:var(--accent-deep)}
.section.alt .eyebrow::before{background:var(--accent-deep)}
.section.deep .eyebrow{color:var(--accent-tint)}
.section.deep .eyebrow::before{background:var(--accent-tint)}

h1,h2,h3{font-family:var(--font);line-height:1.04;letter-spacing:-0.03em;color:var(--ink);font-weight:800}
html[data-lang="he"] h1,html[data-lang="he"] h2,html[data-lang="he"] h3{letter-spacing:-0.015em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.lede{font-size:var(--t-lede);line-height:1.5;font-weight:300;color:var(--ink-soft);max-width:60ch}

/* ============ LAYOUT ============ */
.section{padding:var(--pad-y) var(--pad-x);border-top:1px solid var(--rule-soft)}
.section:first-of-type{border-top:0}
.wrap{max-width:var(--max);margin:0 auto}
.section.alt{background:var(--bg-alt)}
.section.deep{background:var(--bg-deep);color:var(--bg)}
.section.deep h1,.section.deep h2,.section.deep h3{color:var(--bg)}
.section.deep .lede{color:rgba(242,237,229,.86)}

/* ============ HERO ============ */
.hero{padding-top:clamp(56px,11vh,140px);padding-bottom:clamp(56px,9vh,120px);border-top:0}
.hero h1{margin-bottom:28px;max-width:16ch}
.hero .lede{margin-bottom:34px}
.proof{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  padding:22px 0;margin-bottom:34px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:var(--t-small);font-weight:500;color:var(--ink-muted);
}
.proof b{font-weight:800;color:var(--ink)}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;
  font-weight:500;font-size:var(--t-body);min-height:52px;
  transition:all var(--dur-fast) var(--ease-in);
}
.btn-primary{background:var(--ink);color:var(--bg);font-weight:800}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);font-weight:500}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.section.deep .btn-ghost{border-color:var(--bg);color:var(--bg)}
.section.deep .btn-ghost:hover{background:var(--bg);color:var(--bg-deep)}
.btn .arrow{transition:transform var(--dur-fast) var(--ease-in)}
.btn:hover .arrow{transform:translateX(4px)}
html[data-lang="he"] .btn:hover .arrow{transform:scaleX(-1) translateX(4px)}

/* ============ ENGAGEMENT ============ */
.pitch{max-width:62ch}
.pitch p{font-size:var(--t-lede);line-height:1.5;font-weight:300;color:var(--ink-soft);margin-bottom:30px}

/* ============ CONTACT ============ */
.cta-block{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media (min-width:900px){.cta-block{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:72px}}
.cta-meta{display:flex;flex-direction:column;gap:20px}
.cta-row{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid rgba(242,237,229,0.16)}
.cta-row:last-child{border-bottom:0}
.cta-row .k{font-size:var(--t-micro);font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-tint)}
html[data-lang="he"] .cta-row .k{letter-spacing:0.05em}
.cta-row .v{font-size:var(--t-body);font-weight:500;color:var(--bg)}
/* mailto/tel are the two most-tapped things on a phone — they get a real target */
.cta-row .v a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--dur-fast) var(--ease-in)}
.cta-row .v a:hover{color:var(--accent-tint)}

/* ============ LEAD FORM ============ */
.lead-form{margin-top:34px;display:flex;flex-direction:column;gap:20px;max-width:560px}
/* Honeypot. Do NOT use left:-10000px — in RTL the inline-start flips and it adds
   ~10,000px of real scrollable document width. Clip-rect, same as .sr-only. */
.lf-honeypot{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lf-row{display:flex;flex-direction:column;gap:8px}
.lf-row-split{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){
  .lf-row-split{grid-template-columns:1fr 1fr}
  .lf-row-split > div{display:flex;flex-direction:column;gap:8px}
}
.lf-row label{font-size:var(--t-micro);font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-tint)}
html[data-lang="he"] .lf-row label{letter-spacing:0.04em}
.lf-row label em{color:var(--accent-tint);font-style:normal;margin-inline-start:2px}
.lf-row input,.lf-row select,.lf-row textarea{
  font:inherit;font-size:var(--t-body);font-weight:300;
  padding:14px 16px;
  background:rgba(242,237,229,0.06);color:var(--bg);
  border:1px solid rgba(242,237,229,0.24);border-radius:var(--radius-chip);
  width:100%;transition:all var(--dur-fast) var(--ease-in);
  font-family:var(--font);-webkit-appearance:none;appearance:none;
}
.lf-row textarea{resize:vertical;min-height:120px;line-height:1.5}
.lf-row select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F4DDC7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 18px center;
  padding-right:44px;cursor:pointer;
}
html[data-lang="he"] .lf-row select{background-position:left 18px center;padding-right:16px;padding-left:44px}
.lf-row input::placeholder,.lf-row textarea::placeholder{color:rgba(242,237,229,0.45)}
.lf-row input:focus,.lf-row select:focus,.lf-row textarea:focus{
  outline:none;border-color:var(--accent-tint);
  background:rgba(242,237,229,0.1);
  box-shadow:0 0 0 3px rgba(244,221,199,0.22);
}
.lf-row.invalid input,.lf-row.invalid select,.lf-row.invalid textarea{
  border-color:#FFB59E;background:rgba(255,181,158,0.08);
}
.lf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.lf-submit{background:var(--accent);color:var(--bg);font-weight:800}
.lf-submit:hover{background:var(--accent-tint);color:var(--bg-deep)}
.lf-submit:disabled{opacity:.6;cursor:wait}
.lf-status{font-size:var(--t-small);line-height:1.5;color:var(--accent-tint);min-height:1px}
.lf-status.error{color:#FFB59E}
.lf-success{
  margin-top:34px;padding:30px;
  background:rgba(242,237,229,0.06);
  border:1px solid rgba(242,237,229,0.18);
  border-radius:var(--radius-card);
  max-width:560px;display:flex;flex-direction:column;gap:12px;
}
.lf-success-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  background:var(--live);color:var(--bg);
  font-weight:800;font-size:var(--t-lede);margin-bottom:4px;
}
.lf-success h3{font-size:var(--t-h3);color:var(--bg)}
.lf-success p{font-size:var(--t-small);color:var(--accent-tint)}
@media (max-width:600px){
  .lf-actions{flex-direction:column;align-items:stretch}
  .lf-actions .btn{width:100%}
}

/* ============ FOOTER ============ */
.footer{
  padding:32px var(--pad-x) calc(32px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule);
  background:var(--bg);color:var(--ink-muted);font-size:var(--t-small);
}
.footer-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:16px 24px;
  justify-content:space-between;align-items:center;
}
.footer .brand{font-size:var(--t-small)}
.footer .brand-mark{width:18px;height:18px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.footer-links a{
  color:var(--ink-muted);min-height:34px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease-in),border-color var(--dur-fast) var(--ease-in);
}
.footer-links a:hover{color:var(--ink);border-bottom-color:var(--rule)}

/* ============ MOBILE NAV ============ */
/* There is deliberately NO floating dock. It was built, then failed condition 1 of
   its own acceptance check in docs/00-foundation.md §4: at 390px it sat on top of
   card recognition lines, statuses and links at several scroll positions, in EN and
   HE. A fixed element over a continuous shelf cannot satisfy "never obscures card
   text" — so per that same rule, the content wins and the pattern goes. The sticky
   top bar keeps a persistent conversion path instead. */
/* ============ MOTION ============ */
/* Entry motion: scale + rise. Movement from scale contrast, per
   web-experience-reference §5.5 — not from effects. Stagger is set per element
   by site.js as --d, so a row arrives as a row instead of all at once. */
.rise{
  opacity:0;transform:translateY(22px) scale(.965);
  transition:opacity .72s var(--ease-in),transform .72s var(--ease-in);
  transition-delay:var(--d,0ms);
}
.rise.in{opacity:1;transform:none}

/* Scroll progress. It rides the bottom edge of the sticky bar rather than
   floating over the page: a position:fixed strip is still an overlay, and the
   rule this site holds is that no fixed element covers card text. */
.nav{position:sticky}
.progress{
  position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left center;
  background:var(--accent);pointer-events:none;
}
html[dir="rtl"] .progress{transform-origin:right center}

/* Half-true chrome, Poolsuite's lesson: the clock is actually correct. */
.clock{
  font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;
  color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.clock .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-inline-end:7px;vertical-align:middle}
@media (max-width:1080px){.clock{display:none}}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rise{opacity:1;transform:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}