/* Makor: restyle of the existing site. Same markup, same animations, new stylesheet.

   Register from lift/wp-theme/lift/v2.php: hairline display weights, POSITIVE
   tracking, open leading, centred, one rationed accent used semantically.
   Palette is now bright: warm paper and ink, not warm black. */

:root {
  --paper: #F5F2EA;
  --paper2: #FFFFFF;
  --sand: #EBE6DA;
  --ink: #17140F;
  --ink2: rgba(23, 20, 15, .74);
  --ink3: rgba(23, 20, 15, .62);   /* .48 was tuned for cream-on-black: 3.1:1 on paper, fails WCAG AA */
  --line: rgba(23, 20, 15, .13);
  --line2: rgba(23, 20, 15, .30);
  --accent: #8A6D1F;              /* brass. one accent, semantic only */
  --accent-ink: #7B601A;          /* same brass, darkened for text under 14px (AA) */
  --heb: 'Heebo', -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --w: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  background: var(--paper); color: var(--ink);
  font-family: var(--heb); font-weight: 300; font-size: 16px;
  line-height: 1.8; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: rgba(138, 109, 31, .18) }
a { color: inherit }

.container { max-width: var(--w); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px) }
.narrow > * { max-width: 760px; margin-inline: auto }
.narrow-p { max-width: 660px; margin-inline: auto }
.vignette { display: none }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums }

/* ---------------- type ---------------- */
h1.display { font-weight: 100; font-size: clamp(38px, 6.6vw, 84px); line-height: 1.22; letter-spacing: .045em }
h2 { font-weight: 200; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.34; letter-spacing: .05em; margin-block-end: 30px }
h3 { font-weight: 400; font-size: 1.02rem; letter-spacing: .04em; line-height: 1.5 }
.serif-accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .01em }
/* Playfair carries NO Hebrew: in RTL the accent is weight and colour, not a serif. */
[dir="rtl"] .serif-accent { font-family: var(--heb); font-style: normal; font-weight: 200; color: var(--accent) }
[dir="rtl"] .heb-visual span { font-family: var(--heb); font-weight: 100 }

.lede { font-weight: 200; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.8; letter-spacing: .03em; color: var(--ink2) }
.body-lg { font-weight: 300; font-size: 16.5px; line-height: 1.9; color: var(--ink2); max-width: 68ch; margin-block-end: 20px }
.demo-note, .footer-fine { font-weight: 300; font-size: 13px; letter-spacing: .04em; color: var(--ink3); margin-block-start: 22px }

/* section labels leave the page flow: they live in the scroll rail instead */
.section .kicker { display: none }
.kicker-dot { display: none }

/* ---------------- scroll rail: where the small labels went ---------------- */
.rail {
  position: fixed; z-index: 90; inset-inline-start: clamp(14px, 2.4vw, 30px); inset-block-start: 50%;
  transform: translateY(-50%); display: grid; gap: 2px;
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.rail.on { opacity: 1; pointer-events: auto }
.rail a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 400; font-size: 10.5px; letter-spacing: .18em; color: var(--ink3);
  padding: 5px 0; transition: color .4s var(--ease);
}
.rail i { display: block; width: 16px; height: 1px; background: currentColor; flex: none; transition: width .5s var(--ease) }
.rail a:hover { color: var(--ink) }
.rail a.now { color: var(--accent-ink) }
.rail a.now i { width: 34px }
.rail span { opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ease), transform .4s var(--ease) }
.rail a.now span, .rail:hover a span { opacity: 1; transform: none }
@media (max-width: 1180px) { .rail { display: none } }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 12.5px; letter-spacing: .26em; padding-inline-start: calc(32px + .26em);
  padding: 15px 32px; border: 1px solid var(--line2); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.btn-primary { border-color: var(--ink) }
.btn-sm { padding: 11px 22px; font-size: 11px; letter-spacing: .2em }
.btn-block { width: 100% }
.btn svg { display: none }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px }

