/* ============================================================
   Share Eat! brand layer  ·  aligned to The Harga Index
   Loaded after the page's own styles, so it wins on the cascade.
   Tokens first (these propagate through every existing rule),
   then the chrome that needed rebuilding.
   ============================================================ */

:root{
  --bg:#FFF8F1;
  --bg-warm:#FDF3C8;
  --ink:#1F1B12;
  --ink-soft:#4E4634;
  --ink-mute:#6E6753;
  --primary:#F5C842;
  --primary-deep:#E0A90A;
  --primary-ink:#8A6500;
  --tomato:#E8543B;
  --line:rgba(31,27,18,.08);
  --card:#FFFFFF;
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --shadow-sm:0 4px 18px rgba(31,27,18,.05);
  --shadow-md:0 14px 40px rgba(31,27,18,.08);
  --shadow-lg:0 30px 70px rgba(31,27,18,.12);
  --radius:22px;
}

/* ---- type -------------------------------------------------- */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.sec-title,.hero h1,.faq-q,.step h3,.founder .role{font-family:var(--font-display)}
h1,.hero h1{
  font-weight:800;
  font-size:clamp(2.35rem,7.6vw,4.1rem);
  line-height:1.03;
  letter-spacing:-.035em;
}
h2,.sec-title{
  font-weight:800;
  font-size:clamp(1.55rem,3.7vw,2.3rem);
  line-height:1.12;
  letter-spacing:-.025em;
}
h3{font-weight:800;letter-spacing:-.015em}
p,li,.lead,.sub,.sec-intro{text-wrap:pretty}
.lead,.sub,.sec-intro{color:var(--ink-soft);font-size:1.02rem;line-height:1.62}
.eyebrow,.sec-eyebrow,.nav-badge,.badge,.pill{
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hl,mark{background:linear-gradient(transparent 58%,rgba(245,200,66,.62) 58%);padding:0 .06em}

/* ---- buttons ----------------------------------------------- */
.btn,.btn-primary,.btn-ghost{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:-.01em;
  border-radius:14px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3),box-shadow .16s ease,background .16s ease;
}
.btn-primary{
  background:var(--primary);
  color:var(--ink);
  border:1px solid rgba(31,27,18,.10);
  box-shadow:0 6px 18px rgba(224,169,10,.24);
}
.btn-primary:hover{background:var(--primary-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--primary)}
.btn-lg{padding:15px 26px;font-size:1rem}

/* ---- surfaces ---------------------------------------------- */
.card,.form-card,.feed-card,.pain-box,.founder,.faq-item,.step,.benefit{
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.faq-q{font-weight:800;letter-spacing:-.01em}

/* ============================================================
   NAV  ·  one bar, not two. Translucent cream over blur,
   hairline base, compact on phones.
   ============================================================ */

/* The old sticky wrapper is now empty — the nav lives outside it.
   Left visible it collapses to a 1px translucent strip that draws
   a faint line across the page right at the hero's top edge, and
   still sticks over the content on scroll. */
.nav-wrap{display:none}

nav{
  position:sticky;
  top:0;
  z-index:60;
  width:auto;
  height:auto;
  min-height:0;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-block:8px;
  padding-inline:max(18px,calc(50vw - 620px));
  line-height:1.25;
  background:rgba(255,248,241,.90);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
nav .logo img{height:21px;width:auto;display:block}
nav .logo{display:flex;align-items:center;min-height:0;padding:0}

/* one shape on every page: plain text links, then a single gold button */
.nav-right{display:flex;align-items:center;gap:20px;min-height:0}
.nv-link{
  font-weight:700;
  font-size:.88rem;
  letter-spacing:-.01em;
  color:var(--ink);
  opacity:.78;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
.nv-link:hover{opacity:1;color:var(--primary-ink)}
.nv-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 17px;
  border-radius:12px;
  background:var(--primary);
  color:var(--ink);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:-.01em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid rgba(31,27,18,.10);
  box-shadow:0 6px 18px rgba(224,169,10,.24);
  transition:background .16s ease,transform .16s cubic-bezier(.2,.9,.3,1.3);
}
.nv-btn:hover{background:var(--primary-deep);transform:translateY(-1px)}

/* the old pill treatments, retired */
.nav-index,.nav-badge,.harga-strip{display:none !important}

/* ---- hamburger + drawer, the Harga Index pattern ---------- */
.nv-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
}
.nv-burger span{
  display:block;
  width:20px;height:2px;
  background:var(--ink);
  border-radius:2px;
  position:relative;
}
.nv-burger span::before,.nv-burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;
}
.nv-burger span::before{top:-6px}
.nv-burger span::after{top:6px}

