/* Puncher marketing site — shared stylesheet.
   The palette, radii and shadows mirror the app's :root in index.html.
   Change one, change the other, or the site and the app drift apart again. */

:root{
  /* Ground is brushed steel under kitchen fluorescents — grey with a faint
     green bias, not cream and not white. The dark navy this replaced is the
     background of every startup landing page, and it read badly in the moment
     that actually matters: a cook looking at a phone outside a restaurant at
     six in the evening. */
  --steel:#E7EAE6;                      /* app --bg */
  --chalk:#FBFBFA;                      /* app --surface — lifted off the ground */
  --chalk-2:#DFE3DE;                    /* app --surface-3 — recessed into it */
  --rail:#14181A;                       /* the dark band; kitchen matting, not black */
  --line:#C9CFC9;                       /* app --border */
  --line-soft:#DDE1DC;
  --line-strong:#B4BCB4;

  /* Orange is a state, not decoration. It marks what is live, what is urgent,
     and the primary action — nothing else. It used to sit on eyebrows,
     numerals, dots and every button at once, which is why it said nothing. */
  --flame:#E8531F;                      /* app --accent — marks, rules, large display */
  --flame-ink:#B33A10;                  /* small accent text, and button grounds
                                           under a white label: 4.90:1 on steel,
                                           5.95:1 white-on-it */
  --flame-deep:#8E2C0A;                 /* button hover — darker, not lighter */

  /* The restaurant side. Blue is the kitchen's own safety colour — gloves,
     plasters, cutting boards — precisely because no food is blue. */
  --tape:#2B6CB0;
  /* Washes of the restaurant blue, for a surface that should read as the
     restaurant side without carrying text. Referenced by .guarantee-card,
     which was drawing on nothing until these existed. */
  --tape-faint:#EFF4FA;
  --tape-muted:#E3ECF6;

  --ink:#1B2124;                        /* app --text */
  --ink-soft:#5A6469;                   /* app --muted */
  --ink-softer:#5F686D;                 /* app --muted-2 */
  --on-flame:#FFFFFF;                   /* app --on-accent */
  --on-tape:#FFFFFF;
  --on-rail:#E7EAE6;
  /* A glow belongs on a dark ground. On this one, weight comes from a real
     shadow and a hairline. */
  --lift:0 1px 0 var(--line-soft), 0 14px 28px -22px rgba(20,24,26,.55);

  /* Hebrew-capable fallbacks before the generic families, so a device that
     fails to load the vendored woff2 still renders Hebrew text natively.
     Suez One is a single-weight display face: anything using --display must
     set font-weight:400, or the browser synthesises a bold and smears it. */
  --display:"Suez One","Arial Hebrew",Georgia,serif;
  --body:"Assistant","Heebo","Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Only what a kitchen ticket prints: hours, distances, rates. Latin-only by
     design — Hebrew never passes through it. */
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* spacing scale — sections and stacks pick from here, nothing ad hoc */
  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:52px; --s-6:80px; --s-7:112px;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--steel);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:6px}

/* keyboard users land here first and can jump past the nav */
.skip{
  position:absolute;inset-inline-start:-9999px;top:12px;z-index:100;
  background:var(--flame-ink);color:var(--on-flame);padding:12px 20px;border-radius:var(--r-md);
  font-weight:700;text-decoration:none;box-shadow:var(--lift);
}
.skip:focus{inset-inline-start:16px}

