/* DIRECTION: light "site drawing", paper + ink + one lime marker. Reference: brand brief (charcoal / off-white / lime),
   architectural drawing sheets (fine grid, figure numbers, hanging captions), AR annotation UI (pins + leader lines).
   ONE MEMORABLE THING: the hero photo carries a live CSS "information layer", pins and labels that settle onto a
   real table. So the page demonstrates the very thing that is still being built. Big honest headline, lime marker on the words "עדיין בבנייה".
   MOTION PERSONALITY: mathematical (expo-out, no bounce). Type: Rubik (he) / IBM Plex Mono (latin chips, figure numbers). */

:root {
  color-scheme: light;
  --bg: #f4f2ec;
  --bg-deep: #ebe8df;
  --surface: #fbfaf6;
  --ink: #14181c;
  --ink-2: #3a4046;
  /* darkened from #6b727a, which measured 3.97:1 against --bg-deep and so
     failed WCAG 1.4.3 / IS 5568 for body text. This is 4.97:1 there, and the
     extra margin is deliberate: Hebrew faces render thinner than Latin at the
     same size, so a ratio that only just clears 4.5 still reads badly. */
  --ink-3: #5c636b;
  --line: rgba(20, 24, 28, .14);
  --grid: rgba(20, 24, 28, .07);
  --marker: #C6F24E;
  --olive: #6E9B0E;
  --olive-deep: #56790b;
  --wa: #14181c;

  --font-he: 'Rubik', 'Heebo', 'Noto Sans Hebrew', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --step--1: clamp(.85rem, .82rem + .15vw, .95rem);
  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-1: clamp(1.3rem, 1.2rem + .45vw, 1.5rem);
  --step-2: clamp(1.7rem, 1.5rem + .9vw, 2.2rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 4.9rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --section: clamp(3.5rem, 8vw, 7rem);
  --radius-sm: 3px; --radius-md: 6px; --radius-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-press: 140ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 380ms; --dur-settle: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-he);
  font-size: var(--step-0);
  line-height: 1.75;
  letter-spacing: 0;
  word-spacing: .05em;
  text-align: start;
  overflow-x: hidden;
  /* drafting-sheet grid: 8px minor lines, fades toward the bottom of the hero */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0; }
[dir="ltr"] { unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 242, 236, .86);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; }
.brand { display: flex; align-items: baseline; gap: var(--space-2); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.brand .word { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; }
.brand .sub { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }
.top-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-6); }
.top .back { color: var(--ink-2); text-decoration: none; font-size: var(--step--1); padding: var(--space-2) 0; white-space: nowrap; }
.top .back:hover { color: var(--ink); }

/* language switch. A quiet text button in the sheet's own mono voice */
.lang {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 44px; padding-inline: var(--space-3);
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang::after { /* 44px touch target without a 44px-looking button */
  content: ""; position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%; height: 44px;
}
.lang:hover { color: var(--ink); border-color: var(--olive); background: var(--marker); }
.lang:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

/* ---------- WhatsApp CTA ---------- */
.wa {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--wa); color: var(--bg);
  text-decoration: none; font-weight: 500;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wa:hover { background: #000; }
.wa:active { transform: translateY(1px); }
.wa-small { padding: var(--space-2) var(--space-4); font-size: var(--step--1); min-height: 40px; white-space: nowrap; }
/* Phone: the bar carries the CTA and the language switch. The back link would
   push both past the edge (English runs ~20% longer), and the footer repeats
   it anyway. Placed after .lang/.wa so these overrides actually win. */
@media (max-width: 560px) {
  .top .wrap, .top-nav { gap: var(--space-2); }
  .top .back { display: none; }
  .wa-small { padding-inline: var(--space-3); font-size: .84rem; }
  .lang { min-width: 40px; padding-inline: var(--space-2); font-size: .8rem; }
}
/* below the modern phone floor the "/ ar" tail is the first thing to go.
   The page itself is the AR page, and the wordmark still carries the brand */
@media (max-width: 359px) { .brand .sub { display: none; } }
.wa-big { padding: var(--space-3) var(--space-6); font-size: var(--step-0); min-height: 52px; }
.wa .arrow { display: inline-block; font-family: var(--font-mono); transition: transform var(--dur-fast) var(--ease-out); }
/* the arrow nudges the way it points: ← in Hebrew, → in English */
.wa-big:hover .arrow { transform: translateX(-4px); }
:root[dir="ltr"] .wa-big:hover .arrow { transform: translateX(4px); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 7vw, 6rem) var(--section); }
.hero-grid {
  display: grid; gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
}

.status {
  display: inline-flex; align-items: center; gap: var(--space-3);
  /* the tighter side is the dot's side, so it must follow dir, not the page's left */
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface);
  margin-block-end: var(--space-6);
}
.status .date { color: var(--ink-3); }
.dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--olive);
  position: relative;
}
.dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--olive); opacity: 0;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 70%, 100% { transform: scale(1.4); opacity: 0; } }