/* ---------------- nav ---------------- */
.nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; border-block-end: 1px solid transparent; transition: background .5s var(--ease), border-color .5s }
.nav.scrolled { background: rgba(245, 242, 234, .88); backdrop-filter: blur(16px); border-block-end-color: var(--line) }
.nav-inner { max-width: var(--w); margin-inline: auto; padding: 20px clamp(20px, 5vw, 40px); display: flex; align-items: center; gap: 30px }
.wordmark { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; letter-spacing: .16em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px }
.wordmark-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none }
.nav-links { display: flex; gap: 30px; margin-inline-start: auto }
.nav-links a { font-weight: 400; font-size: 12px; letter-spacing: .14em; color: var(--ink3); text-decoration: none; transition: color .3s }
.nav-links a:hover { color: var(--ink) }
.lang-switch { font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--ink3); text-decoration: none; border: 1px solid var(--line); padding: 7px 12px; transition: color .3s, border-color .3s }
.lang-switch:hover { color: var(--ink); border-color: var(--line2) }

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--paper) }
#brain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28 }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 85% at 50% 42%, transparent 42%, var(--paper) 100%) }
.hero-grid { position: relative; z-index: 3; display: block; text-align: center; padding-block: 17vh 12vh }
.hero-copy { max-width: 900px; margin-inline: auto }
.hero .lede { max-width: 640px; margin-inline: auto; margin-block-start: 28px }
.hero .evtag { display: none }
.hero-ctas { margin-block-start: 44px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }
.hero-io { display: none }
.hero-scroll { position: absolute; inset-block-end: 30px; inset-inline: 0; z-index: 3; display: flex; justify-content: center }
.hero-scroll span { width: 1px; height: 46px; background: linear-gradient(var(--line2), transparent); animation: bob 2.6s infinite }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(8px); opacity: 1 } }
.brain-tip { display: none }

/* the hero note, set as a pull quote */
.hero-note {
  margin-block-start: 54px; max-width: 720px; margin-inline: auto;
  font-family: var(--heb); font-weight: 200; font-size: clamp(17px, 2vw, 24px);
  line-height: 1.75; letter-spacing: .03em; color: var(--ink); position: relative;
  padding-block-start: 34px; border-block-start: 1px solid var(--line);
}
.hero-note::before {
  content: "\201D"; position: absolute; inset-block-start: 8px; inset-inline-start: 50%;
  transform: translateX(50%); font-family: var(--serif); font-size: 52px; line-height: 1; color: var(--accent);
}

/* ---------------- sections ---------------- */
.section { padding-block: clamp(90px, 14vh, 170px); border-block-start: 1px solid var(--line) }
.section:nth-of-type(even) { background: var(--sand) }
.section-tight { padding-block: clamp(70px, 10vh, 120px) }
/* Section variants must be written as .section.X, not .X. The alternating rule
   .section:nth-of-type(even) has specificity (0,2,0) and silently outranks a bare
   single class, which is how this band kept its light text on a light background. */
.section.heb-band { background: var(--paper2) }
.section.heb-band .container { position: relative }
.section.heb-band .split-copy { border-inline-start: 2px solid var(--accent); padding-inline-start: clamp(22px, 3vw, 40px) }
.section.heb-band .heb-visual { border-color: var(--line) }
.section.heb-band .heb-visual span { color: rgba(138, 109, 31, .16) }

/* a statement, not a footnote */
.src-fine, .ask-fine {
  margin-block-start: 60px; text-align: center; max-width: 26ch; margin-inline: auto;
  font-weight: 200; font-size: clamp(19px, 2.4vw, 30px); line-height: 1.5; letter-spacing: .04em; color: var(--ink);
}