/* ---------- sticky site header ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--steel) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar-inner{display:flex;align-items:center;gap:var(--s-2);padding:12px 0;flex-wrap:wrap}
.mark{
  width:44px;height:44px;border-radius:10px;flex:none;
  box-shadow:0 2px 6px -2px rgba(20,24,26,.25);
}
.brand{
  font-family:var(--display);font-weight:400;font-size:20px;
  letter-spacing:.2px;text-decoration:none;
}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:9px 15px;border-radius:999px;transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--chalk);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--chalk);color:var(--ink)}
.nav a.nav-cta{background:var(--flame-ink);color:var(--on-flame);box-shadow:var(--lift)}
.nav a.nav-cta:hover{background:var(--flame-deep)}

/* ---------- hero ---------- */
.hero{
  position:relative;text-align:center;
  padding:var(--s-6) 0 var(--s-5);
}
.hero-logo{
  width:104px;height:104px;border-radius:24px;margin:0 auto var(--s-3);
  box-shadow:0 18px 34px -22px rgba(20,24,26,.5), 0 0 0 1px var(--line);
  /* opacity and offset only — never scale. An animation that owns the element's
     size leaves it shrunken for good if it is frozen or never runs. */
  animation:logo-in .6s ease-out;
}
@keyframes logo-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hero h1{margin-inline:auto}
.hero .lede{margin-inline:auto;text-align:center}

h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,7.4vw,68px);line-height:1.03;margin:0 0 var(--s-2);
  letter-spacing:-1px;
}
h1 em{font-style:normal;color:var(--flame)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(27px,4.6vw,40px);line-height:1.12;margin:0 0 var(--s-3);letter-spacing:-.4px}
.lede{font-size:clamp(16px,2.3vw,20px);color:var(--ink-soft);max-width:54ch;margin:0}

/* page hero for interior pages */
.page-head{padding:var(--s-5) 0 0;max-width:62ch}
.page-head h1{font-size:clamp(32px,5.4vw,52px)}

/* ---------- availability strip ---------- */
.strip{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--chalk);
  padding:var(--s-2) var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  align-items:center;justify-content:center;margin-top:var(--s-4);
}
.live{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px;letter-spacing:.4px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--flame);position:relative;flex:none}
.dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--flame);opacity:.55;animation:ping 2.2s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.who{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:14px;color:var(--ink-soft);background:var(--chalk-2);
}
.chip b{font-weight:800;color:var(--ink)}