.nv-drawer{position:fixed;inset:0;z-index:200;visibility:hidden}
.nv-drawer.on{visibility:visible}
.nv-scrim{position:absolute;inset:0;background:rgba(31,27,18,.5);opacity:0;transition:opacity .26s ease}
.nv-drawer.on .nv-scrim{opacity:1}
.nv-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(86vw,320px);
  background:var(--ink);
  color:var(--bg);
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.9,.3,1);
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;
}
.nv-drawer.on .nv-panel{transform:none}
.nv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.nv-head img{height:19px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.nv-close{
  width:36px;height:36px;border:0;background:none;color:var(--bg);
  font-size:26px;line-height:1;cursor:pointer;opacity:.7;padding:0;
}
.nv-close:hover{opacity:1}
.nv-panel a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 4px;
  color:var(--bg);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.015em;
  text-decoration:none;
  border-bottom:1px solid rgba(255,248,241,.10);
}
.nv-panel a:last-of-type{border-bottom:0}
.nv-panel a.nv-p-btn{
  margin-top:14px;
  justify-content:center;
  background:var(--primary);
  color:var(--ink);
  font-weight:800;
  border-radius:14px;
  border-bottom:0;
  padding:15px 18px;
}
.nv-panel .nv-p-tag{
  margin-top:auto;
  padding-top:20px;
  color:rgba(255,248,241,.45);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:-.01em;
}
body.nv-open{overflow:hidden}

@media(max-width:720px){
  nav{padding-block:7px;padding-inline:16px}
  nav .logo img{height:19px}
  /* only swap to the drawer once the script has actually built it, so a
     failed script leaves working links rather than an empty bar */
  .nv-ready .nav-right{display:none}
  .nv-ready .nv-burger{display:flex}
  .nav-right{gap:10px 14px;flex-wrap:wrap;justify-content:flex-end}
  .nav-right .nv-link{font-size:.78rem}
  .nav-right .nv-btn{padding:8px 13px;font-size:.78rem}
}

/* ============================================================
   TAGLINE BAND  ·  the manifesto, directly under the nav.
   Doubles as the Harga Index entry point on phones.
   ============================================================ */
.se-band{
  /* The hero is pulled up underneath this band so its glow can reach
     the pill (see HERO GLOW below). The hero comes later in the
     document, so without a stacking order of its own the band would
     sit under the hero's container and the pill would stop taking
     clicks. */
  position:relative;
  z-index:1;
  width:auto;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:flex;
  justify-content:center;
  padding:14px 16px 2px;
  background:none;
  border:0;
}
.se-band-in{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(224,169,10,.34);
  box-shadow:0 6px 20px rgba(31,27,18,.06);
  text-align:center;
}
.se-band-t{
  font-weight:800;
  font-size:.86rem;
  letter-spacing:-.015em;
  color:var(--ink);
  line-height:1.2;
}
.se-band-l{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:.78rem;
  color:var(--primary-ink);
  text-decoration:none;
  white-space:nowrap;
  line-height:1.2;
}
.se-band-l:hover{color:var(--primary-deep)}
@media(max-width:720px){
  .se-band{padding:12px 14px 2px}
  .se-band-in{gap:8px;padding:7px 13px;flex-wrap:wrap;justify-content:center}
  .se-band-t{font-size:.8rem}
  .se-band-l{font-size:.72rem}
}