/* ---------------- reveals ---------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.js .reveal.in { opacity: 1; transform: none }
.js .d2 { transition-delay: .1s } .js .d3 { transition-delay: .2s } .js .d4 { transition-delay: .3s }
.rl { display: block; overflow: hidden }
.rl > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease) }
body.loaded .rl > span { transform: none }
.rl:nth-child(2) > span { transition-delay: .08s }
.rl:nth-child(3) > span { transition-delay: .16s }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none }
  .rl > span { transform: none; transition: none }
  .hero-scroll span { animation: none }
}

/* ---------------- stats ---------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-block-start: 60px }
.stat { background: var(--paper); padding: 46px 30px; text-align: center }
.section:nth-of-type(even) .stat { background: var(--sand) }
.stat-n { display: block; font-weight: 100; font-size: clamp(38px, 5.6vw, 68px); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums }
.stat-l { display: block; margin-block-start: 18px; font-weight: 300; font-size: 13px; letter-spacing: .05em; color: var(--ink3); line-height: 1.7 }

/* ---------------- evidence tag ---------------- */
.evtag {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 11px; letter-spacing: .1em;
  color: var(--ink3); border: 1px solid var(--line); padding: 4px 11px; margin-inline-start: 10px;
  white-space: nowrap; position: relative; cursor: default; transition: border-color .3s, color .3s;
}
.evtag::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--accent) }
.evtag:hover { border-color: var(--line2); color: var(--ink) }
.evtag.bad, .evtag.warn { border-style: dashed }
.evtag.bad::before, .evtag.warn::before { background: var(--ink3) }
.evtag[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0;
  background: var(--paper2); border: 1px solid var(--line2); padding: 12px 15px; font-size: 12px;
  color: var(--ink2); width: 250px; white-space: normal; z-index: 60; line-height: 1.7;
}

/* ---------------- sources ---------------- */
.src-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); margin-block-start: 54px }
.src-grid li {
  background: var(--paper); padding: 28px 22px; align-content: start;
  display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; text-align: start;
}
.section:nth-of-type(even) .src-grid li { background: var(--sand) }
.src-grid svg { width: 20px; height: 20px; opacity: .85; grid-column: 1; grid-row: 1 }
.src-grid strong { grid-column: 2; grid-row: 1; font-weight: 400; font-size: 14px; letter-spacing: .06em }
.src-grid span { grid-column: 1 / -1; grid-row: 2; margin-block-start: 10px; font-weight: 300; font-size: 12px; color: var(--ink3); line-height: 1.7 }

/* ---------------- split + steps, threaded ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start }
.steps { list-style: none; display: grid; position: relative }
.steps::before { content: ""; position: absolute; inset-block: 34px; inset-inline-start: 27px; width: 1px; background: var(--line2) }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-block: 22px; align-items: baseline; position: relative }
.step-n {
  font-weight: 400; font-size: 11px; letter-spacing: .12em; color: var(--ink3);
  font-variant-numeric: tabular-nums; position: relative; z-index: 2;
  background: var(--paper); padding-block: 6px; text-align: center;
}
.section:nth-of-type(even) .step-n { background: var(--sand) }
.steps li:hover .step-n { color: var(--accent) }
.steps strong { display: block; font-weight: 400; font-size: 15px; letter-spacing: .05em }
.steps span:not(.step-n) { font-weight: 300; font-size: 13px; color: var(--ink3) }

/* ---------------- workspace ---------------- */
.tabs { display: flex; flex-wrap: wrap; border-block-end: 1px solid var(--line); margin-block: 46px 0 }
.tab { background: none; border: none; border-block-end: 1px solid transparent; margin-block-end: -1px; font-family: var(--heb); font-weight: 400; font-size: 12px; letter-spacing: .16em; color: var(--ink3); padding: 16px 22px; cursor: pointer; transition: color .3s, border-color .3s }
.tab.active { color: var(--ink); border-block-end-color: var(--accent) }
.panel-frame { border: 1px solid var(--line); border-block-start: none; background: var(--paper2) }
.panel-chrome { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-block-end: 1px solid var(--line) }
.panel-chrome span { width: 4px; height: 4px; border-radius: 50%; background: var(--line2) }
.panel-chrome em { font-style: normal; font-weight: 400; font-size: 10.5px; letter-spacing: .2em; color: var(--ink3); margin-inline-start: 12px }
.panel { display: none; padding: clamp(26px, 4vw, 46px); min-height: 340px }
.panel.active { display: block; animation: fade .6s var(--ease) }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.tl { display: grid; gap: 30px }
.tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px }
.tl-date { font-weight: 300; font-size: 12px; letter-spacing: .08em; color: var(--ink3); padding-block-start: 4px; font-variant-numeric: tabular-nums }
.tl-body { font-weight: 300; font-size: 14.5px; line-height: 1.85; color: var(--ink2) }
.tl-body strong { font-weight: 500; color: var(--ink) }