/* ---------- stats band ---------- */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-5);
}
.stat{background:var(--chalk);padding:var(--s-3) var(--s-2);text-align:center}
.stat b{
  display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,42px);
  line-height:1;color:var(--flame);letter-spacing:-1px;
}
.stat span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- what you get, in the hero ---------- */
/* The hero used to end on the stats band above: 61 towns, 7 kitchen fields,
   4 job types, set in the same large orange numerals a reader has learned to
   read as traction. They are counts of dropdown options. In the coverage
   section of about.html that is honest — the sentence above them says so —
   but directly under the hero CTAs it answers a question nobody asked and
   implies scale the product does not have yet.
   Same slot and same weight, holding three things that are true on day one
   and stay true at any size. The numerals are gone deliberately: nothing here
   should be mistaken for a metric. */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-5);
}
.fact{background:var(--chalk);padding:var(--s-3) var(--s-2);text-align:center}
.fact b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.9vw,25px);line-height:1.15;color:var(--ink);letter-spacing:-.3px;
}
.fact b::after{
  content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--flame);margin:10px auto 0;
}
.fact span{display:block;margin-top:9px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- CTAs ---------- */
.ctas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin:var(--s-4) auto 0;max-width:660px}
.cta{
  display:block;text-decoration:none;border-radius:var(--r-md);padding:18px 20px;
  font-weight:800;font-size:17px;text-align:center;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.cta small{display:block;font-weight:400;font-size:13.5px;opacity:.75;margin-top:3px}
.cta-cook{background:var(--flame-ink);color:var(--on-flame);box-shadow:var(--lift)}
.cta-rest{background:transparent;color:var(--tape);border:1.5px solid var(--line-strong)}
.cta-rest:hover{border-color:var(--tape)}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ---------- sections ---------- */
section{padding:var(--s-6) 0 0}
.eyebrow{
  font-size:13px;font-weight:800;letter-spacing:1.6px;color:var(--flame-ink);
  text-transform:uppercase;margin:0 0 var(--s-1);
}

.steps{display:grid;gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.step{background:var(--chalk);padding:var(--s-3);display:flex;gap:var(--s-3);align-items:flex-start;transition:background .18s ease}
.step:hover{background:var(--chalk)}
.num{
  font-family:var(--mono);font-weight:600;font-size:14px;color:var(--on-flame);
  background:var(--flame-ink);border-radius:999px;width:34px;height:34px;
  display:grid;place-items:center;flex:none;margin-top:2px;box-shadow:var(--lift);
}
.step h3{margin:0 0 4px;font-size:18.5px;font-weight:800}
.step p{margin:0;color:var(--ink-soft);font-size:16px}

/* ---------- cards ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--chalk);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.card .pad{padding:var(--s-4) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.card h3{font-family:var(--display);font-weight:400;font-size:25px;margin:0}
.card ul{margin:0;padding-inline-start:19px;color:var(--ink-soft)}
.card li{margin-bottom:7px}
.card .go{margin-top:auto;padding-top:6px}
.card-cook{border-top:3px solid var(--flame)}
.card-rest{border-top:3px solid var(--tape)}
.ghost{
  display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  border-radius:var(--r-md);padding:14px 20px;text-align:center;width:100%;
  transition:filter .16s ease;
}
.ghost:hover{filter:brightness(1.06)}
.g-cook{background:var(--flame-ink);color:var(--on-flame);box-shadow:var(--lift)}
.g-rest{background:var(--tape);color:var(--on-tape)}

/* ---------- prose blocks on interior pages ---------- */
.prose{max-width:68ch}
.prose h2{margin-top:var(--s-5)}
.prose p{color:var(--ink-soft)}
.prose ul{color:var(--ink-soft);padding-inline-start:20px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);display:grid;gap:1px}
.faq details{background:var(--chalk)}
.faq summary{
  cursor:pointer;padding:20px var(--s-3);font-weight:700;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);
  transition:background .18s ease;
}
.faq summary:hover{background:var(--chalk)}
.faq summary::-webkit-details-marker{display:none}
/* the question is a real heading, but must not look like one */
.faq summary h2.q{font:inherit;margin:0;letter-spacing:normal;line-height:inherit}
.faq summary::after{content:"+";color:var(--flame-ink);font-weight:800;font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 var(--s-3) 20px;color:var(--ink-soft)}

/* ---------- closing block ---------- */
.close{
  border:1px solid var(--line);border-radius:var(--r-xl);background:
    radial-gradient(120% 140% at 85% 0%,rgba(232,83,31,.07),transparent 60%),var(--chalk);
  padding:clamp(30px,5vw,54px);text-align:center;margin-top:var(--s-6);
}
.close h2{margin-bottom:var(--s-1)}
.close p{color:var(--ink-soft);margin:0 auto var(--s-3);max-width:46ch}

/* ---------- footer ----------
   The page ends on the dark band. It is the one place the old ground survives,
   and it does the job it was always good at: closing the page and letting the
   steel above it read as the lit surface rather than as the only surface.
   Kept inside .wrap deliberately — a full-bleed trick here measures against
   100vw, which includes the scrollbar, and the body must never scroll
   sideways. */
