/* ChopBelleful landing page. One deliberate light look (matches the game): white
   tablecloth, wooden browns, jollof orange, leaf green, plantain gold. */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lilita-one-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format('woff2')}

:root{
  --bg:#FFFFFF; --chip:#F4F1EA; --chip-2:#EAE4D6; --line:rgba(42,26,12,.14);
  --ink:#2A1A0C; --muted:#5C6660; --gold:#FFC93C; --gold-dark:#9A6A00;
  --link:#B83A0A; --line-strong:#8A8478;
  --jollof:#D9480F; --leaf:#0E6B3F; --wood:#7B4520; --wa:#25D366; --wa-dark:#128C4A;
  --display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:600 17px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--link)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--jollof);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7.4vw,72px);color:var(--jollof);text-shadow:0 3px 0 var(--gold)}
h2{font-size:clamp(30px,5vw,44px)}
h3{font-size:24px}
p{margin:0 0 12px}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin-bottom:10px}
.lede{font-size:clamp(18px,2.4vw,21px);color:var(--muted);max-width:52ch}

/* nav */
.nav .wrap{display:flex;align-items:center;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:30px;line-height:1;text-decoration:none;color:var(--jollof);text-shadow:0 2px 0 var(--gold);display:flex;align-items:center;gap:10px}
.brand em{font-style:normal;color:var(--leaf)}
.brand img{width:36px;height:36px;border-radius:10px}
.nav ul{display:flex;gap:6px 20px;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:wrap;align-items:center}
.nav li a:not(.btn){color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;padding:6px 2px}
.nav li a:not(.btn):hover{color:var(--jollof)}

/* buttons: same chunky look as the game */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-size:20px;line-height:1.1;letter-spacing:.02em;text-decoration:none;
  background:var(--gold);color:#3A2200;border:0;border-radius:16px;padding:14px 22px;min-height:48px;box-shadow:0 5px 0 var(--gold-dark);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(1px);box-shadow:0 4px 0 var(--gold-dark)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--gold-dark)}
.btn.sm{font-size:16px;padding:9px 16px;min-height:40px;border-radius:12px;box-shadow:0 3px 0 var(--gold-dark)}
.btn.wa{background:var(--wa);color:#053D1A;box-shadow:0 5px 0 var(--wa-dark)}
.btn.wa:hover{box-shadow:0 4px 0 var(--wa-dark)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-strong)}
.btn svg{width:22px;height:22px;flex:none}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0 14px}
.note{font-size:15px;color:var(--muted)}
.pill{display:inline-block;background:var(--chip);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px}

/* hero */
.hero{padding-block:28px 56px}
.hero .wrap{display:grid;gap:36px;align-items:center}
@media (min-width:860px){.hero .wrap{grid-template-columns:1.15fr .85fr}}
.hero-art{position:relative;display:grid;place-items:center;padding:12px}
.hero-art::before{content:"";position:absolute;inset:6% 4%;background:radial-gradient(circle at 40% 35%,var(--gold),#FFE9A8 55%,transparent 72%);border-radius:50%;opacity:.8;z-index:0}
.phone{position:relative;z-index:1;width:min(300px,78vw);border:8px solid var(--ink);border-radius:36px;overflow:hidden;background:#fff;box-shadow:0 24px 40px -18px rgba(42,26,12,.5)}
.phone img{display:block;width:100%}
.hero-art .phone.back{position:absolute;width:min(220px,50vw);right:-2%;bottom:-6%;transform:rotate(7deg);z-index:2;border-width:6px;border-radius:28px}

/* food strip */
.foods{background:var(--chip)}
.foods ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;list-style:none;margin:0;padding:26px 0}
.foods li{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:15px}
.plate{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--p);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 4px 0 rgba(42,26,12,.18)}
.plate svg{width:60px;height:60px}

/* sections */
section.block{padding-block:64px}
.section-head{max-width:60ch;margin-bottom:32px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card{background:var(--chip);border-radius:22px;padding:24px}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--muted)}
.card .ico{width:64px;height:64px;margin-bottom:14px;display:block}
.card .ico svg{width:100%;height:100%}

/* cities */
.cities{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.city{border-radius:22px;padding:22px 24px;color:#fff;background:var(--c);position:relative;overflow:hidden}
.city b{font-family:var(--display);font-weight:400;font-size:30px;display:block;line-height:1.1}
.city span{display:block;opacity:.95;font-size:15px;margin-top:4px}
.city i{position:absolute;right:16px;top:12px;font-style:normal;font-family:var(--display);font-size:44px;opacity:.28}
.soon{margin-top:16px;color:var(--muted);font-size:15px}

/* screenshots */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 26px;margin-inline:-20px;-webkit-overflow-scrolling:touch}
.shots:focus-visible{outline-offset:-3px}
.shots figure{margin:0;flex:0 0 min(250px,68vw);scroll-snap-align:center}
.shots .phone{width:100%;border-width:6px;border-radius:28px}
.shots figcaption{text-align:center;font-weight:800;font-size:15px;margin-top:10px}

/* share */
.share{background:var(--chip)}
.share-box{display:grid;gap:22px}
@media (min-width:760px){.share-box{grid-template-columns:1fr 1fr;align-items:center}}
.share-buttons{display:flex;flex-wrap:wrap;gap:12px}
.share-buttons .btn{flex:1 1 150px}
.share-buttons .btn.wa{flex-basis:100%;font-size:24px;padding-block:18px}
.share-preview{background:#fff;border-radius:18px;padding:18px 20px;font-style:italic;box-shadow:0 0 0 2px var(--line)}
.copied{min-height:1.6em;font-size:15px;color:var(--leaf);margin:10px 0 0}

/* faq */
.faq details{background:var(--chip);border-radius:16px;margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:800;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+" / "";font-family:var(--display);font-size:26px;line-height:1;color:var(--link)}
.faq details[open] summary::after{content:"–" / ""}
.faq details p{color:var(--muted);padding-bottom:16px;margin:0}

/* footer */
footer{background:var(--ink);color:#F6E6BE;padding-block:36px;font-size:15px}
footer a{color:#FFD97A}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer ul{display:flex;gap:8px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* simple text pages (privacy, 404) */
.doc{max-width:68ch;padding-block:36px 72px}
.doc h1{font-size:clamp(34px,6vw,52px);margin-bottom:6px}
.doc h2{font-size:26px;margin:32px 0 8px}
.doc li{margin-bottom:8px}
.doc .meta{color:var(--muted)}
.center{text-align:center;padding-block:96px}
.center .lede,.center .cta{margin-inline:auto;justify-content:center}
.tint{background:var(--chip)}
.flush-top{padding-top:0}
.tight{margin:0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* generated by scripts/site.mjs */
.plate[data-food="suya"]{--p:#C8372D}
.plate[data-food="puff"]{--p:#7B4FB8}
.plate[data-food="dodo"]{--p:#2E9E5B}
.plate[data-food="chin"]{--p:#2F7FD1}
.plate[data-food="pie"]{--p:#E98A1C}
.plate[data-food="akara"]{--p:#13A39E}
.city[data-city="lagos"]{--c:#B83A0A}
.city[data-city="calabar"]{--c:#0E6B3F}
.city[data-city="abuja"]{--c:#6B3FA0}
.city[data-city="kano"]{--c:#1F5FA8}
.city[data-city="kaduna"]{--c:#7B4520}