.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; font-weight: 300 }
.matrix th { text-align: start; font-weight: 400; font-size: 10.5px; letter-spacing: .18em; color: var(--ink3); padding: 12px 14px; border-block-end: 1px solid var(--line2) }
.matrix td { padding: 16px 14px; border-block-end: 1px solid var(--line); color: var(--ink2); vertical-align: top; line-height: 1.7 }
.matrix tr:hover td { background: rgba(23, 20, 15, .025) }
.conf { font-weight: 400; font-size: 10.5px; letter-spacing: .08em; padding: 4px 10px; border: 1px solid var(--line2); white-space: nowrap; color: var(--ink3) }
.c1 { color: var(--accent-ink); border-color: rgba(138, 109, 31, .45) }
.c2, .c3 { color: var(--ink2) }
.c4, .c5 { color: var(--ink3); border-style: dashed }

.claims { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 10px }
.claim-h { font-weight: 500; font-size: 16px; letter-spacing: .05em; color: var(--ink); margin-block-end: 22px; padding-block-end: 12px; border-block-end: 1px solid var(--line) }
.claim-col { display: flex; flex-direction: column }
.claim-card { border: 1px solid var(--line); padding: 22px; margin-block-end: 12px; display: grid; gap: 8px }
.claim-card strong { font-weight: 400; font-size: 14px; letter-spacing: .04em }
.claim-card span { font-weight: 300; font-size: 12.5px; color: var(--ink3) }
.claim-mid { display: flex; align-items: center; color: var(--line2) }
.claim-mid svg { width: 100%; height: 200px }

.ask { display: grid; gap: 34px }
.ask-row { display: grid; gap: 14px }
.ask-q { font-weight: 400; font-size: 15px; letter-spacing: .04em; padding-inline-start: 18px; position: relative }
.ask-q::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent) }
.ask-a { border-inline-start: 1px solid var(--line2); padding: 4px 20px; font-weight: 300; font-size: 14.5px; line-height: 1.9; color: var(--ink2) }
.ask-a.ask-abstain { border-inline-start-style: dashed }
.ask-a strong { font-weight: 500; color: var(--ink) }
.ask-cites { display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 16px }
.ask-cites .evtag { margin-inline-start: 0 }
.ask-fine { margin-block-start: 44px }

/* ---------------- pipeline ---------------- */
.pipe { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(56px, 7vw, 104px); align-items: start; margin-block-start: 54px }
.pipe-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible }
.pipe-wires path { fill: none; stroke: var(--line2); stroke-width: 1; transition: stroke .35s, stroke-width .35s }
.pipe-wires path.flow { stroke-dasharray: 4 10; animation: wire 2.6s linear infinite }
@keyframes wire { to { stroke-dashoffset: -28 } }
.pipe-wires path.lit { stroke: var(--accent); stroke-width: 1.6 }
.pipe-col, .pipe-flow { position: relative; z-index: 1 }
.pipe-flow { display: none }
.pipe-list li { cursor: default; padding-inline: 6px }
.pipe-list li.lit { color: var(--accent) }
@media (prefers-reduced-motion: reduce) { .pipe-wires path.flow { animation: none } }
.pipe-col { border: 1px solid var(--line); padding: 30px 22px; background: var(--paper) }
.section:nth-of-type(even) .pipe-col { background: var(--sand) }
.pipe-core { background: var(--paper2) }
.pipe-h { font-weight: 500; font-size: 16px; letter-spacing: .05em; color: var(--ink); margin-block-end: 24px; padding-block-end: 13px; border-block-end: 1px solid var(--line); text-align: center }
.pipe-list { list-style: none; display: grid; gap: 10px }
.pipe-list li { font-weight: 300; font-size: 12.5px; color: var(--ink3); text-align: center; transition: color .4s }
.pipe-list.ticks li.done { color: var(--ink) }