footer{
  background:var(--rail);color:#9AA5A8;
  padding:var(--s-5) var(--s-4) var(--s-5);
  margin-top:var(--s-6);font-size:14.5px;
}
footer a{color:var(--on-rail)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
.foot-grid h3{font-weight:800;font-size:15px;letter-spacing:.2px;margin:0 0 10px;color:var(--on-rail)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:7px}
.foot-grid a{text-decoration:none;color:#9AA5A8}
.foot-grid a:hover{color:var(--on-rail)}
.foot-bottom{border-top:1px solid #2A3134;padding-top:var(--s-3);font-size:13.5px;color:#8A9598}

/* ---------- scroll reveal ----------
   Scoped to .js, which an inline script in <head> adds. Without it the content
   is simply visible — an opacity:0 that depends on JS running is content that
   disappears whenever the script does not. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:720px){
  .ctas,.split,.foot-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;}

  /* Three stacked cards would hand the weakest content on the page a whole
     screen, on the device most chefs arrive from. One compact row each. */
  .facts{grid-template-columns:1fr}
  .fact{display:flex;align-items:baseline;gap:10px;text-align:start;padding:13px var(--s-3)}
  .fact b{font-size:17.5px;flex:none}
  .fact b::after{display:none}
  .fact span{margin-top:0}

  /* The header used to give up and scroll away here: six links wrapped to
     three rows, and a stuck bar would have held ~170px — a fifth of the
     screen — for the whole visit. The cost of that workaround was that the
     one link that matters, the app itself, left the screen on first scroll.
     One non-wrapping scrollable row fixes the height instead of the symptom,
     and `order:-1` puts the app CTA at the start of it, so it is on screen
     without scrolling anything. */
  .bar-inner{flex-wrap:nowrap;gap:10px;padding:10px 0}
  .mark{width:36px;height:36px;border-radius:8px}
  .brand{font-size:17px;flex:none}
  .nav{
    margin-inline-start:auto;width:auto;min-width:0;
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;font-size:14px;padding:7px 11px}
  .nav a.nav-cta{order:-1}
  .hero{padding:var(--s-5) 0 var(--s-4)}
  .hero-logo{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* must out-specify `.js .reveal`, and the observer returns early under
     reduced motion so nothing will ever add .in — without this the sections
     stay at opacity 0 and the page reads as empty */
  .js .reveal, .reveal{opacity:1!important;transform:none!important}
}

/* ---------- guarantee section ---------- */
.guarantee-section{padding:var(--s-6) 0}
.guarantee-card{
  background:linear-gradient(135deg,var(--tape-faint) 0%,var(--tape-muted) 100%);
  border:2px solid var(--tape);
  border-radius:20px;
  padding:var(--s-5);
  text-align:center;
  box-shadow:0 0 30px rgba(231,98,60,0.15);
}
.guarantee-icon{font-size:56px;margin-bottom:var(--s-2)}
.guarantee-card h2{
  font-family:var(--display);
  font-size:32px;
  font-weight:900;
  margin:0 0 var(--s-1);
  color:var(--ink);
}
.guarantee-subtitle{
  font-size:16px;
  color:var(--ink-soft);
  margin-bottom:var(--s-4);
}
.guarantee-features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-3);
  margin:var(--s-4) 0;
  text-align:right;
}
.guarantee-feature{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  background:var(--steel);
  padding:var(--s-3);
  border-radius:16px;
  border:1px solid var(--line);
}
.guarantee-feature:hover{
  border-color:var(--tape);
  transform:translateY(-2px);
  transition:all .2s ease;
}
.feature-icon{font-size:28px;flex:none;margin-top:2px}
.guarantee-feature h3{
  font-family:var(--display);
  font-size:18px;
  margin:0 0 var(--s-1);
  color:var(--ink);
}
.guarantee-feature p{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}
.guarantee-fine{
  font-size:12px;
  color:var(--ink-soft);
  margin:var(--s-3) 0 0;
}
@media (prefers-reduced-motion:reduce){
  .guarantee-feature:hover{transform:none}
}

/* ---------- Skeleton Loading Animation ---------- */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-line,
.skeleton-card,
.skeleton-avatar,
.skeleton-button {
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-card,
    .skeleton-avatar,
    .skeleton-button {
        animation: none;
    }
}

/* ---------- Empty State Styles ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state-icon {
    opacity: 0.3;
    margin-bottom: 16px;
}

.empty-state h3 {
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--muted-2);
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
    margin-bottom: 24px;
}

.empty-state button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255,138,76,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.empty-state button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255,138,76,0.4);
}

.empty-state button:active {
    transform: translateY(0);
}