/* simsturant.com
 *
 * One stylesheet for both languages. It was inline in each page and the two
 * had already started to drift - the same reason the demo menu lives in one
 * file: two copies of a thing are two things.
 *
 * Built around a GRID, not a column. The first version was a 736px column
 * centred in a 1440px window with everything stacked and centred inside it,
 * which is what made a real site read as one long landing page. Sections
 * alternate two-up on a desktop and stack on a phone.
 *
 * One visual world, painted explicitly: the product's guest screen is deep and
 * warm-lit and the mark is a pale sun, so a restaurateur who clicks through to
 * the app recognises where they landed.
 */
:root {
  --ink:      #0E1311;
  --panel:    #161D1A;
  --raised:   #1D2622;
  --rule:     rgba(237,245,183,0.14);
  --rule-hi:  rgba(237,245,183,0.28);
  --text:     #EAEFE6;
  --muted:    #9BA79C;
  --sun:      #EDF5B7;
  --citrus:   #FFCF8A;
  --green:    #25372E;
  --ok:       #7FD6A0;
  --shadow:   0 1px 2px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45);
  --page:     1140px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Arial Hebrew",
               "Noto Sans Hebrew", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.15rem; }

/* ---- navigation: the cheapest "this is a company" signal there is ------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; gap: 1.1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); }
.brand img { width: 30px; height: 30px; }
.brand b { font-size: 1.02rem; letter-spacing: -.01em; }
.nav-links { display: none; gap: 1.1rem; margin-inline-start: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 600; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--sun); }
.nav-end { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.nav-links ~ .nav-end { margin-inline-start: 0; }
.lang {
  color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 650;
  border: 1px solid var(--rule); border-radius: 999px; padding: .28rem .75rem; white-space: nowrap;
}
.lang:hover, .lang:focus-visible { color: var(--sun); border-color: var(--rule-hi); }
@media (min-width: 880px) { .nav-links { display: flex; } }

/* ---- type ------------------------------------------------------------- */
h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem); line-height: 1.04; margin: 0 0 1.1rem;
  font-weight: 800; letter-spacing: -.035em; text-wrap: balance;
}
h2 {
  font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.18; margin: 0 0 .8rem;
  font-weight: 800; letter-spacing: -.022em; text-wrap: balance;
}
h3 { font-size: 1.05rem; margin: 0 0 .25rem; font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--sun); }
p { margin: 0 0 .9rem; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  color: var(--citrus); margin: 0 0 .7rem;
}
.lede { font-size: 1.15rem; max-width: 36rem; }
.lede b { color: var(--sun); font-weight: 700; }

/* ---- buttons ---------------------------------------------------------- */
.cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: .75rem 1.35rem; font-size: 1rem;
  border: 1px solid var(--rule); color: var(--text);
}
.btn:hover, .btn:focus-visible { border-color: var(--rule-hi); }
.btn.primary { background: var(--sun); color: var(--green); border-color: var(--sun); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.sm { padding: .42rem .95rem; font-size: .92rem; }
.btn:focus-visible { outline: 2px solid var(--citrus); outline-offset: 3px; }

/* ---- sections and the two-up grid -------------------------------------- */
section { padding: 3.2rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }
.two {
  display: grid; gap: 2rem; align-items: center;
}
@media (min-width: 880px) {
  .two { grid-template-columns: 1fr 1fr; gap: 3.4rem; }
  /* Alternating, so the eye does not fall down one edge of the page. */
  .two.flip > *:first-child { order: 2; }
}

/* ---- the proof strip ---------------------------------------------------- */
.facts-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 14px;
  overflow: hidden; margin-top: 2.2rem;
}
.facts-strip div { background: var(--ink); padding: 1rem 1.05rem; }
.facts-strip b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--sun); }
.facts-strip span { color: var(--muted); font-size: .9rem; }
@media (min-width: 880px) { .facts-strip { grid-template-columns: repeat(4, 1fr); } }

/* ---- cards -------------------------------------------------------------- */
.cards { display: grid; gap: .9rem; margin-top: 1.4rem; }
@media (min-width: 880px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.05rem 1.1rem;
}
.card .mark { color: var(--ok); font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---- screenshots -------------------------------------------------------- */
figure { margin: 0; }
figcaption { color: var(--muted); font-size: .88rem; margin-top: .6rem; }
.phone {
  display: block; width: min(300px, 78vw); margin: 0 auto;
  border: 7px solid #262E2A; border-radius: 32px; overflow: hidden;
  box-shadow: var(--shadow); background: #000;
}
.phone img { display: block; width: 100%; height: auto; }
.panelshot {
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); background: var(--panel);
}
.panelshot img { display: block; width: 100%; height: auto; }
/* A SMALL element does not become important by being stretched. The kitchen
   ticket is a 428px card; across half a 1140px container it shouted over the
   paragraph beside it. Capped and centred, it reads as what it is. */