h1 {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.12;
  max-width: 16ch;
}
h1 .line { display: block; }
.hl {
  background: none; color: inherit;
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-size: 100% .42em;
  background-position: 0 88%;
  padding-inline: .06em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lede {
  margin-block-start: var(--space-6);
  font-size: var(--step-1); line-height: 1.6;
  color: var(--ink-2); max-width: 30ch;
}
.cta-row { margin-block-start: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.cta-note { color: var(--ink-3); font-size: var(--step--1); }

/* ---------- signature figure: photo + information layer ---------- */
.ar-fig { min-width: 0; }
.ar-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(20, 24, 28, .45), 0 2px 6px rgba(20, 24, 28, .12);
}
.ar-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.corner {
  position: absolute; width: 22px; height: 22px;
  border-color: var(--marker); border-style: solid; border-width: 0;
  opacity: .95;
}
.c1 { top: 12px; inset-inline-start: 12px; border-block-start-width: 2px; border-inline-start-width: 2px; }
.c2 { top: 12px; inset-inline-end: 12px; border-block-start-width: 2px; border-inline-end-width: 2px; }
.c3 { bottom: 12px; inset-inline-start: 12px; border-block-end-width: 2px; border-inline-start-width: 2px; }
.c4 { bottom: 12px; inset-inline-end: 12px; border-block-end-width: 2px; border-inline-end-width: 2px; }

.callouts { position: absolute; inset: 0; pointer-events: none; }
.co {
  position: absolute;
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); row-gap: 0;
  align-items: start;
  padding: var(--space-2) var(--space-3);
  background: rgba(244, 242, 236, .94);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px -8px rgba(20, 24, 28, .5);
  max-width: min(46%, 240px);
  opacity: 0; transform: translateY(10px);
  animation: settle var(--dur-settle) var(--ease-out) forwards;
  animation-delay: calc(700ms + var(--i) * 260ms);
}
@keyframes settle { to { opacity: 1; transform: none; } }
.co .pin {
  grid-row: 1 / span 2; margin-block-start: .45em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--olive);
  box-shadow: 0 0 0 3px rgba(198, 242, 78, .9);
}
.co .tag { color: var(--olive-deep); line-height: 1.4; font-size: .74rem; }
.co .val { font-size: .9rem; line-height: 1.35; font-weight: 500; }
/* leader lines: pseudo-element to the anchor point */
.co::after {
  content: ""; position: absolute; background: var(--marker); opacity: .9;
  width: 2px; height: var(--lead, 44px);
  inset-inline-start: 14px; top: 100%;
}
.co-a { top: 12%; inset-inline-start: 6%; --lead: 56px; }
.co-b { top: 46%; inset-inline-end: 6%; --lead: 40px; }
.co-c { bottom: 24%; inset-inline-start: 34%; --lead: 0; }
.co-c::after { display: none; }
@media (max-width: 600px) {
  .co { max-width: 52%; padding: var(--space-1) var(--space-2); }
  .co .val { font-size: .78rem; }
  .co .tag { font-size: .66rem; }
  .co-a { top: 8%; inset-inline-start: 4%; --lead: 30px; }
  .co-b { top: 44%; inset-inline-end: 4%; --lead: 24px; }
  .co-c { bottom: 8%; inset-inline-start: 30%; }
  /* the English labels run ~20% longer; at this size a second line makes the
     three callouts stack into each other, so give them the width to stay flat */
  :root[dir="ltr"] .co { max-width: 66%; }
  :root[dir="ltr"] .co .val { font-size: .74rem; }
}
figcaption {
  margin-block-start: var(--space-3);
  color: var(--ink-3); font-size: var(--step--1); line-height: 1.6;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--marker);
}
figcaption .mono { color: var(--ink-2); }