/* ---------------- cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-block-start: 54px }
.card {
  background: var(--paper); padding: 40px 30px; transition: background .4s;
  display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center;
}
.section:nth-of-type(even) .card { background: var(--sand) }
.card:hover { background: var(--paper2) }
.card-ic { width: 20px; height: 20px; color: var(--accent); grid-column: 1; grid-row: 1; margin: 0 }
.card h3 { grid-column: 2; grid-row: 1; margin: 0 }
.card p { grid-column: 1 / -1; grid-row: 2; margin-block-start: 16px; font-weight: 300; font-size: 13.5px; line-height: 1.85; color: var(--ink3) }

/* ---------------- hebrew band ---------------- */
.heb-points { list-style: none; display: grid; gap: 14px; margin-block-start: 28px }
.heb-points li { font-weight: 300; font-size: 14.5px; color: var(--ink2); padding-inline-start: 22px; position: relative }
.heb-points li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .88em; width: 10px; height: 1px; background: var(--accent) }
.heb-visual { display: grid; place-items: center; min-height: 260px; border: 1px solid var(--line) }
.heb-visual span { font-size: clamp(90px, 14vw, 190px); font-weight: 100; color: var(--line2); line-height: 1 }

/* ---------------- ladder ---------------- */
.conf-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); margin-block-start: 50px }
.conf-step { background: var(--paper); padding: 32px 22px; position: relative }
.section:nth-of-type(even) .conf-step { background: var(--sand) }
.conf-step::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--accent) }
.conf-step:nth-child(2)::before { opacity: .68 }
.conf-step:nth-child(3)::before { opacity: .46 }
.conf-step:nth-child(4)::before { opacity: .28 }
.conf-step:nth-child(5)::before { opacity: .14 }
.conf-step p { margin-block-start: 14px; font-weight: 300; font-size: 12.5px; line-height: 1.75; color: var(--ink3) }

/* ---------------- security + use cases ---------------- */
.sec-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin-block-start: 54px }
.sec-grid li { background: var(--paper); padding: 30px 22px; display: grid; gap: 10px; align-content: start }
.section:nth-of-type(even) .sec-grid li { background: var(--sand) }
.sec-grid strong { font-weight: 400; font-size: 14px; letter-spacing: .05em }
.sec-grid span { font-weight: 300; font-size: 12.5px; line-height: 1.75; color: var(--ink3) }

.uc-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-block-start: 44px }
.uc-grid li { background: var(--paper); padding: 26px; font-weight: 300; font-size: 14.5px; letter-spacing: .04em; color: var(--ink2) }
.section:nth-of-type(even) .uc-grid li { background: var(--sand) }

/* ---------------- before / after ---------------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-block-start: 50px }
.ba-col { background: var(--paper); padding: 40px 32px }
.section:nth-of-type(even) .ba-col { background: var(--sand) }
.ba-after { background: var(--paper2) }
.ba-h { font-weight: 500; font-size: 16px; letter-spacing: .05em; color: var(--ink); margin-block-end: 26px; padding-block-end: 13px; border-block-end: 1px solid var(--line) }
.ba-after .ba-h { color: var(--accent-ink); border-block-end-color: rgba(138, 109, 31, .35) }
.ba-col ul { list-style: none; display: grid; gap: 14px }
.ba-col li { font-weight: 300; font-size: 14.5px; color: var(--ink3); padding-inline-start: 20px; position: relative; line-height: 1.75 }
.ba-col li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .8em; width: 9px; height: 1px; background: var(--line2) }
.ba-after li { color: var(--ink2) }
.ba-after li::before { background: var(--accent) }

/* ---------------- demo ---------------- */
.demo-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; border: 1px solid var(--line); padding: clamp(32px, 5vw, 70px); background: var(--paper2) }
.demo-form { display: grid; gap: 20px }
.demo-form label { display: grid; gap: 9px; font-weight: 400; font-size: 11px; letter-spacing: .16em; color: var(--ink3) }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.demo-form input, .demo-form select, .demo-form textarea {
  font-family: var(--heb); font-weight: 300; font-size: 14px; padding: 12px 0;
  background: transparent; border: none; border-block-end: 1px solid var(--line2);
  color: var(--ink); border-radius: 0; transition: border-color .3s;
}
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: none; border-block-end-color: var(--accent) }
.demo-form textarea { resize: vertical }
.form-ok, .form-err { font-weight: 300; font-size: 13px; color: var(--ink3) }