/* ------------------------------------------------------------
   HERO GLOW  ·  it used to stop dead at the hero's top edge,
   which drew a hard horizontal line immediately under the
   floating tagline pill and made the pill look cut out.

   The hero itself now starts 110px higher, so its glow layer
   reaches up behind the band and the pill. The inner container
   is padded back down by the same amount, so nothing moves —
   only the painted area grows. The hero keeps its own clipping,
   which its decorative blob still depends on.

   The layer's top edge ends up inside the sticky nav, and a
   short mask fades it out there, so it can never read as a
   line. The gradients are re-anchored in pixels from the taller
   layer's top, which puts each glow back where its page had it.
   ------------------------------------------------------------ */
.hero{margin-top:-110px}
.hero > .container{padding-top:110px}
.hero::before{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 40px);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 40px);
  /* home: glow rises from the centre of the hero's top edge */
  background:
    radial-gradient(52% 48% at 50% 124px, rgba(245,200,66,.26), transparent 64%),
    radial-gradient(40% 40% at 88% 90%,   rgba(232,84,59,.08),  transparent 66%);
}
/* Creators and restaurants: two-column heroes, glow sits top right.
   Marked up with a class, and matched again structurally so the
   rule still lands if a page is rebuilt without it. Kept as two
   rules on purpose — one selector list would drop both wherever
   :has() is unsupported. */
.hero.se-hero-split::before{
  background:
    radial-gradient(60% 60% at 85% 170px, rgba(245,200,66,.28), transparent 60%),
    radial-gradient(50% 50% at 0%  91%,   rgba(232,84,59,.10),  transparent 60%);
}
.hero:has(.hero-grid)::before{
  background:
    radial-gradient(60% 60% at 85% 170px, rgba(245,200,66,.28), transparent 60%),
    radial-gradient(50% 50% at 0%  91%,   rgba(232,84,59,.10),  transparent 60%);
}

/* ============================================================
   STICKY BOTTOM BAR  ·  a floating dark island, not a slab.
   Same treatment as the Harga Challenge bar.
   ============================================================ */
.mobile-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  background:none;
  border:0;
  box-shadow:none;
  pointer-events:none;
}
.mobile-cta .mc-in{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:560px;
  margin:0 auto;
  padding:11px 12px 11px 17px;
  border-radius:18px;
  background:rgba(31,27,18,.97);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,248,241,.10);
  box-shadow:0 12px 34px rgba(31,27,18,.34);
}
.mobile-cta .mc-t{flex:1 1 auto;min-width:0;line-height:1.25}
.mobile-cta .mc-t b{
  display:block;
  color:var(--bg);
  font-weight:800;
  font-size:.9rem;
  letter-spacing:-.015em;
}
.mobile-cta .mc-t small{
  display:block;
  color:rgba(255,248,241,.55);
  font-weight:600;
  font-size:.72rem;
  margin-top:1px;
}
.mobile-cta .mc-b{
  flex:0 0 auto;
  padding:11px 17px;
  border-radius:13px;
  background:var(--primary);
  color:var(--ink);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
}
.mobile-cta .mc-b:active{transform:translateY(1px)}
body{padding-bottom:0}

/* ============================================================
   FOOTER  ·  real navigation, not just a copyright line.
   ============================================================ */
.se-foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 auto 18px;
  max-width:640px;
}
.se-foot-nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:12px 18px;
  min-height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:-.01em;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
}
.se-foot-nav a:hover{border-color:rgba(224,169,10,.45);background:rgba(245,200,66,.1)}
.se-foot-line{
  text-align:center;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:-.015em;
  margin:0 auto 14px;
  color:var(--ink);
}
footer .logo img{height:22px}
footer .se-foot-nav a{min-height:44px}

