/* SocialChef landing — Hebrew / RTL
   Palette: deep olive-black base, bone type, ONE accent (paprika).
   Deliberately not the cream+brass+espresso default: that palette is the
   single most-used AI reach for warm hospitality briefs. Dark base lets the
   food photography carry the warmth instead of the background. */

@font-face {
  font-family: 'Heebo';
  src: url('font/heebo-hebrew.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('font/heebo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink:        #0E120D;   /* page */
  --ink-2:      #151A13;   /* raised band */
  --ink-3:      #1D2419;   /* card */
  --bone:       #EDEAE0;
  --bone-dim:   rgba(237, 234, 224, .64);
  --bone-faint: rgba(237, 234, 224, .56);  /* .40 read as 3.35:1 — below AA */
  --accent:     #E4552B;
  --line:       rgba(237, 234, 224, .13);

  --ease-out:   cubic-bezier(.23, 1, .32, 1);

  --wrap:       1240px;
  --gut:        clamp(20px, 5vw, 64px);
  --radius:     16px;      /* one radius scale; pills only for buttons */
}

/* ── reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--accent); color: var(--ink);
  padding: 12px 20px; font-weight: 700; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── type scale ────────────────────────────────────────── */
/* Hebrew has no ascender/descender rhythm to protect, so display type can
   sit tight — but only mild negative tracking: Heebo's counters close up fast. */
.display {
  font-weight: 900;
  font-size: clamp(2.4rem, 5.4vw, 4.35rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.display em {
  font-style: normal;
  color: var(--accent);
}
.display-sm { font-size: clamp(2.1rem, 5.2vw, 3.8rem); }

.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  font-weight: 800;
}

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 34ch;
}
.body {
  color: var(--bone-dim);
  max-width: 56ch;
}
.body-wide { max-width: 62ch; }

/* ── buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.02rem;
  padding: 15px 30px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn-sm { padding: 10px 21px; font-size: .94rem; }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

.link-quiet {
  color: var(--bone-dim);
  font-weight: 500;
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.link-quiet:hover { color: var(--bone); border-color: var(--accent); }

/* ── header ────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; }
.mark-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.mark-text { font-size: 1.16rem; letter-spacing: -.01em; }

.nav {
  display: flex;
  gap: 30px;
  font-size: .97rem;
  color: var(--bone-dim);
  font-weight: 500;
}
.nav a { transition: color 160ms var(--ease-out); }
.nav a:hover { color: var(--bone); }
/* push the CTA to the far inline-end (visual left in RTL) */
.head-inner .btn { flex: none; margin-inline-start: auto; }

/* ── hero ──────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 92px) clamp(64px, 9vw, 120px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* the grid column governs the headline measure; the lede keeps its own */
.hero-copy { max-width: none; }
.lede { margin-top: 26px; }
.hero-cta {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* phone mockups — real photography inside a device frame, not a fake
   div-screenshot: this is literally the artefact the product outputs. */
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}
.phone {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid rgba(237, 234, 224, .10);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .75),
              0 0 0 8px rgba(14, 18, 13, .9);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

.phone-front {
  width: min(290px, 74%);
  aspect-ratio: 9 / 16;
  transform: rotate(-3.2deg);
  z-index: 2;
}
.phone-back {
  position: absolute;
  width: min(232px, 60%);
  aspect-ratio: 9 / 16;
  inset-inline-end: 2%;
  top: 6%;
  transform: rotate(6deg);
  opacity: .62;
  filter: saturate(.85);
  z-index: 1;
}

/* story chrome */
.story-ui { position: absolute; inset-inline: 14px; top: 14px; }
/* story progress fills left-to-right even in an RTL app — match the real chrome */
.bars { display: flex; gap: 4px; direction: ltr; }
.bars i {
  height: 2.5px; flex: 1; border-radius: 2px;
  background: rgba(237, 234, 224, .32);
}
.bars i.on { background: var(--bone); }

.story-caption {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 60px 22px 26px;
  background: linear-gradient(to top, rgba(14, 18, 13, .92), transparent);
}
.cap-line {
  display: inline-block;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 4px;
}

/* ── bands ─────────────────────────────────────────────── */
.band { padding-block: clamp(64px, 9vw, 128px); }
.band-raised {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

/* ── steps ─────────────────────────────────────────────── */
.steps {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.step {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.step-num {
  display: block;
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: var(--accent);
  letter-spacing: .06em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.28rem; line-height: 1.35; margin-bottom: 10px; }
.step p  { color: var(--bone-dim); font-size: 1rem; }

/* ── what you get ──────────────────────────────────────── */
.what-head { display: grid; gap: 24px; max-width: 62ch; }
.cards {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.card-art {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-3);
}
.card-art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.card:hover .card-art img { transform: scale(1.035); }
.card-cap {
  position: absolute;
  inset-inline-start: 20px;
  bottom: 20px;
  font-weight: 800;
  font-size: 1.15rem;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 3px;
  text-shadow: 0 2px 14px rgba(14, 18, 13, .85);
}
.card-label {
  margin-top: 15px;
  color: var(--bone-faint);
  font-size: .94rem;
  font-weight: 500;
}

/* ── audience tiles ────────────────────────────────────── */
.tiles {
  margin-top: clamp(36px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92);
  transition: transform 600ms var(--ease-out);
}
.tile:hover img { transform: scale(1.04); }
.tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 18, 13, .88) 0%, rgba(14, 18, 13, .1) 55%);
}
.tile-label {
  position: absolute;
  inset-inline-start: 22px;
  bottom: 20px;
  z-index: 2;
  font-weight: 800;
  font-size: 1.3rem;
}

/* ── why ───────────────────────────────────────────────── */
/* One wide column, no grid and no cards — every other section on the page is
   a grid of something, so this reads as a pause rather than another list. */
/* Measure is constrained on the text, not on .wrap — putting max-width on the
   wrap centres the whole block and knocks the heading out of line with every
   other section. */
/* Gaps and body size below follow Stitch's Obsidian & Ochre spec:
   stack-gap-lg (48px) between headline and body, body-lg 20px/32px. */
.why-lead {
  max-width: 54ch;
  margin-top: 48px;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  font-weight: 500;
}
.why-body {
  max-width: 58ch;
  margin-top: 24px;
  font-size: 1.25rem;      /* body-lg */
  line-height: 2rem;
  color: var(--bone-dim);
}

/* ── pricing ───────────────────────────────────────────── */
/* One plan, so one panel. A tier grid would be three columns of the same
   thing. */
.price-card {
  margin-top: 48px;
  max-width: 30rem;
  padding: clamp(32px, 3.5vw, 40px);   /* Stitch: cards min 32px padding */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
/* Stitch: "use display-lg for the price figure" — 72px desktop, 48px mobile,
   weight 900, accent, so the value is the focal point of the section. */
.price-num {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
.price-per { color: var(--bone-dim); font-size: 1rem; }

.price-list { margin: 24px 0 30px; display: grid; gap: 13px; }

/* The list ticks in one line at a time once the card is revealed, so the eye
   reads what's included in order instead of taking it as one block. Driven off
   the card's own .in class — no extra observer. */
.price-list li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.price-card.in .price-list li { opacity: 1; transform: none; }
.price-card.in .price-list li:nth-child(1) { transition-delay: 120ms; }
.price-card.in .price-list li:nth-child(2) { transition-delay: 190ms; }
.price-card.in .price-list li:nth-child(3) { transition-delay: 260ms; }
.price-card.in .price-list li:nth-child(4) { transition-delay: 330ms; }
.price-card.in .price-list li:nth-child(5) { transition-delay: 400ms; }
.price-list li {
  position: relative;
  padding-inline-start: 28px;   /* room for the tick on the inline-start side */
  color: var(--bone-dim);
  line-height: 1.55;
}
/* Tick drawn from two borders — no icon dependency for five list items. */
.price-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: .52em;
  width: 11px;
  height: 6px;
  /* physical left+bottom on purpose: a tick is a shape, not a direction —
     logical borders mirror it into a chevron under RTL */
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ── faq ───────────────────────────────────────────────── */
.faq-list {
  max-width: 62ch;
  margin-top: 48px;
}
/* Stitch: hairlines lift toward 0.3 opacity on hover for feedback. */
.faq-list details {
  border-top: 1px solid var(--line);
  transition: border-color 160ms var(--ease-out);
}
.faq-list details:hover {
  border-top-color: rgba(237, 234, 224, .3);
}
.faq-list details:last-of-type { border-bottom: 1px solid var(--line); }

.faq-list summary {
  list-style: none;               /* kill the default triangle */
  cursor: pointer;
  padding: 22px 0;
  padding-inline-end: 36px;       /* room for the +, which sits inline-end */
  position: relative;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  transition: color 160ms var(--ease-out);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }

/* + that rotates into a x. Drawn with two bars so it stays crisp at any size. */
.faq-list summary::before,
.faq-list summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--accent);
  transition: transform 220ms var(--ease-out);
}
.faq-list summary::before { transform: translateY(-50%); }
.faq-list summary::after  { transform: translateY(-50%) rotate(90deg); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

/* Native open/close easing. ::details-content + interpolate-size animates to
   auto height with no JS and no measuring; browsers without it just snap open,
   which is exactly today's behaviour. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 260ms var(--ease-out),
                content-visibility 260ms var(--ease-out) allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}

.faq-list details p {
  color: var(--bone-dim);
  padding-bottom: 24px;
  padding-inline-end: 36px;
  margin-top: -4px;
}

/* ── closing ───────────────────────────────────────────── */
.closing {
  padding-block: clamp(80px, 11vw, 150px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(228, 85, 43, .16), transparent 62%),
    var(--ink-2);
  border-top: 1px solid var(--line);
}
.closing-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
}
.closing .lede { max-width: 44ch; margin-top: 0; }
.closing .btn  { margin-top: 12px; }

/* ── footer ────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 40px;
}
.foot-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-note {
  color: var(--bone-faint);
  font-size: .95rem;
  margin-inline-end: auto;
}
.foot-mail {
  color: var(--bone-dim);
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.foot-mail:hover { color: var(--bone); border-color: var(--accent); }

/* ── motion ────────────────────────────────────────────── */
/* Scroll reveal only — the page's job is to be read, so motion stays at
   "orient the eye", never "look at me". */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 70ms; }
.reveal:nth-child(3) { transition-delay: 140ms; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-art  { min-height: 420px; margin-top: 8px; }
  .phone-front { width: 250px; }
  .phone-back  { width: 200px; inset-inline-end: 14%; }
  .steps, .cards { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .head-inner { height: 62px; gap: 14px; }
  .head-inner .btn { margin-inline-start: auto; }
  .steps, .cards, .tiles { grid-template-columns: 1fr; }
  .cards { max-width: 380px; }
  .tiles { max-width: 380px; }
  .tile  { aspect-ratio: 16 / 10; }
  .hero-cta { gap: 18px; }
  .hero-art { min-height: 380px; }
  .phone-front { width: 216px; }
  .phone-back  { width: 172px; inset-inline-end: 4%; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot-note { margin-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* the * rule above does not reach ::details-content or the staggered list */
  .price-list li { opacity: 1; transform: none; transition-delay: 0ms !important; }
  .faq-list details::details-content { transition: none !important; }
}