/* the native select popup ignores author CSS; base-select is the only fix (Chrome 135+) */
.demo-form select { appearance: none; cursor: pointer }
@supports (appearance: base-select) {
  .demo-form select { appearance: base-select }
  .demo-form select::picker(select) {
    appearance: base-select; background: var(--paper2); border: 1px solid var(--line2);
    box-shadow: 0 18px 44px rgba(23, 20, 15, .16); padding: 6px; margin-block-start: 6px;
  }
  .demo-form select::picker-icon { display: none }
  .demo-form option {
    font-family: var(--heb); font-weight: 300; font-size: 14px; padding: 10px 14px;
    color: var(--ink); background: transparent;
  }
  .demo-form option:hover, .demo-form option:focus { background: var(--sand) }
  .demo-form option:checked { font-weight: 500 }
  .demo-form option::checkmark { color: var(--accent) }
}

/* ---------------- footer ---------------- */
.footer { padding-block: 64px 46px; border-block-start: 1px solid var(--line) }
.footer-inner { display: grid; gap: 26px }
.footer-tag { font-weight: 300; font-size: 12.5px; color: var(--ink3); margin-block-start: 12px }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap }
.footer-links a { font-weight: 400; font-size: 11.5px; letter-spacing: .16em; color: var(--ink3); text-decoration: none; transition: color .3s }
.footer-links a:hover { color: var(--ink) }

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .cards, .uc-grid { grid-template-columns: repeat(2, 1fr) }
  .src-grid { grid-template-columns: repeat(3, 1fr) }
  .sec-grid { grid-template-columns: repeat(2, 1fr) }
  .conf-ladder { grid-template-columns: 1fr }
  .conf-step::before { inset-block: 0 auto; inset-inline-start: 0; inset-inline-end: auto; width: 2px; height: 100% }
  .pipe { grid-template-columns: 1fr; gap: 18px }
  .pipe-wires { display: none }
  .split, .demo-wrap { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  .nav-links { display: none }
  .stat-row, .cards, .uc-grid, .src-grid, .sec-grid, .ba, .f-row, .claims { grid-template-columns: 1fr }
  .claim-mid { display: none }
  .tl-item { grid-template-columns: 1fr; gap: 8px }
  h1.display { letter-spacing: .03em }
}

/* ---------------- accessibility (ת"י 5568 / WCAG 2.1 AA) ---------------- */
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: 12px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  font-size: 13px; letter-spacing: .08em; text-decoration: none;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 12px }
/* a visible, high-contrast focus ring everywhere, not just on the default outline */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.tab:focus-visible, .rail a:focus-visible { outline-offset: 2px }
.panel:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
@media (forced-colors: active) {
  .btn, .tab, .evtag, .conf { border: 1px solid ButtonText }
  .conf-step::before, .flow-line { forced-color-adjust: none }
}

/* ---------------- accessibility menu ---------------- */
.a11y-btn {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 300;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  display: grid; place-items: center; box-shadow: 0 6px 22px rgba(23, 20, 15, .22);
  transition: transform .25s var(--ease), background .25s;
}
.a11y-btn svg { width: 26px; height: 26px }
.a11y-btn:hover { transform: scale(1.06) }
.a11y-panel[hidden] { display: none }   /* a class selector beats the UA [hidden] rule, so say it explicitly */
.a11y-panel {
  position: fixed; inset-block-end: 86px; inset-inline-end: 22px; z-index: 300;
  width: min(300px, calc(100vw - 44px)); background: var(--paper2);
  border: 1px solid var(--line2); box-shadow: 0 18px 50px rgba(23, 20, 15, .2);
  padding: 20px; display: grid; gap: 16px;
}
.a11y-h { font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--ink) }
.a11y-zoom { display: grid; gap: 9px; font-size: 13px; color: var(--ink2) }
.a11y-zoom > div { display: flex; align-items: center; gap: 10px }
.a11y-zoom button {
  width: 38px; height: 34px; cursor: pointer; font-family: var(--heb); font-size: 14px;
  background: transparent; border: 1px solid var(--line2); color: var(--ink);
}
.a11y-zoom output { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); min-width: 46px; text-align: center }
.a11y-opts { display: grid; gap: 7px }
.a11y-opts button {
  text-align: start; cursor: pointer; font-family: var(--heb); font-weight: 300; font-size: 13.5px;
  padding: 9px 12px; background: transparent; border: 1px solid var(--line); color: var(--ink2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.a11y-opts button::after { content: ""; width: 15px; height: 15px; border: 1px solid var(--line2); flex: none }
.a11y-opts button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink) }
.a11y-opts button[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent) }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 4px; border-block-start: 1px solid var(--line) }
.a11y-foot button { cursor: pointer; background: none; border: none; font-family: var(--heb); font-size: 12.5px; color: var(--ink3); text-decoration: underline; padding: 8px 0 }
.a11y-foot a { font-size: 12.5px; color: var(--accent-ink) }
.a11y-btn:focus-visible, .a11y-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* the user preferences themselves */
/* Zoom the page content, never <body>. zoom on an ancestor rescales the coordinate
   space that position:fixed resolves against, which pushed the menu itself off screen
   the moment a user raised the display size. The menu must stay outside the zoom. */