/* ---------- featured: the virtual supermarket ---------- */
/* One drawing sheet on the paper: the shop screenshot as a framed plate with the
   same lime corners as the hero, the copy beside it. This is the thing that already
   stands, so it gets the lime top rule the ledger reserves for "already live". */
.feature { padding-block: 0 var(--section); scroll-margin-top: 72px; }
.sheet {
  display: grid; gap: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--marker);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 3vw, 2.5rem);
  box-shadow: 0 24px 50px -36px rgba(20, 24, 28, .35);
}
@media (min-width: 900px) {
  .sheet {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}
.sheet-fig { min-width: 0; }
.sheet-frame {
  position: relative; display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(20, 24, 28, .12);
}
.sheet-frame img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sheet-frame:hover img { transform: scale(1.02); }
.sheet-frame:focus-visible { outline-offset: 4px; }

.sheet-copy { min-width: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); color: var(--ink-3); }
/* .chip (below) pushes itself to the far end of the ledger heads; here it leads the line */
.kicker .chip-live { margin-inline-start: 0; background: var(--marker); color: var(--ink); font-weight: 500; }
.sheet-copy h2 { font-size: var(--step-2); font-weight: 700; }
.sheet-lede { margin-block-start: var(--space-3); font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 26ch; }

/* the four facts: a tight stacked list, each line led by the drawing's own middot */
.facts { margin-block-start: var(--space-6); display: grid; gap: var(--space-1); color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.facts li { display: flex; align-items: baseline; gap: var(--space-3); }
.facts li::before { content: "·"; font-family: var(--font-mono); font-size: 1.4em; line-height: 1; color: var(--olive); font-weight: 500; }
.facts li:first-child { font-weight: 500; color: var(--ink); }

/* outward link: ink outline on paper, lime on hover. Second voice to the WhatsApp pill */
.btn-out {
  margin-block-start: var(--space-8);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-6);
  border: 1.5px solid var(--ink); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink);
  font-weight: 500; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn-out:hover { background: var(--marker); }
.btn-out:active { transform: translateY(1px); }
.btn-out .mono { font-size: 1em; }

/* hero lede pointer: a real link, underlined the way the sheet underlines */
.lede-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lede-link:hover { background: var(--marker); text-decoration-color: var(--ink); }