.panelshot.narrow { max-width: 400px; margin-inline: auto; }

/* ---- the clip ------------------------------------------------------------ */
.clip {
  border: 1px solid var(--rule); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); background: #000; margin-top: 1.4rem;
}
.clip video { display: block; width: 100%; height: auto; }

/* ---- steps --------------------------------------------------------------- */
ol.steps { list-style: none; counter-reset: s; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 620px)  { ol.steps { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
@media (min-width: 1040px) { ol.steps { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; } }
ol.steps li { counter-increment: s; }
ol.steps li::before {
  content: counter(s); display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; margin-bottom: .55rem;
  font-weight: 800; font-size: .85rem; color: var(--green);
  background: var(--sun); border-radius: 9px;
}
ol.steps b { display: block; margin-bottom: .15rem; }
ol.steps p { margin: 0; color: var(--muted); font-size: .94rem; }
ol.steps p strong { color: var(--text); font-weight: 700; }
.card p strong { color: var(--text); font-weight: 700; }

/* ---- questions ------------------------------------------------------------ */
.faq { display: grid; gap: .7rem; margin-top: 1.4rem; }
@media (min-width: 880px) { .faq { grid-template-columns: 1fr 1fr; gap: .9rem 1.6rem; } }
.faq details {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 13px;
  padding: .2rem .25rem;
}
.faq summary {
  cursor: pointer; list-style: none; padding: .8rem .9rem;
  font-weight: 700; font-size: 1rem; display: flex; gap: .6rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-inline-start: auto; color: var(--citrus);
  font-family: ui-monospace, Menlo, monospace; line-height: 1;
}
.faq details[open] summary::after { content: "-"; }
.faq summary:focus-visible { outline: 2px solid var(--citrus); outline-offset: -2px; }
.faq .answer { padding: 0 .9rem .9rem; color: var(--muted); font-size: .96rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- the pilot ------------------------------------------------------------- */
.pilot {
  background: var(--raised); border: 1px solid var(--rule-hi); border-radius: 20px;
  padding: 1.9rem 1.5rem; box-shadow: var(--shadow);
}
.pilot h2 { margin-top: 0; }
.pilot ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; color: var(--muted); }
@media (min-width: 880px) { .pilot ul { grid-template-columns: 1fr 1fr; gap: .6rem 1.6rem; } }
.pilot li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .5rem; }
.pilot li .mark { color: var(--ok); }
.pilot b { color: var(--text); }

/* ---- who we are -------------------------------------------------------------- */
.people { display: grid; gap: 1.4rem; margin-top: 1.5rem; }
@media (min-width: 880px) { .people { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.person { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: start; }
.person .face {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--raised); border: 1px solid var(--rule-hi);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.5rem; color: var(--sun); letter-spacing: -.02em;
}
.person .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person p { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.person .role { color: var(--citrus); font-size: .86rem; font-weight: 650; }

/* ---- footer -------------------------------------------------------------------- */
/* WhatsApp, because a restaurateur answers it and does not answer email. */
.wa { vertical-align: -3px; margin-inline-end: .35rem; }
.btn .wa { margin-inline-end: .45rem; }
.wa-line { margin-top: .4rem; }
.wa-line a {
  color: var(--sun); text-decoration: none; font-weight: 650; font-size: .95rem;
  display: inline-flex; align-items: center;
}
.wa-line a:hover, .wa-line a:focus-visible { text-decoration: underline; }
.foot a.mail { display: inline-flex; align-items: center; }

footer { border-top: 1px solid var(--rule); padding: 2.4rem 0 3.4rem; color: var(--muted); font-size: .93rem; }
.foot { display: grid; gap: 1.6rem; }
@media (min-width: 880px) { .foot { grid-template-columns: 2fr 1fr 1fr; gap: 2.4rem; } }
.foot h4 { margin: 0 0 .55rem; font-size: .78rem; letter-spacing: .12em; color: var(--text); text-transform: uppercase; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--sun); }
.foot .mail { color: var(--sun); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.foot-base { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .85rem; }