html.a11y-zoomed :is(.nav, main, .footer) { zoom: var(--a11y-zoom, 1) }
html.a11y-contrast { --paper: #FFFFFF; --paper2: #FFFFFF; --sand: #FFFFFF; --ink: #000000;
  --ink2: #000000; --ink3: #1A1A1A; --line: #000000; --line2: #000000; --accent: #6A4E00; --accent-ink: #5A4200 }
html.a11y-contrast img, html.a11y-contrast #brain { filter: grayscale(1) contrast(1.2) }
html.a11y-gray body { filter: grayscale(1) }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important }
html.a11y-nomotion #brain { display: none }
html.a11y-nomotion .js .reveal { opacity: 1 !important; transform: none !important }
html.a11y-readable { --heb: Arial, 'Helvetica Neue', sans-serif }
html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2 { font-weight: 400 !important; letter-spacing: 0 !important }
html.a11y-spacing body { line-height: 2.1 !important; letter-spacing: .04em !important; word-spacing: .12em }
html.a11y-spacing p, html.a11y-spacing li { margin-block-end: 1em }
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3l24 13-10 3-4 12z' fill='%23fff' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto !important;
}
@media print { .a11y-btn, .a11y-panel, .rail, .hero-scroll { display: none !important } }
.a11y-top { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.a11y-top button {
  width: 30px; height: 30px; cursor: pointer; background: transparent; border: 1px solid var(--line);
  color: var(--ink2); font-size: 19px; line-height: 1; font-family: var(--heb);
}
.a11y-top button:hover { border-color: var(--line2); color: var(--ink) }
.a11y-hide { padding-block-start: 2px }
.a11y-hide button {
  width: 100%; cursor: pointer; background: transparent; border: 1px dashed var(--line2);
  color: var(--ink3); font-family: var(--heb); font-size: 12.5px; padding: 9px;
}
.a11y-hide button:hover { color: var(--ink); border-color: var(--ink3) }
/* Minimised means smaller and quieter, never invisible. The first version was a
   17px sliver flush to the edge, which read as "the widget disappeared". An
   accessibility control that a user cannot find again is worse than no control. */
.a11y-btn.mini {
  width: 38px; height: 38px; inset-inline-end: 14px; inset-block-end: 14px;
  opacity: .55; box-shadow: 0 3px 12px rgba(23, 20, 15, .16);
}
.a11y-btn.mini svg { width: 19px; height: 19px }
.a11y-btn.mini:hover, .a11y-btn.mini:focus-visible {
  opacity: 1; width: 52px; height: 52px; transform: none;
}

/* These grids draw their hairlines with a container background showing through 1px
   gaps, so a short final row reads as a missing block rather than as whitespace.
   If a row ends up with a single orphan, stretch it across instead. */
.cards > :last-child:nth-child(3n + 1),
.uc-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1 }
.sec-grid > :last-child:nth-child(4n + 1) { grid-column: 1 / -1 }
@media (max-width: 1024px) {
  .cards > :last-child:nth-child(3n + 1),
  .uc-grid > :last-child:nth-child(3n + 1),
  .cards > :last-child:nth-child(2n + 1),
  .uc-grid > :last-child:nth-child(2n + 1),
  .sec-grid > :last-child:nth-child(2n + 1) { grid-column: 1 / -1 }
}