/* ---------- ledger ---------- */
.ledger {
  background: var(--bg-deep);
  padding-block: var(--section);
  border-block: 1px solid var(--line);
}
.cols { display: grid; gap: var(--space-12) var(--space-8); }
@media (min-width: 900px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); } }
.col-head {
  /* baseline, not centre: English headings wrap to two lines where the Hebrew
     fits on one, and centring floats the number and the chip to mid-height */
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.col-head .num { color: var(--ink-3); }
.col-head h3 { font-size: var(--step-2); font-weight: 700; }
.chip {
  margin-inline-start: auto;
  font-family: var(--font-mono); font-size: .74rem;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  line-height: 1.6; white-space: nowrap;
}
.chip-done { background: var(--marker); color: var(--ink); }
.chip-now { background: var(--ink); color: var(--bg); }
.chip-next { border: 1px solid var(--line); color: var(--ink-2); }
.col > p { color: var(--ink-2); max-width: 36ch; }
.col-done { padding-block-start: var(--space-4); border-block-start: 3px solid var(--marker); }
.col-now, .col-next { padding-block-start: var(--space-4); border-block-start: 3px solid var(--ink); }
.col-next { border-block-start-style: dashed; border-block-start-width: 2px; border-block-start-color: var(--ink-3); }

.links { margin-block-start: var(--space-6); display: grid; gap: var(--space-4); }
.links li { display: grid; gap: 2px; }
.links a { font-weight: 500; text-decoration: none; text-underline-offset: .2em; }
.links a:hover { text-decoration: underline; }
.link-note { color: var(--ink-3); font-size: var(--step--1); }

.mini { margin-block-start: var(--space-6); }
.mini img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- close ---------- */
.close { padding-block: var(--section); }
.close-grid { display: grid; gap: var(--space-6); justify-items: start; max-width: 60ch; }
.close h2 { font-size: var(--step-2); font-weight: 700; }
.close p { color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { border-block-start: 1px solid var(--line); padding-block: var(--space-8) var(--space-12); font-size: var(--step--1); color: var(--ink-2); }
.foot .wrap { display: grid; gap: var(--space-4); }
.made { font-weight: 500; color: var(--ink); }
.sibs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.sibs a { text-decoration: none; padding-block: var(--space-1); }
.sibs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.copy { color: var(--ink-3); }

/* ---------- orchestrated page load ---------- */
.stagger > * {
  opacity: 0; transform: translateY(8px);
  animation: rise var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .dot::after { display: none; }
}

/* ---------- yours: the pitch to the business owner ----------
   The page showed the supermarket as our product; this section turns it
   around and sells the mechanism. The exchange comes before the screenshots
   because the sentence-to-basket move is the part a shop owner cannot get
   from looking at shelves. */
.yours { padding-block: var(--section); background: var(--bg-deep); }
.yours-head { max-width: 46rem; margin-block-end: var(--space-12); }
.yours-head h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.25; margin: var(--space-3) 0 0; letter-spacing: -.01em; text-wrap: balance; }
.yours-lede { margin: var(--space-4) 0 0; color: var(--ink-2); line-height: 1.75; }

.convo {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: stretch; margin-block-end: var(--space-12);
}
.convo-q { margin: 0; display: grid; align-content: center; gap: var(--space-3); }
.convo-q blockquote {
  margin: 0; padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--marker);
  font-size: var(--step-1); font-weight: 600; line-height: 1.5;
}
.convo-q figcaption { color: var(--ink-3); font-size: .78rem; }
.convo-a {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.convo-a__k { margin: 0 0 var(--space-4); color: #476509; font-size: .78rem; }
.basket { list-style: none; margin: 0; padding: 0; display: grid; }
.basket li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--grid);
  font-size: var(--step--1);
}
.basket li:last-child { border-block-end: 0; }
.basket-n { color: var(--ink-3); }
.basket-foot { margin: var(--space-4) 0 0; color: var(--ink-3); font-size: .82rem; line-height: 1.6; }

.frames {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.frame img {
  inline-size: 100%; block-size: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.frame--wide { grid-column: 1 / -1; }
.frame-cap { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: var(--step--1); display: flex; gap: var(--space-2); align-items: baseline; }
.frame-cap .mono { color: #476509; }   /* 5.1:1 on --bg-deep; --olive-deep is 4.14 there */

.yours-close {
  margin: var(--space-12) 0 0; max-width: 40rem;
  font-size: var(--step-1); font-weight: 600; line-height: 1.5; text-wrap: balance;
}

@media (max-width: 860px) {
  .convo { grid-template-columns: 1fr; }
  .frames { grid-template-columns: 1fr; }
}

/* ---------- the same principle, other trades ----------
   Concept renders, and the captions say so on every frame: the supermarket
   above is real screenshots, and keeping that line sharp is part of the
   credibility the section trades on. */
.domain { margin-block-start: var(--space-16); padding-block-start: var(--space-12); border-block-start: 1px solid var(--line); }
.domain-h { margin: 0; font-size: var(--step-1); font-weight: 700; }
.domain-lede { margin: var(--space-3) 0 var(--space-8); max-width: 46rem; color: var(--ink-2); line-height: 1.75; }
.domain-frames {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.domain-frames img {
  inline-size: 100%; block-size: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
@media (max-width: 860px) { .domain-frames { grid-template-columns: 1fr; } }