/* tap targets: phones only, so the desktop nav stays slim */
@media(max-width:720px){nav a{min-height:34px;display:inline-flex;align-items:center}}

/* ============ RESTAURANT LOGO SCROLLER =========================
   The source logos are wildly inconsistent: 12 square files and one 4:1
   banner, backgrounds ranging from transparent to white to solid black to a
   photograph, and every mark padded differently inside its own canvas. Rather
   than fight that in CSS, each logo is pre-baked into an identical 160x96
   card at build time, trimmed of its own padding and scaled to equal optical
   area, on a card tinted with that brand's own background colour. So the CSS
   here only has to lay out identical rectangles.                          */
.logostrip{padding:34px 0 36px;background:var(--bg,#faf9f5);overflow:hidden}
/* same pill as the page's own .eyebrow, so the rail's label reads as part of
   the existing system rather than a new kind of heading */
.logostrip > .container{text-align:center}
.logostrip-head{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:#fff;border:1px solid var(--line,rgba(26,23,20,.08));
  color:var(--primary-ink,#8a6500);
  box-shadow:var(--shadow-sm,0 4px 18px rgba(26,23,20,.04));
  margin:0 0 20px;
}
.mq{
  position:relative;overflow:hidden;
  --fade:64px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
/* Two identical copies of the list sit in the track and it slides exactly
   -50%. The gap lives on the item, not on the flex container, so half the
   track is a whole number of items and the loop has no seam. */
.mq-track{display:flex;width:max-content;animation:mq-scroll 52s linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lgc{flex:0 0 auto;width:160px;margin-right:18px;text-align:center}
.lgc img{
  display:block;width:160px;height:96px;border-radius:14px;
  border:1px solid rgba(26,23,20,.10);background:#fff;
  box-shadow:0 1px 2px rgba(26,23,20,.05),0 6px 16px rgba(26,23,20,.05);
}
.lgc b{
  display:block;margin-top:10px;font-size:11.5px;font-weight:700;
  color:var(--ink-soft,#5c554d);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logostrip-foot{
  text-align:center;margin:24px 0 0;font-size:13px;color:var(--ink-soft,#5c554d);
}
.logostrip-foot a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){
  .logostrip{padding:28px 0 30px}
  /* the label is nearly the full width of a 390px phone at desktop size */
  .logostrip-head{font-size:11px;letter-spacing:.03em;padding:6px 13px}
  .mq{--fade:28px}
  .lgc{width:132px;margin-right:14px}
  .lgc img{width:132px;height:79px;border-radius:12px}
}
/* Motion off: the marquee becomes a normal swipeable rail, so nothing is
   unreachable for anyone who never sees it move. */
@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mq::-webkit-scrollbar{display:none}
  .mq-track{animation:none}
  .mq-track .mq-dup{display:none}
}

/* The rail lives inside the hero grid, not as its own band. On phones the
   grid is one column so DOM order alone puts it between the "founding 100"
   line and the phone mockup. On desktop the grid is two columns, so it is
   ordered last and spanned across both. */
.hero-grid > .logostrip{padding:0;background:transparent;overflow:visible;margin-top:26px;
  /* grid items default to min-width:auto, so the 3796px track was sizing
     the whole column and the fade mask landed off-screen */
  min-width:0}
.hero-grid > .logostrip > .container{width:auto;max-width:none;padding:0}
.hero-grid > .logostrip .logostrip-head{margin-bottom:16px}
.hero-grid > .logostrip .mq{overflow:hidden}
@media(min-width:941px){
  .hero-grid > .logostrip{order:3;grid-column:1/-1;margin-top:44px}
}
@media(max-width:940px){
  .hero-grid{row-gap:28px}
  /* the rail is a distinct band between the founding-100 line and the phone,
     so it needs more air than the grid's own row gap gives it */
  .hero-grid > .logostrip{margin-top:26px;margin-bottom:24px}
}