/* Eventful Tables — production design language.
   Modeled on OpenTable / Chope / Resy patterns: white surfaces, slim nav,
   segmented search bar, dense info cards, uniform slot pills, sticky booking card.
   Brand: ink #221A12, orange #F26F21, cream reserved for bands. Jost + Poppins. */
:root{
  --bg:#FBFAF7;
  --card:#FFFFFF;
  --cream:#F3EADB;
  --beige:#EEE2D8;
  --ink:#221A12;
  --orange:#F26F21;
  --orange-d:#D95D14;
  --red:#C41230;
  --line:#E8E1D5;
  --line-d:#D8CFC0;
  --soft:#6E6154;
  --faint:#9A8D7D;
  --radius:12px;
  --shadow:0 1px 2px rgba(34,26,18,.06);
  --shadow-lg:0 8px 28px rgba(34,26,18,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
}
h1,h2,h3,.jost{font-family:'Jost',sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:'Poppins',sans-serif;cursor:pointer;border:0;background:none;color:inherit}
select,input{font-family:'Poppins',sans-serif;color:var(--ink)}

/* draft ribbon: slim, quiet */
.draft{
  background:var(--ink);color:rgba(243,234,219,.85);
  font-size:10.5px;letter-spacing:.05em;
  text-align:center;padding:6px 14px;
  position:relative;z-index:60;
}
.draft b{color:#FFB98A;font-weight:600}

/* ---------- top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:55;
  background:#fff;border-bottom:1px solid var(--line);
}
.navin{
  max-width:1080px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;height:58px;
}
.brand{display:flex;align-items:center;gap:9px}
.brandlogo{width:30px;height:30px;border-radius:999px;flex:none}
/* Eventful Tables lockup: the Eventful wordmark carries the brand,
   TABLES sits under it as the sub-brand with its own little plate mark */
.brandlock{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px}
.brand .wordmark{font-family:'Jost',sans-serif;font-weight:700;font-size:19px;letter-spacing:.015em;color:var(--ink)}
.brand .submark{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:8px;letter-spacing:.32em;
  color:var(--orange);text-transform:uppercase;
}
.brand .submark svg{width:11px;height:11px;flex:none}
/* legacy pill tag (staff console keeps it for its STAFF badge) */
.brand .tag{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.14em;
  background:var(--orange);color:#fff;border-radius:4px;padding:3px 7px;transform:translateY(-2px);
}
.navlinks{display:flex;align-items:center;gap:6px}
.mybk{
  font-size:13px;font-weight:500;color:var(--ink);
  border-radius:8px;padding:9px 13px;background:transparent;border:0;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.mybk:hover{background:var(--bg)}
.mybk .n{background:var(--ink);color:#fff;border-radius:999px;font-size:10.5px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.mybk.rw{background:transparent;color:var(--ink);border:0}
.mybk.rw b{color:var(--orange)}

/* ---------- hero band + search ---------- */
.herob{background:var(--cream);border-bottom:1px solid var(--line)}
.heroin{max-width:1080px;margin:0 auto;padding:34px 20px 30px}
.heroin h1{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.heroin h1 em{font-style:normal;color:var(--orange)}
.heroin .sub{color:var(--soft);margin-top:6px;font-size:14px;max-width:60ch}

.searchwrap{position:relative;max-width:760px;z-index:40}
.searchbar{
  margin-top:18px;background:#fff;border:1px solid var(--line-d);border-radius:12px;
  display:flex;align-items:stretch;box-shadow:var(--shadow);overflow:hidden;
}
.sfield{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:10px 16px;border-right:1px solid var(--line);
}
.sfield label{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.sfield select,.sfield input{
  border:0;outline:none;background:transparent;font-size:16px;font-weight:500;padding:2px 0 0;
  appearance:none;-webkit-appearance:none;width:100%;
  min-height:34px;line-height:1.35;color:var(--ink);
}
.sfield.grow{flex:1.4}
.sbtn{
  flex:0 0 auto;background:var(--orange);color:#fff;font-weight:600;font-size:14px;
  padding:0 26px;display:flex;align-items:center;gap:8px;
}
.sbtn:hover{background:var(--orange-d)}
@media (max-width:640px){
  .searchbar{flex-wrap:wrap}
  .sfield{flex:1 1 40%;border-bottom:1px solid var(--line)}
  .sfield.grow{flex:1 1 100%}
  .sbtn{flex:1 1 100%;justify-content:center;padding:13px 0}
}

/* value props strip */
.vprops{border-bottom:1px solid var(--line);background:#fff}
.vpin{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;gap:34px;overflow-x:auto;scrollbar-width:none}
.vpin::-webkit-scrollbar{display:none}
.vp{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--soft);white-space:nowrap}
.vp svg{flex:none;color:var(--orange)}
.vp b{color:var(--ink);font-weight:600}

/* ---------- shell ---------- */
.shell{max-width:1080px;margin:0 auto;padding:0 20px 60px}
.lede{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:26px}
.lede h2{font-size:21px;font-weight:700}
.lede .cnt{font-size:12.5px;color:var(--faint)}

/* day scroller + filters */
.scroller{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.daychip{
  flex:0 0 auto;border:1px solid var(--line-d);background:#fff;border-radius:10px;
  padding:7px 13px;text-align:center;min-width:72px;box-shadow:var(--shadow);
}
.daychip .dow{font-size:10px;color:var(--faint);font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.daychip .dom{font-family:'Jost',sans-serif;font-weight:600;font-size:15px;margin-top:1px}
.daychip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.daychip.on .dow{color:rgba(255,255,255,.55)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:10px 0 20px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;font-size:12.5px;font-weight:500;
  border:1px solid var(--line-d);background:#fff;border-radius:999px;padding:7px 15px;color:var(--ink);
  min-height:44px;display:inline-flex;align-items:center;
}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- restaurant cards ---------- */
#list{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:880px){#list{grid-template-columns:1fr 1fr}}
#list > *{min-width:0}
.rcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .18s ease;
  display:flex;flex-direction:column;
}
.rcard:hover{box-shadow:var(--shadow-lg)}
.rcard .imgwrap{position:relative;aspect-ratio:16/8.4;overflow:hidden;background:var(--beige);display:block}
.rcard .imgwrap img.photo{width:100%;height:100%;object-fit:cover}
.logo-chip{
  position:absolute;left:12px;bottom:12px;background:#fff;border-radius:8px;
  padding:5px 9px;box-shadow:0 2px 10px rgba(34,26,18,.22);
  display:flex;align-items:center;justify-content:center;height:34px;max-width:140px;
}
.logo-chip img{max-height:24px;max-width:120px;object-fit:contain}
.logo-chip.round{border-radius:999px;width:38px;height:38px;padding:3px}
.logo-chip.round img{max-height:32px}
.maxoff{
  position:absolute;right:12px;top:12px;
  background:var(--red);color:#fff;font-weight:600;font-size:11.5px;
  border-radius:6px;padding:4px 9px;letter-spacing:.02em;
}
.rbody{padding:14px 16px 14px;display:flex;flex-direction:column;flex:1}
.rname{font-size:17.5px;font-weight:600;letter-spacing:-.005em}
.rmeta{font-size:12.5px;color:var(--soft);margin-top:2px}
.rstats{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:6px;flex-wrap:wrap}
.star{color:var(--ink);font-weight:600}
.star .sico{color:#E8A33D}
.revcnt{color:var(--faint)}
.dotsep{color:var(--line-d)}
.proof{color:var(--soft);font-size:12px;display:inline-flex;align-items:center;gap:5px}
.proof svg{color:var(--orange)}
.halal{font-size:9.5px;font-weight:600;letter-spacing:.08em;border:1px solid var(--line-d);border-radius:4px;padding:2px 6px;color:var(--soft)}

/* slot pills — uniform, OpenTable-style */
.slotrow{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none;margin-top:auto}
.slotrow::-webkit-scrollbar{display:none}
.slot{
  flex:0 0 auto;border-radius:8px;text-align:center;padding:7px 0 6px;
  border:1px solid var(--line-d);background:#fff;width:86px;
}
.slot .t{font-family:'Jost',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.01em;line-height:1.25}
.slot .p{font-size:11px;font-weight:600;color:var(--faint);line-height:1.3}
.slot .l{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.85);line-height:1.35}
.slot.hot,.slot.mid{background:var(--orange);border-color:var(--orange);color:#fff}
.slot.hot:hover,.slot.mid:hover{background:var(--orange-d);border-color:var(--orange-d)}
.slot.hot .p,.slot.mid .p{color:#fff}
.slot.std .p{color:var(--faint);font-weight:500}
.slot.std:hover{border-color:var(--ink)}
.slot.full{opacity:.55;background:var(--bg)}
.slot.full .p{text-decoration:line-through}
.slot.full .l{color:var(--faint)}
.slot.more{border-style:dashed;color:var(--soft);background:transparent}
.slot.sel{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- how it works ---------- */
.how{margin:44px 0 8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.how h2{font-size:19px;font-weight:700}
.how ol{list-style:none;margin-top:16px;display:grid;gap:14px}
@media (min-width:880px){.how ol{grid-template-columns:1fr 1fr;gap:18px 34px}}
.how li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--soft)}
.how li b{color:var(--ink)}
.hnum{
  flex:0 0 24px;height:24px;border-radius:999px;background:var(--cream);color:var(--ink);
  font-family:'Jost',sans-serif;font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;border:1px solid var(--line-d);
}
.how .fine{margin-top:16px;font-size:11.5px;color:var(--faint)}

/* ---------- footer ---------- */
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--soft)}
.foot .fbrand{font-family:'Jost',sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.foot p{margin-top:6px}
.bigfoot{background:#fff;border-top:1px solid var(--line);margin-top:54px}
.bfin{max-width:1080px;margin:0 auto;padding:36px 20px 20px}
.bfcols{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:720px){.bfcols{grid-template-columns:1.4fr 1fr 1fr}}
.bfcols h4{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:10px}
.bfcols ul{list-style:none}
.bfcols li{margin-top:7px;font-size:13px}
.bfcols a:hover{color:var(--orange)}
.bfbrand p{color:var(--soft);font-size:12.5px;margin-top:8px}
.legal{border-top:1px solid var(--line);margin-top:28px;padding:16px 0 0;font-size:11px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}

/* ---------- detail page ---------- */
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:18px 0 12px;color:var(--soft)}
.back:hover{color:var(--ink)}
.dlayout{display:grid;grid-template-columns:1fr;gap:0 36px;align-items:start}
/* grid items must be allowed to shrink below their content (the day scroller
   otherwise forces every column to ~582px and clips the whole page on phones) */
.dlayout > div, .dlayout > aside{min-width:0}
@media (min-width:1000px){
  .dlayout{grid-template-columns:minmax(0,1fr) 360px}
  .dlayout > .back{grid-column:1 / -1;grid-row:1}
  .dtop{grid-column:1;grid-row:2}
  .drest{grid-column:1;grid-row:3}
  .dside{grid-column:2;grid-row:2 / span 2;position:sticky;top:74px;align-self:start}
}
.bookcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:8px}
.bookcard h3{font-size:17px;font-weight:700;margin-bottom:2px}
.bookcard .bchint{font-size:12px;color:var(--soft)}
.bookcard .scroller{padding-top:12px}
.bookcard .bcbook{
  width:100%;margin-top:14px;background:var(--orange);color:#fff;font-weight:600;font-size:14.5px;
  border-radius:9px;padding:13px;
}
.bookcard .bcbook:hover{background:var(--orange-d)}
.bookcard .bcbook:disabled{background:var(--line-d);color:#fff}
.bookcard .bcsum{font-size:12px;color:var(--soft);margin-top:9px;text-align:center;min-height:17px}

.dhero{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--beige);border:1px solid var(--line)}
.dhero img.photo{width:100%;height:100%;object-fit:cover}
.dtitle{margin-top:18px}
.dtitle h1{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.chip{font-size:11.5px;font-weight:500;border:1px solid var(--line-d);background:#fff;border-radius:6px;padding:4px 10px;color:var(--soft)}
.chip.acc{background:var(--ink);border-color:var(--ink);color:#fff}
.dstats{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:10px;flex-wrap:wrap}
.sect{margin-top:30px}
.sect h2{font-size:18px;font-weight:700;margin-bottom:10px}
.sect p.body{color:var(--soft);font-size:13.5px}
.sect p.body + p.body{margin-top:8px}

.offnote{
  margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;font-size:12.5px;color:var(--soft);display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow);
}
.offnote .pct{
  flex:0 0 auto;background:var(--red);color:#fff;font-family:'Jost',sans-serif;font-weight:700;
  border-radius:7px;padding:5px 9px;font-size:13.5px;
}

/* dishes */
.dishes{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dish{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:13px}
.dish + .dish{border-top:1px solid var(--line)}
.dish .dp{font-weight:600;white-space:nowrap}
.samplebadge{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-top:8px;display:block}

/* Eventful Coin icon */
.coin-ico{height:1.05em;width:auto;vertical-align:-0.15em;display:inline-block}
.coin-btn{vertical-align:-0.18em}

/* photo gallery + actual-menu strips */
.hstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hstrip::-webkit-scrollbar{display:none}
.gshot{flex:0 0 66%;scroll-snap-align:start;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:16/10;background:var(--beige);border:1px solid var(--line)}
@media (min-width:880px){.gshot{flex-basis:44%}}
.gshot img{width:100%;height:100%;object-fit:cover}
.gshot .gcap{position:absolute;left:10px;bottom:10px;background:rgba(34,26,18,.72);color:#fff;font-size:10.5px;padding:4px 9px;border-radius:5px}
.mpage{flex:0 0 40%;scroll-snap-align:start;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;padding:0;box-shadow:var(--shadow)}
@media (min-width:880px){.mpage{flex-basis:24%}}
.mpage img{width:100%;display:block}
.mpage .mpn{font-size:10px;color:var(--faint);text-align:center;padding:6px 0;font-weight:500;display:block}

/* fullscreen menu lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(24,17,12,.97);display:none;flex-direction:column}
.lb.open{display:flex}
.lbtop{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#fff;flex:0 0 auto}
.lbtop .lbt{font-family:'Jost',sans-serif;font-weight:600;font-size:15px}
.lbcount{color:rgba(255,255,255,.6);font-size:12px;margin-left:auto;margin-right:14px}
.lbclose{color:#fff;font-size:26px;line-height:1;padding:2px 8px}
.lbtrack{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lbtrack::-webkit-scrollbar{display:none}
.lbpage{flex:0 0 100%;scroll-snap-align:center;overflow-y:auto;padding:0 10px 24px}
.lbpage img{width:100%;max-width:620px;margin:0 auto;display:block;border-radius:8px}

/* full menu accordions */
.menucat{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.menucat summary{
  list-style:none;cursor:pointer;padding:13px 14px;
  font-family:'Jost',sans-serif;font-weight:600;font-size:14.5px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.menucat summary:hover{background:var(--bg)}
.menucat summary::-webkit-details-marker{display:none}
.menucat summary .mtog{color:var(--orange);font-size:18px;font-weight:500;line-height:1}
.menucat[open] summary .mtog{transform:rotate(45deg)}
.menucat summary .mcount{font-family:'Poppins',sans-serif;font-size:11px;color:var(--faint);font-weight:500;margin-left:auto}
.menucat .mitems{padding:0 14px 12px}
.mitem{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:7px 0;border-top:1px dashed var(--line)}
.mitem .mp{white-space:nowrap;font-weight:600;color:var(--ink)}
.mitem .mp.buf{color:var(--faint);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em}

/* reviews */
.rev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}
.revhead{display:flex;align-items:center;gap:11px}
.avatar{
  width:36px;height:36px;border-radius:999px;background:var(--cream);color:var(--ink);
  font-family:'Jost',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line-d);flex:none;
}
.revwho{font-size:13px;font-weight:600}
.revmeta{font-size:11.5px;color:var(--faint)}
.revtxt{font-size:13px;color:var(--soft);margin-top:9px}
.revtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.revtag{font-size:10.5px;font-weight:500;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:3px 8px;color:var(--soft)}

/* slot grid (booking card + mobile) */
.slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slotgrid .slot{width:auto;min-width:0}

/* pax */
.pax{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;justify-content:space-between;margin-top:12px}
.pax .lbl{font-size:13px;font-weight:500}
.stepper{display:flex;align-items:center;gap:14px}
.stepbtn{
  width:30px;height:30px;border-radius:999px;border:1px solid var(--line-d);
  font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;background:#fff;
}
.stepbtn:hover{border-color:var(--ink)}
.stepbtn:disabled{opacity:.3}
.paxn{font-family:'Jost',sans-serif;font-weight:700;font-size:16px;min-width:20px;text-align:center}

/* address */
.addr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:13px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.copybtn{font-size:12px;font-weight:600;color:var(--orange);flex:0 0 auto}
.copybtn:hover{color:var(--orange-d)}

/* terms */
.terms{font-size:12px;color:var(--soft)}
.terms li{margin-left:18px;margin-top:5px}

/* sticky book bar (mobile / narrow) */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(34,26,18,.06);
}
@media (min-width:1000px){.bookbar{display:none}}
.bookbar .inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px}
.bsum{flex:1;min-width:0}
.bsum .l1{font-size:11px;color:var(--faint)}
.bsum .l2{font-family:'Jost',sans-serif;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookbtn{
  flex:0 0 auto;background:var(--orange);color:#fff;font-weight:600;font-size:14px;
  border-radius:9px;padding:12px 22px;
}
.bookbtn:hover{background:var(--orange-d)}
.bookbtn:disabled{background:var(--line-d)}

/* sheet */
.sheetwrap{position:fixed;inset:0;z-index:70;display:none}
.sheetwrap.open{display:block}
.scrim{position:absolute;inset:0;background:rgba(34,26,18,.5);opacity:0;transition:opacity .22s ease}
.sheetwrap.in .scrim{opacity:1}
.sheet{
  position:absolute;left:0;right:0;bottom:0;background:#fff;
  border-radius:16px 16px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;max-height:88vh;overflow-y:auto;
  transform:translateY(12%);opacity:.6;transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}
.sheetwrap.in .sheet{transform:translateY(0);opacity:1}
@media (min-width:720px){
  .sheet{
    bottom:auto;top:50%;border-radius:16px;box-shadow:var(--shadow-lg);
    transform:translateY(calc(-50% + 12px));
  }
  .sheetwrap.in .sheet{transform:translateY(-50%)}
}
.sheet h3{font-size:19px;font-weight:700}
.ssum{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-top:14px;font-size:13px}
.ssum .row{display:flex;justify-content:space-between;padding:3px 0}
.ssum .row .v{font-weight:600}
.ssum .row .v.off{color:var(--red)}
.field{margin-top:14px}
.field label{font-size:12px;font-weight:500;color:var(--soft);display:block;margin-bottom:5px}
.field input{
  width:100%;border:1px solid var(--line-d);border-radius:9px;background:#fff;
  font-size:16px;padding:11px 13px;color:var(--ink);outline:none;
}
.field input:focus{border-color:var(--orange)}
.confirmbtn{
  width:100%;margin-top:18px;background:var(--orange);color:#fff;font-weight:600;font-size:14.5px;
  border-radius:9px;padding:14px;
}
.confirmbtn:hover{background:var(--orange-d)}
.sheet .demonote{text-align:center;font-size:11.5px;color:var(--faint);margin-top:10px}
.closesheet{position:absolute;right:18px;top:16px;font-size:22px;color:var(--faint);line-height:1}

/* confirmation / ink cards */
.conf{
  background:var(--ink);color:var(--cream);border-radius:var(--radius);
  padding:24px 20px;margin-top:16px;
}
.conf .clabel{font-size:10.5px;letter-spacing:.14em;font-weight:600;color:#FFB98A;text-transform:uppercase}
.conf .code{font-family:'Jost',sans-serif;font-weight:700;font-size:32px;letter-spacing:.06em;margin-top:6px}
.conf .crows{margin-top:16px;border-top:1px solid rgba(243,234,219,.16);padding-top:14px;font-size:13px;display:grid;gap:7px}
.conf .crow{display:flex;justify-content:space-between;gap:10px}
.conf .crow .k{color:rgba(243,234,219,.55)}
.conf .crow .v{font-weight:600;text-align:right}
.conf .v.off{color:#FFB98A}
.conf .demonote{margin-top:16px;font-size:11.5px;color:rgba(243,234,219,.55)}

/* empty state */
.empty{padding:40px 0;text-align:center;color:var(--faint);font-size:13.5px}

/* ---------- cuisine category tiles ---------- */
.cathead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:26px}
.cathead h2{font-size:17px;font-weight:700}
.cathead .cnt{font-size:12px;color:var(--faint)}
.cats{display:flex;gap:14px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;width:78px;text-align:center;background:none;padding:0}
.cat .ci{
  width:62px;height:62px;margin:0 auto;border-radius:999px;background:#fff;
  border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;
  font-size:29px;box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease;
}
.cat:hover .ci{transform:translateY(-3px)}
.cat.on .ci{border-color:var(--orange);background:#FFF3EA;box-shadow:0 0 0 2px var(--orange)}
.cat .cl{font-size:11px;font-weight:600;margin-top:7px;color:var(--soft);line-height:1.25}
.cat.on .cl{color:var(--orange-d)}
.cat.picks .ci{background:var(--ink);border-color:var(--ink)}
.cat.picks.on .ci{box-shadow:0 0 0 2px var(--orange)}
.catempty{
  grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 24px;text-align:center;box-shadow:var(--shadow);
}
.catempty .ce-e{font-size:44px}
.catempty h3{font-size:20px;font-weight:700;margin-top:10px}
.catempty p{font-size:13px;color:var(--soft);max-width:44ch;margin:8px auto 0}
.catempty .ce-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.catempty .ce-alt{font-size:13.5px;font-weight:600;color:var(--orange);padding:13px 10px}
.pickbadge{
  position:absolute;left:12px;top:12px;background:var(--ink);color:#FFB98A;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;border-radius:6px;padding:4px 9px;
}

/* ---------- collections row ---------- */
.collhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:26px}
.collhead h2{font-size:17px;font-weight:700}
.collhead .cnt{font-size:12px;color:var(--faint)}
.colls{display:flex;gap:10px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.colls::-webkit-scrollbar{display:none}
.coll{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;text-align:left;
  background:#fff;border:1px solid var(--line-d);border-radius:12px;
  padding:11px 16px 11px 12px;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease;
}
.coll:hover{transform:translateY(-2px)}
.coll.on{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.coll .cgl{
  width:40px;height:40px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.coll .cll{font-size:13px;font-weight:600;white-space:nowrap;line-height:1.2}
.coll .cls{font-size:10.5px;color:var(--faint);white-space:nowrap;margin-top:1px}
.coll.picks{background:var(--ink);border-color:var(--ink)}
.coll.picks .cll{color:#fff}
.coll.picks .cls{color:rgba(243,234,219,.6)}
.coll.picks.on{box-shadow:0 0 0 2px var(--orange)}

/* cuisine tiles: real dish photography in the circles */
.cat .ci{overflow:hidden;padding:0}
.cat .ci img{width:100%;height:100%;object-fit:cover;border-radius:999px}
.cat .ci svg{width:32px;height:32px}

/* ---------- quiz banner ---------- */
.quizcta{
  margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);
}
.qz-l{flex:1;min-width:0}
.qz-tag{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--orange);text-transform:uppercase}
.quizcta .qc-h{font-size:20px;font-weight:700;margin-top:4px;color:var(--ink)}
.quizcta .qc-s{font-size:12.5px;color:var(--soft);margin-top:4px;max-width:52ch}
.qc-btn{
  display:inline-block;margin-top:12px;background:var(--orange);color:#fff;
  font-weight:600;font-size:13.5px;border-radius:9px;padding:11px 22px;
}
.qc-btn:hover{background:var(--orange-d)}
.qz-r{display:flex;flex:none;padding-right:8px}
.qz-r img{
  width:74px;height:74px;border-radius:999px;object-fit:cover;
  border:3px solid #fff;box-shadow:var(--shadow-lg);
}
.qz-r img + img{margin-left:-20px}
@media (max-width:560px){.qz-r img{width:56px;height:56px}.qz-r img + img{margin-left:-16px}}

/* ---------- cancel-booking confirm ---------- */
.cxconfirm{margin-top:10px;background:#FDF1F1;border:1px solid #F0CFCF;border-radius:10px;padding:12px 14px}
.cxconfirm .cxq{font-size:12.5px;color:var(--ink);font-weight:500}
.cxconfirm .cxrow{display:flex;gap:8px;margin-top:10px}
.cxconfirm .cxyes{flex:1;background:var(--red);color:#fff;font-weight:600;font-size:12.5px;border-radius:8px;padding:10px}
.cxconfirm .cxyes:hover{background:#A80E28}
.cxconfirm .cxno{flex:1;background:#fff;border:1px solid var(--line-d);color:var(--ink);font-weight:600;font-size:12.5px;border-radius:8px;padding:10px}
.cxconfirm .cxno:hover{border-color:var(--ink)}

/* ---------- makan quiz page ---------- */
.qzwrap{max-width:560px;margin:0 auto;padding:0 20px 70px}
.qzbar{height:5px;background:var(--line);border-radius:999px;margin-top:22px;overflow:hidden}
.qzbar .fill{height:100%;background:var(--orange);border-radius:999px;width:0;transition:width .35s cubic-bezier(.5,0,.2,1)}
/* segmented variant (personality quiz): one bar per question, so you can see
   exactly which of the eight you are standing on */
.qzseg{
  display:flex;align-items:center;gap:5px;height:26px;margin-top:16px;
  background:none;border-radius:0;overflow:visible;
}
.qzseg i{
  position:relative;flex:1;height:7px;border-radius:999px;background:var(--line-d);
  transition:height .28s cubic-bezier(.3,.8,.3,1),background .28s;
}
.qzseg i b{
  display:block;height:100%;width:0;border-radius:999px;background:var(--orange);
  transition:width .45s cubic-bezier(.5,0,.2,1);
}
.qzseg i u{
  position:absolute;left:0;right:0;top:13px;text-align:center;text-decoration:none;
  font-family:'Jost',sans-serif;font-weight:700;font-size:10px;color:var(--faint);
  transition:color .28s;
}
.qzseg i.done b{width:100%}
.qzseg i.done u{color:var(--orange);opacity:.7}
.qzseg i.now{height:11px;box-shadow:0 3px 10px rgba(242,111,33,.45)}
.qzseg i.now b{width:100%;animation:segpop .45s cubic-bezier(.3,.9,.3,1) both}
.qzseg i.now u{top:16px;color:var(--orange);font-size:11.5px}
@keyframes segpop{from{width:0}to{width:100%}}
@media (max-width:400px){
  .qzseg{gap:4px}
  .qzseg i u{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .qzseg i,.qzseg i b,.qzseg i u{transition:none}
  .qzseg i.now b{animation:none}
}
.qzstep{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-top:14px;text-align:center}
.qzcard{text-align:center;margin-top:10px;animation:qslide .38s cubic-bezier(.3,.8,.3,1) both}
@keyframes qslide{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:translateX(0)}}
.qzemoji{
  width:130px;height:130px;margin:22px auto 0;border-radius:999px;background:#fff;
  border:1px solid var(--line-d);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;font-size:62px;
}
.qzq{font-family:'Jost',sans-serif;font-size:27px;font-weight:700;line-height:1.2;margin-top:22px;letter-spacing:-.01em}
.qzhint{font-size:12.5px;color:var(--faint);margin-top:6px}
.qzans{display:grid;gap:12px;margin-top:26px}
@media (min-width:480px){.qzans{grid-template-columns:1fr 1fr}}
.qzbtn{
  background:#fff;border:1.5px solid var(--line-d);border-radius:14px;padding:18px 14px;
  font-family:'Jost',sans-serif;font-weight:600;font-size:17px;box-shadow:var(--shadow);
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.qzbtn:hover{border-color:var(--orange);background:#FFF7F1;transform:translateY(-2px)}
.qzbtn:active{transform:scale(.96)}
/* per-question graphic animations */
.anim-pulse{animation:apulse 1.6s ease-in-out infinite}
@keyframes apulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.anim-bounce{animation:abounce 1.1s cubic-bezier(.3,0,.2,1) infinite}
@keyframes abounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}65%{transform:translateY(2px)}}
.anim-shake{animation:ashake .55s ease-in-out infinite}
@keyframes ashake{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.anim-float{animation:afloat 2.4s ease-in-out infinite}
@keyframes afloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.anim-tada{animation:atada 1.7s ease infinite}
@keyframes atada{0%,100%{transform:scale(1) rotate(0)}12%{transform:scale(.92) rotate(-4deg)}28%{transform:scale(1.12) rotate(4deg)}44%{transform:scale(1.08) rotate(-4deg)}60%{transform:scale(1.1) rotate(3deg)}76%{transform:scale(1) rotate(0)}}
.anim-wobble{animation:awobble 1.9s ease-in-out infinite}
@keyframes awobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) translateX(-3px)}75%{transform:rotate(9deg) translateX(3px)}}
.anim-spin{animation:aspin 3.2s linear infinite}
@keyframes aspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* thinking screen */
.qzthink{text-align:center;padding:70px 0}
.qzthink .qzemoji{animation:aspin 1.4s linear infinite;font-size:54px}
.qzthink p{margin-top:20px;font-size:14px;color:var(--soft);font-weight:500}
/* results */
.qzres{animation:qslide .4s ease both}
.qzres .lede{padding-top:22px}
.qreslist{display:grid;gap:12px;margin-top:16px}
.qrescard{
  display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;box-shadow:var(--shadow);text-align:left;
}
.qrescard .qrank{
  font-family:'Jost',sans-serif;font-weight:700;font-size:16px;color:var(--faint);
  flex:0 0 26px;text-align:center;
}
.qrescard.partner .qrank{color:var(--orange)}
.qrescard .qre{
  width:52px;height:52px;border-radius:12px;background:var(--cream);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;overflow:hidden;
}
.qrescard .qre img{width:100%;height:100%;object-fit:cover}
.qrescard .qbody{flex:1;min-width:0}
.qrescard .qname{font-family:'Jost',sans-serif;font-weight:600;font-size:15.5px;line-height:1.2}
.qrescard .qmeta{font-size:11.5px;color:var(--soft);margin-top:2px}
.qrescard .qwhy{font-size:11px;color:var(--orange-d);font-weight:500;margin-top:3px}
.qrescard .qgo{
  flex:0 0 auto;background:var(--orange);color:#fff;font-weight:600;font-size:12px;
  border-radius:8px;padding:9px 13px;white-space:nowrap;
}
.qrescard .qgo:hover{background:var(--orange-d)}
.qrescard .qsoon{
  flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--faint);
  border:1px dashed var(--line-d);border-radius:7px;padding:7px 9px;white-space:nowrap;text-transform:uppercase;
}

/* not-bookable spots: honest tag + a Google hand-off that still looks tappable */
.qext{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.qext i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.qgoogle{display:inline-block;border:1.5px solid var(--line-d);border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s}
.qgoogle:hover{border-color:var(--orange);color:var(--orange)}
/* a bordered button and a bare text link on one flex row read as broken.
   Stack them, centre them, and give the link an underline so it looks like
   something you can tap. */
.qzretake{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px}
.qzretake .qc-btn{min-width:230px;text-align:center}
.qzretake .alt{font-size:13.5px;font-weight:600;color:var(--soft);text-decoration:underline;text-underline-offset:3px;padding:2px}
.qzretake .alt:hover{color:var(--ink)}

/* Makan Match hand-off: a real card with a real button, not a ghost link */
.mmcard{
  margin-top:22px;padding:22px 20px 24px;text-align:center;border-radius:20px;
  background:linear-gradient(180deg,#FFF7EE,#FFEEDD);border:1.5px solid #F6D8BD;
}
.mmrow{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.mmrow span{width:46px;height:46px;background:#fff;border:1.5px solid #F1DCC4;border-radius:12px;padding:5px}
.mmrow span:nth-child(odd){transform:rotate(-5deg)}
.mmrow span:nth-child(even){transform:rotate(5deg)}
.mmrow svg{width:100%;height:100%;display:block}
.mmk{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--orange)}
.mmcard h3{font-family:'Jost',sans-serif;font-size:25px;font-weight:700;line-height:1.15;margin-top:6px;color:var(--ink)}
.mmcard p{font-size:14px;color:var(--soft);margin:8px auto 0;max-width:34ch;line-height:1.45}
.mmbtn{display:inline-block;margin-top:16px;text-decoration:none;padding:15px 30px;font-size:16px}
@media (min-width:620px){.mmcard h3{font-size:28px}.mmrow span{width:54px;height:54px}}

/* rewards */
.rwcard{
  display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-top:9px;box-shadow:var(--shadow);
}
.rwcard.tbc{opacity:.6}
.rwclaim{
  flex:none;background:var(--orange);color:#fff;font-weight:600;font-size:12.5px;
  border-radius:8px;padding:9px 14px;white-space:nowrap;
}
.rwclaim:hover{background:var(--orange-d)}
.rwclaim.off{background:var(--bg);color:var(--faint);border:1px solid var(--line)}
.rwled{
  display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--soft);
  padding:8px 2px;border-bottom:1px dashed var(--line);
}
.rwcard .logo-chip{overflow:hidden;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;position:static}
.rwcard .logo-chip img{width:82%;height:82%;object-fit:contain}

/* my bookings cards */
.bkcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px;box-shadow:var(--shadow)}
.bkimg{width:100%;height:150px;object-fit:cover;display:block}
.bkbody{padding:16px}
.bkname{font-size:18px;font-weight:600;line-height:1.2}
.bkaddr{font-size:12px;color:var(--faint);margin-top:4px}
.rwphoto{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none}
.bkcard .crows{display:grid;gap:7px;font-size:13px}
.bkcard .crow{display:flex;justify-content:space-between;gap:10px}
.bkcard .crow .v{font-weight:600;text-align:right}

/* legacy hero/hdr kept for inner pages (ticket, checkin, partner) */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 0 6px}
.hero{padding:22px 0 8px}
.hero h1{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{margin-top:10px;color:var(--soft);max-width:46ch}

/* ---------- Google reviews + about + maps (restaurant page v2 flow) ---------- */
.gmark svg{vertical-align:-2px}
.gmark.big svg{width:26px;height:26px}
.growhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.growtitle{font-family:'Jost',sans-serif;font-weight:700;font-size:18px}
.growsub{font-size:12.5px;color:var(--soft)}
.gsrc{
  margin-left:auto;flex:none;font-size:10px;font-weight:600;color:var(--faint);
  display:inline-flex;align-items:center;gap:5px;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap;
}
.gsrc svg{width:11px;height:11px}
.gseeall{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:1px solid var(--line-d);border-radius:10px;
  padding:13px;font-weight:600;font-size:13.5px;margin-top:4px;
}
.gseeall:hover{border-color:var(--ink)}
.dstats a.revcnt:hover{color:var(--orange)}

.aboutcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.abrow{display:flex;gap:14px;padding:10px 14px;font-size:13px;border-top:1px solid var(--line)}
.abrow:first-child{border-top:0}
.abk{flex:0 0 88px;color:var(--faint)}
.abv{font-weight:500;min-width:0}
.abv.link{color:var(--orange);font-weight:600}
.mapembed{
  display:block;position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);margin-top:12px;aspect-ratio:16/9;background:var(--beige);
}
.mapembed iframe{width:100%;height:100%;border:0;pointer-events:none}
.mapopen{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line-d);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-lg);white-space:nowrap;
}
.mapembed:hover .mapopen{border-color:var(--ink)}

.decide2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
@media (max-width:560px){.decide2{grid-template-columns:1fr}}
.dbtn{border-radius:12px;padding:16px;text-align:left;display:block;cursor:pointer}
.dbtn .dbig{display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:15.5px}
.dbtn .dsml{display:block;font-size:11.5px;margin-top:3px;opacity:.75}
.dbtn.quiz{background:var(--ink);color:var(--cream)}
.dbtn.quiz .dbig{color:#fff}
.dbtn.sim{background:#fff;border:1px solid var(--line-d);color:var(--ink)}
.dbtn.sim:hover{border-color:var(--ink)}
.simcard{
  display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:10px;box-shadow:var(--shadow);padding-right:12px;
}
.simcard img{width:96px;height:76px;object-fit:cover;flex:none}
.simbody{min-width:0;padding:8px 0}
.simname{display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:14.5px}
.simmeta{display:block;font-size:11px;color:var(--soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simmeta svg{width:10px;height:10px}

/* ---------- signup promo popup ----------
   Modeled on the highest-converting ecommerce patterns: centered modal on a
   dimmed scrim (reads as foreground, not chrome), one objective, email captured
   inline in a single step, benefit-worded CTA, visible decline, big close hit area. */
.promo{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;padding:18px}
.promo.show{display:flex}
.promoscrim{position:absolute;inset:0;background:rgba(24,17,11,.62);backdrop-filter:blur(2px);animation:pfade .25s ease both}
@keyframes pfade{from{opacity:0}to{opacity:1}}
@keyframes prise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.promocard{
  position:relative;width:100%;max-width:400px;background:#fff;border-radius:18px;
  overflow:hidden;box-shadow:0 24px 70px rgba(24,17,11,.42);
  animation:prise .3s cubic-bezier(.2,.9,.3,1) both;max-height:92vh;overflow-y:auto;
}
.promopic{display:grid;grid-template-columns:repeat(4,1fr);height:112px}
.promopic img{width:100%;height:100%;object-fit:cover}
.promobody{padding:20px 22px 18px;text-align:center}
.pkicker{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);
  background:#FFF1E6;border-radius:999px;padding:5px 12px;
}
.promo .ph{font-family:'Jost',sans-serif;font-size:25px;font-weight:700;line-height:1.15;margin-top:12px;letter-spacing:-.01em}
.promo .ph em{font-style:normal;color:var(--orange)}
.promo .ps{font-size:13px;color:var(--soft);margin-top:8px;line-height:1.5}
.promo .ps b{color:var(--ink)}
.pform{display:grid;gap:9px;margin-top:16px}
.pform input{
  width:100%;border:1.5px solid var(--line-d);border-radius:11px;background:#fff;
  font-size:16px;padding:14px 14px;color:var(--ink);outline:none;text-align:center;
}
.pform input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,111,33,.16)}
.pform input.bad{border-color:var(--red)}
.promo .pbtn{
  width:100%;background:var(--orange);color:#fff;font-weight:700;font-size:16px;
  border-radius:11px;padding:15px;box-shadow:0 6px 18px rgba(242,111,33,.32);
  transition:background .14s ease,transform .1s ease;
}
.promo .pbtn:hover{background:var(--orange-d)}
.promo .pbtn:active{transform:scale(.985)}
.plimit{
  display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:#8A5A00;
  background:linear-gradient(180deg,#FFF4D8,#FBE7B8);border:1px solid #EDD79E;
  border-radius:999px;padding:5px 13px;letter-spacing:.01em;
}
.plimit b{color:#6B4400}
.pmsg{font-size:11px;color:var(--faint);margin-top:10px;line-height:1.45;min-height:16px}
.pmsg.err{color:var(--red);font-weight:600}
.pmsg.ok{color:#1E7C46;font-weight:600}
.pskip{
  display:block;width:100%;margin-top:12px;padding:8px;
  font-size:12px;color:var(--faint);text-decoration:underline;text-underline-offset:3px;
}
.pskip:hover{color:var(--soft)}
.promo .pclose{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:19px;line-height:1;
  background:rgba(24,17,11,.5);border-radius:999px;backdrop-filter:blur(4px);
}
.promo .pclose:hover{background:rgba(24,17,11,.75)}
@media (max-width:420px){
  .promocard{max-width:100%}
  .promo .ph{font-size:23px}
  .promopic{height:96px}
}

/* ---------- mobile hardening ---------- */
@media (max-width:640px){
  .heroin{padding:24px 16px 22px}
  .heroin h1{font-size:24px}
  .shell{padding-left:14px;padding-right:14px}
  .navin{padding:0 14px}
  .dtitle h1{font-size:22px}
  .dstats{font-size:12px;gap:6px}
  .bookcard{padding:14px}
  .slotgrid{grid-template-columns:repeat(3,1fr)}
  .rcard .imgwrap{aspect-ratio:16/9}
  .lede h2{font-size:18px}
  .counts{grid-template-columns:repeat(4,1fr)}
  .vpin{gap:22px}
  .bfin{padding:28px 16px 16px}
}
/* never allow sideways page scroll */
html,body{overflow-x:hidden;max-width:100%}
img,iframe,svg{max-width:100%}

/* ---------- intuitiveness pass (Jun Kiat mobile feedback) ---------- */
/* chosen timing must be unmistakable */
.slot.sel{background:var(--ink);border-color:var(--ink);color:#fff;outline:none}
.slot.sel .t{color:#fff}
.slot.sel .p,.slot.sel .l{color:rgba(255,255,255,.8)}
/* the guide flash when someone taps Book before picking a timing */
@keyframes gridflash{0%,100%{box-shadow:0 0 0 0 rgba(242,111,33,0)}35%{box-shadow:0 0 0 3px var(--orange)}}
.slotgrid.flash .slot:not(.full){animation:gridflash .9s ease 1}
/* bar button in guide mode reads different from the commit action */
.bookbtn.hint{background:var(--ink)}
.bookbtn.hint:hover{background:#000}
/* every tap gets physical feedback */
.slot:active,.daychip:active,.fchip:active,.coll:active,.cat:active,
.bookbtn:active,.confirmbtn:active,.bcbook:active,.mybk:active,
.qc-btn:active,.dbtn:active,.rwclaim:active,.gseeall:active,.sbtn:active{
  transform:scale(.97);transition:transform .06s ease;
}
/* photo strips glide instead of snapping hard */
.hstrip{scroll-snap-type:x proximity}

/* ---------- DEAL COUPON CHIPS: the discount is the hero ---------- */
/* deal slots become punched tickets: gradient, notches, big bold % */
.slot.hot,.slot.mid{
  background:linear-gradient(140deg,#FF9A4D 0%,#F26F21 52%,#E1461F 100%);
  border:0;color:#fff;position:relative;
  box-shadow:0 3px 10px rgba(226,88,27,.32);
  padding-top:8px;padding-bottom:7px;
}
.slot.hot::before,.slot.mid::before,
.slot.hot::after,.slot.mid::after{
  content:'';position:absolute;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:999px;background:var(--card);
}
.slot.hot::before,.slot.mid::before{left:-5px}
.slot.hot::after,.slot.mid::after{right:-5px}
.slot.hot .t,.slot.mid .t{font-size:12px;font-weight:600;opacity:.92}
.slot.hot .p,.slot.mid .p{
  font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.slot.hot .l,.slot.mid .l{
  display:inline-block;background:rgba(34,26,18,.28);border-radius:5px;
  padding:1px 7px;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:#FFE8CF;text-transform:uppercase;
}
/* selected still wins: ink beats the gradient */
.slot.sel{background:var(--ink) !important;box-shadow:none}
.slot.sel::before,.slot.sel::after{background:var(--card)}
/* full deals: greyed ticket so scarcity is felt */
.slot.full .p{text-decoration:none}
/* the card badge becomes a proper deal tag */
.maxoff{
  background:linear-gradient(135deg,#FF7A2F,#C41230);
  font-size:12px;font-weight:800;letter-spacing:.02em;
  padding:7px 13px;border-radius:8px;transform:rotate(-2deg);
  box-shadow:0 5px 14px rgba(196,18,48,.4);
}
/* deal % pops inside the sticky bar summary too */
.bsum .l2 b{color:var(--orange)}


/* ---------- nav fits on phones ----------
   Coins balance must always be visible top-right; the brand pill and the word
   "My" are the first things to go, never the balance. */
.mybk.rw{font-weight:600}
.mybk.rw b{color:var(--ink);font-weight:700}
@media (max-width:560px){
  .navin{padding:0 14px;gap:6px}
  .brand .tag{display:none}
  .brand{gap:7px}
  .brand .wordmark{font-size:16.5px}
  .brand .submark{font-size:7px;letter-spacing:.28em}
  .brand .submark svg{width:10px;height:10px}
  .brandlogo{width:26px;height:26px}
  .navlinks{gap:2px;flex:none}
  .mybk{padding:8px 9px;font-size:12.5px;gap:5px}
  .mybk-long{display:none}
  .mybk .n{min-width:16px;height:16px;font-size:10px}
}
@media (max-width:360px){
  .brand .wordmark{display:none}
  .brand .brandlock{display:none}
}

/* ---------- quiz v2: branded illustrated option cards ---------- */
.qart-hero{width:150px;margin:26px auto 0}
.qart-hero svg{width:100%;height:auto;display:block}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media (max-width:420px){.qopts{gap:10px}}
.qopt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:2px solid var(--line-d);border-radius:16px;
  padding:18px 12px 16px;box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.3,.8,.4,1.4),border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.qopt:hover{border-color:var(--orange);background:#FFF9F4;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.qopt:active{transform:scale(.96)}
.qopt .qart{width:112px;max-width:80%;pointer-events:none}
.qopt .qart svg{width:100%;height:auto;display:block}
.qopt .qlab{font-family:'Jost',sans-serif;font-weight:600;font-size:15.5px;line-height:1.25;margin-top:8px}
.qopt .qtick{
  position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;
  background:var(--orange);display:flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .22s cubic-bezier(.2,1.4,.4,1);
}
.qopt.sel{border-color:var(--orange);background:#FFF3E9;transform:translateY(-3px) scale(1.02)}
.qopt.sel .qtick{transform:scale(1)}
.qopt.sel .qart{animation:qcheer .4s ease}
@keyframes qcheer{30%{transform:scale(1.08) rotate(-2deg)}70%{transform:scale(.98) rotate(1deg)}}
.qwink{width:30px;height:30px;display:inline-block;vertical-align:-6px;margin-left:2px}

/* result fallback chip when a spot has no photo (not a partner yet) */
.qini{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--cream);color:var(--orange);font-family:'Jost',sans-serif;
  font-weight:700;font-size:17px;letter-spacing:.02em;
}

/* illustration micro-animations: one gentle loop each, calm not clowny */
.a-drip{animation:a-drip 1.6s ease-in infinite}
@keyframes a-drip{0%,55%{transform:translateY(-14px);opacity:0}70%{opacity:1}100%{transform:translateY(6px);opacity:0}}
.a-steam{animation:a-steam 2.2s ease-in-out infinite}
@keyframes a-steam{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.55;transform:translateY(-3px)}}
.a-sway{animation:a-sway 2.6s ease-in-out infinite}
@keyframes a-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.a-spin{animation:a-spin 9s linear infinite}
@keyframes a-spin{to{transform:rotate(360deg)}}
.a-rays{animation:a-spin 14s linear infinite}
.a-wob{animation:a-wob 2.4s ease-in-out infinite}
@keyframes a-wob{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.a-clinkL{animation:a-clinkL 1.8s ease-in-out infinite}
@keyframes a-clinkL{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}}
.a-clinkR{animation:a-clinkR 1.8s ease-in-out infinite}
@keyframes a-clinkR{0%,100%{transform:rotate(0)}45%{transform:rotate(-7deg)}}
.a-heart{transform-origin:60px 38px;animation:a-heart 1.8s ease-in-out infinite}
@keyframes a-heart{0%,100%{transform:scale(1)}45%{transform:scale(1.25)}60%{transform:scale(1.1)}}
.a-lift{animation:a-lift 2.4s ease-in-out infinite}
@keyframes a-lift{0%,100%{transform:translateY(0)}45%,60%{transform:translateY(-9px)}}
.a-crumb circle{animation:a-steam 2s ease-in-out infinite}
.a-zz{animation:a-zz 2.4s ease-in-out infinite}
@keyframes a-zz{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.a-flip{animation:a-flip 2.6s ease-in-out infinite}
@keyframes a-flip{0%,60%,100%{transform:scaleX(1)}75%{transform:scaleX(.14)}90%{transform:scaleX(1)}}
/* Twinkles, hearts and blinks SCALE — without a local origin SVG scales them
   about the viewBox corner, so they visibly drift out of place mid-animation
   (the "glitched graphics" bug, 13 Aug). fill-box anchors each to itself.
   Squish/flip/bop keep their explicit viewBox-coordinate origins. */
.a-tw1,.a-tw2,.a-tw3,.a-heart,.a-blink{transform-box:fill-box;transform-origin:center}
.a-tw1{animation:a-tw 1.6s ease-in-out infinite}
.a-tw2{animation:a-tw 1.6s ease-in-out .5s infinite}
.a-tw3{animation:a-tw 1.6s ease-in-out 1s infinite}
@keyframes a-tw{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.a-bop{animation:a-bop 2.2s ease-in-out infinite}
@keyframes a-bop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}}
.a-bop2{animation:a-bop 2.2s ease-in-out .4s infinite}
.a-squish{animation:a-squish 2.4s ease-in-out infinite}
@keyframes a-squish{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9) translateY(2px)}}
.a-blink{animation:a-blink 2.8s ease-in-out infinite}
@keyframes a-blink{0%,88%,100%{transform:scaleY(1)}94%{transform:scaleY(.2)}}
.a-q{animation:a-steam 2.4s ease-in-out infinite}
.a-spinner{animation:a-spin 1.1s linear infinite}
@media (prefers-reduced-motion:reduce){
  .a-drip,.a-steam,.a-sway,.a-spin,.a-rays,.a-wob,.a-clinkL,.a-clinkR,.a-heart,.a-lift,
  .a-zz,.a-flip,.a-tw1,.a-tw2,.a-tw3,.a-bop,.a-bop2,.a-squish,.a-blink,.a-q,.a-crumb circle{animation:none}
}

/* ---------- nav coins pill ----------
   The Shopee / Agoda / Klook pattern: the balance lives in its own gold
   currency pill so it reads as money you hold, not another menu link. */
.mybk.rw{
  background:linear-gradient(180deg,#FFF8E7,#FDEFCF);
  border:1px solid #EDD79E;border-radius:999px;
  padding:7px 14px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 1px 0 #fff, var(--shadow);
}
.mybk.rw:hover{background:linear-gradient(180deg,#FFF4D8,#FBE7B8);border-color:#E2C87F}
.mybk.rw b{font-family:'Jost',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink)}
.mybk.rw .coin-ico{height:16px}
.mybk.rw.bump{animation:coinbump .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes coinbump{35%{transform:scale(1.14)}70%{transform:scale(.96)}}
@media (max-width:560px){.mybk.rw{padding:6px 11px}}


/* ---- mobile polish pass (8 Aug) ----------------------------------------
   Every form control renders at >=16px: below that, iOS Safari zooms the
   viewport on focus and never zooms back, which reads as the page glitching.
   Never "fix" that with maximum-scale, which breaks pinch-zoom (WCAG 1.4.4). */
input, select, textarea, button { font-size: 16px; }
.sfield label { font-size: 11px; }

/* Real tap targets. Apple asks 44px, Material 48dp, WCAG 2.2 AA floors at 24. */
.sbtn, .stepbtn, .bookbtn, .bcbook, .mybk, .qc-btn { min-height: 44px; }
.stepbtn { min-width: 44px; }

/* Keyboard focus that shows for keyboards but not on every tap. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
}

/* The fixed book bar must never sit on top of whatever was just focused
   (WCAG 2.4.11), so reserve its height when scrolling something into view. */
html { scroll-padding-bottom: 104px; scroll-padding-top: 76px; }

/* Honour reduced-motion for transitions too, not just the decorative loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- UX research pass (8 Aug) -----------------------------------------
   Changes below come from tearing down Eatigo, Chope, Tock, SevenRooms,
   OpenTable, Resy and TheFork. Notes on why each one exists are inline. */

/* The cancellation and arrival rules belong at the moment of commitment,
   not in "My bookings" afterwards. Eatigo buries them and it is the single
   biggest source of their angry reviews. Resy publishes the 15-minute rule
   up front and gets far less grief for enforcing it. */
.policybox{
  margin-top:16px;background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--orange);border-radius:9px;padding:12px 14px;
}
.policybox b{display:block;font-family:'Jost',sans-serif;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.policybox ul{margin:0;padding-left:16px}
.policybox li{font-size:12.5px;line-height:1.6;color:var(--ink)}

/* Inline validation. Errors on submit only, parked at the bottom of a
   scrolling sheet, are how you lose a filled-in form. */
.field.bad input{border-color:var(--red);background:#FFF7F7}
.ferr{display:none;margin-top:5px;font-size:12px;font-weight:500;color:var(--red)}
.field.bad .ferr{display:block}

/* When a slot is gone, offer the nearest live one instead of a dead end.
   Chope's answer to no availability is a dropdown reading "No seats
   available", which is the whole category's current standard. */
.nearest{
  margin-top:12px;background:#fff;border:1px solid var(--line-d);border-radius:10px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;justify-content:space-between;
}
.nearest .nt{font-size:12.5px;line-height:1.5;color:var(--soft)}
.nearest .nt b{color:var(--ink)}
.nearest button{
  flex:none;min-height:44px;padding:0 15px;border-radius:9px;background:var(--ink);color:#fff;
  font-family:'Jost',sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap;
}

/* ---------- add-to-home-screen tutorial ---------- */
.a2hello{font-size:13.5px;color:var(--soft);margin:2px 0 12px;line-height:1.55}
.a2hello b{color:var(--ink)}
.a2tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 14px}
.a2tab{
  border:1.5px solid var(--line-d);border-radius:10px;padding:10px;background:#fff;
  font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--soft);
}
.a2tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.a2steps{display:grid;gap:12px;margin-top:4px}
.a2step{display:flex;align-items:flex-start;gap:11px}
.a2num{
  flex:none;width:24px;height:24px;border-radius:999px;background:var(--orange);color:#fff;
  font-family:'Jost',sans-serif;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.a2ic{flex:none;color:var(--ink);margin-top:2px;display:flex}
.a2txt{font-size:13px;color:var(--soft);line-height:1.55}
.a2txt b{color:var(--ink)}
.a2note{
  margin-top:16px;padding:11px 14px;background:var(--cream);border-radius:11px;
  font-size:12.5px;color:var(--ink);line-height:1.55;
}

/* ---- search suggestions -------------------------------------------------
   Sits under the search bar (which has overflow:hidden, hence .searchwrap).
   Restaurants show their real logo, so the row is recognisable before it is
   read. Rows are 56px so they are comfortably tappable on a phone. */
.sugg{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:#fff;border:1px solid var(--line-d);border-radius:12px;
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:min(58vh,420px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sg{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 14px;min-height:56px;background:#fff;border-bottom:1px solid var(--line);
}
.sg:last-child{border-bottom:0}
.sg:hover,.sg.on{background:var(--bg)}
.sgi{
  flex:none;width:36px;height:36px;border-radius:9px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--soft);overflow:hidden;
}
.sgi img{width:100%;height:100%;object-fit:contain;padding:3px}
.sgt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sgl{
  font-family:'Jost',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sgl b{font-weight:700;color:var(--orange)}
.sgs{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgg{
  flex:none;font-family:'Jost',sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange);
}

/* ---------- location row ---------- */
.locrow{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.locbtn{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-d);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow);
}
.locbtn svg{color:var(--orange)}
.locbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.locbtn.on svg{color:#FFB27D}
.locrow select{
  appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--line-d);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;color:var(--ink);
  outline:none;box-shadow:var(--shadow);
}
.locclear{
  width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid var(--line-d);
  font-size:15px;color:var(--soft);display:flex;align-items:center;justify-content:center;
}
.lochint{font-size:11.5px;color:var(--soft)}
.kmb{color:var(--orange-d);font-weight:700}

/* ---------- Eventful Coins wallet ---------- */
.rwhero{
  position:relative;overflow:hidden;background:var(--ink);border-radius:18px;
  padding:22px 20px 20px;margin-top:14px;text-align:center;color:var(--cream);
}
.rwglow{
  position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:130%;aspect-ratio:1;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle,rgba(242,111,33,.4) 0%,rgba(242,111,33,.12) 45%,transparent 70%);
}
.rwcoin{
  width:118px;margin:10px auto 4px;display:block;position:relative;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(242,111,33,.35));
  animation:coinfloat 3.6s ease-in-out infinite;
}
@keyframes coinfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.rwcoin{animation:none}}
.rwbal{position:relative;font-size:46px;font-weight:700;line-height:1;color:var(--cream)}
.rwbal span{font-size:15px;font-weight:600;margin-left:7px;color:rgba(243,234,219,.6)}
.rwworth{
  position:relative;display:inline-block;margin-top:10px;background:rgba(30,124,70,.25);
  border:1px solid rgba(115,220,150,.4);color:#B9EBC9;font-weight:700;font-size:13.5px;
  border-radius:999px;padding:6px 15px;
}
.rwhow{position:relative;font-size:12px;color:rgba(243,234,219,.65);margin-top:12px;line-height:1.55}

.rwprogwrap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px}
.rwprogline{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink)}
.rwprog{height:10px;background:var(--cream);border-radius:999px;margin-top:8px;overflow:hidden}
.rwfill{height:100%;background:linear-gradient(90deg,#FF9A4D,#F26F21);border-radius:999px;transition:width .5s ease}
.rwprognote{font-size:11px;color:var(--faint);margin-top:7px}

.rwstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.rwst{background:var(--cream);border-radius:12px;padding:12px 6px;text-align:center}
.rwst b{display:block;font-size:17px;color:var(--ink)}
.rwst span{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}

.rwearn{display:grid;gap:8px;margin-top:8px}
.rwec{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:5px 12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;
}
.rwec .rwic{grid-row:span 2;width:38px;height:38px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center}
.rwec b{font-size:13.5px;color:var(--ink)}
.rwec > span:last-child{grid-column:2/4;font-size:12px;color:var(--soft);line-height:1.5}

.rwfeed{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-top:8px}
.rwrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #F4EEE4}
.rwrow:last-child{border-bottom:0}
.rwri{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none}
.rwri img{width:20px}
.rwri.up{background:#EAF6EE}
.rwri.dn{background:#FBEBEA;filter:grayscale(.4)}
.rwrl{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.rwrl i{display:block;font-style:normal;font-size:11px;color:var(--faint)}
.rwrow b{font-size:14px}
.rwrow b.up{color:#1E7C46}
.rwrow b.dn{color:var(--red)}

/* ---------- earn checklist + referral ---------- */
.rwtasks{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-top:8px}
.rwtask{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #F4EEE4;cursor:pointer}
.rwtask:last-child{border-bottom:0}
.rwtask.auto,.rwtask.always{cursor:default}
.rwcheck{
  flex:none;width:26px;height:26px;border-radius:999px;border:2px solid var(--line-d);
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.rwtask.done .rwcheck{background:#1E7C46;border-color:#1E7C46}
.rwcheck.loop{border-style:dashed;border-color:#E4C98B;background:#FFF6E3}
.rwcheck.loop img{width:16px}
.rwtl{flex:1;min-width:0}
.rwtl b{display:block;font-size:13.5px;color:var(--ink)}
.rwtl i{font-style:normal;font-size:11.5px;color:var(--soft)}
.rwtask.done .rwtl b{color:var(--faint);text-decoration:line-through}
.rwamt{font-family:'Jost',sans-serif;font-weight:700;font-size:13.5px;color:var(--orange-d);white-space:nowrap}
.rwtask.done .rwamt{color:#1E7C46;font-size:11.5px;font-weight:600}

.rwref{
  background:linear-gradient(140deg,#FFF3E7,#FFE7D2);border:1px solid #F3D5B8;
  border-radius:14px;padding:16px;margin-top:8px;
}
.rwrefhead b{font-family:'Jost',sans-serif;font-size:16.5px;color:var(--ink)}
.rwref p{font-size:12.5px;color:var(--soft);margin-top:5px;line-height:1.55}
.rwrefrow{display:flex;gap:8px;margin-top:12px}
.rwrefcode{
  flex:1;min-width:0;background:#fff;border:1.5px dashed var(--orange);border-radius:10px;
  padding:10px 12px;font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;
}
.rwrefbtn{
  background:var(--orange);color:#fff;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 20px;
}
.rwrefbtn:hover{background:var(--orange-d)}
.rwrefmsg{font-size:11.5px;font-weight:600;color:#1E7C46;margin-top:8px;min-height:14px}

/* booking extras */
.field textarea{
  width:100%;border:1.5px solid var(--line-d);border-radius:11px;background:#fff;
  font-family:'Poppins',sans-serif;font-size:15px;padding:11px 13px;color:var(--ink);
  outline:none;resize:none;
}
.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,111,33,.14)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:12px 2px 2px;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:#F26F21;flex:none}
.consent span{font-size:12px;color:var(--soft);line-height:1.5}
.nearest .wlq{background:transparent;border:1.5px solid var(--ink);color:var(--ink);margin-left:8px}

/* favourites heart */
.favbtn{
  position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:999px;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(34,26,18,.25);transition:transform .15s ease;
}
.favbtn:active{transform:scale(.85)}
.rcard .imgwrap .maxoff{right:54px}
/* booking card actions */
.bkactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.bka{
  border:1.5px solid rgba(243,234,219,.35);border-radius:10px;padding:10px;color:var(--cream);
  font-size:12.5px;font-weight:600;
}
.bka:hover{border-color:var(--orange);color:#FFB27D}

.movebar{
  grid-column:1/-1;background:#FFF4D8;border:1px solid #EDD79E;border-radius:12px;
  padding:12px 16px;font-size:13px;color:#6B4400;margin-bottom:4px;
}
.movebar b{color:#2B2017}

/* map view */
#mapbox{height:340px;border-radius:14px;margin-top:18px;border:1px solid var(--line-d);box-shadow:var(--shadow);z-index:1;position:relative}
.pinwrap{background:none;border:none}
.pin{
  display:inline-block;background:var(--orange);color:#fff;font-family:'Jost',sans-serif;
  font-weight:700;font-size:12px;border-radius:999px;padding:4px 10px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(43,32,23,.35);border:2px solid #fff;
}

/* staff extras */
.visitchip{
  font-style:normal;background:#EAF6EE;color:#1E7C46;font-size:10.5px;font-weight:700;
  border-radius:5px;padding:2px 7px;margin-left:6px;vertical-align:1px;
}
.noterow .v{color:var(--orange-d);font-weight:600}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.statbox{background:var(--cream);border-radius:12px;padding:16px 10px;text-align:center}
.statbox.wide{grid-column:1/-1}
.statbox b{display:block;font-size:26px;color:var(--ink)}
.statbox span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}

.notechip{font-style:normal;background:#FFF1E6;color:var(--orange-d);font-size:10px;font-weight:700;border-radius:4px;padding:1px 6px}

/* ---------- account / social sign-in ---------- */
.mybk.pf{position:relative;padding:9px 10px}
.pfdot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:99px;background:var(--orange)}
.pfoffer{
  display:flex;gap:12px;align-items:center;background:linear-gradient(140deg,#FFF3E7,#FFE7D2);
  border:1px solid #F3D5B8;border-radius:14px;padding:14px 16px;margin-top:14px;
}
.pfoffer img{width:44px;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.pfoffer b{display:block;font-family:'Jost',sans-serif;font-size:15.5px;color:var(--ink)}
.pfoffer span{font-size:12px;color:var(--soft)}
.socialrow{display:grid;gap:8px;margin-top:14px}
.socbtn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1.5px solid var(--line-d);border-radius:11px;background:#fff;padding:12px;
  font-size:14px;font-weight:600;color:var(--ink);
}
.socbtn:hover{border-color:var(--ink)}
.socbtn.apple{background:var(--ink);color:#fff;border-color:var(--ink)}
.socialrow.slim{grid-template-columns:1fr 1fr;margin-top:10px}
.socialrow.slim .socbtn{padding:10px;font-size:13px}
.ordivider{display:flex;align-items:center;gap:12px;margin:14px 0 2px;color:var(--faint);font-size:11.5px}
.ordivider::before,.ordivider::after{content:'';flex:1;height:1px;background:var(--line)}
.socsim{
  background:var(--cream);border-radius:12px;padding:14px;margin-top:10px;display:grid;gap:9px;
}
.socsim p{font-size:12px;color:var(--soft);margin:0}
.socsim input{
  border:1.5px solid var(--line-d);border-radius:10px;background:#fff;font-size:15px;
  padding:11px 13px;color:var(--ink);outline:none;font-family:'Poppins',sans-serif;
}
.pfcard{display:flex;gap:13px;align-items:center;background:var(--cream);border-radius:14px;padding:15px 16px;margin-top:14px}
.pfav{
  flex:none;width:44px;height:44px;border-radius:99px;background:var(--orange);color:#fff;
  font-family:'Jost',sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;
}
.pfwho b{display:block;font-size:14px;color:var(--ink);word-break:break-all}
.pfwho span{font-size:11.5px;color:var(--soft)}
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pfg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
.pfg b{display:block;font-size:20px;color:var(--ink)}
.pfg span{font-size:11px;color:var(--soft)}
/* subpage nav chips */
.mybk.navchip{display:inline-flex;align-items:center;gap:6px;text-decoration:none}

/* big-group WhatsApp nudge (venues with a party ceiling, e.g. Madison's) */
.biggrp{margin-top:8px;font-size:12.5px;color:var(--soft);background:var(--beige);border-radius:10px;padding:9px 12px}
.biggrp a{color:var(--orange);font-weight:600;text-decoration:underline}

/* quiz intro: fill the canvas, keep it playful */
.qzintro{position:relative}
.qfloat{position:absolute;width:76px;opacity:.55;transform:rotate(var(--rot,0deg));animation:qbob 5s ease-in-out infinite;pointer-events:none}
.qfloat svg{width:100%;height:auto;display:block}
@keyframes qbob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.qstats{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.qstat{background:var(--beige);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--soft)}
.qstat b{font-family:'Jost',sans-serif;font-size:14px;color:var(--ink);margin-right:3px}
.qpeek{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:520px;margin:22px auto 0}
/* the hidden character teaser: its own full-width strip so the grid stays balanced */
.qpkwide{display:flex;align-items:center;gap:12px;background:#2B2017;border-radius:14px;padding:10px 14px;max-width:520px;margin:8px auto 0;text-align:left}
.qpkwide .qpkc{width:40px;height:40px;flex:none;display:block}
.qpkwide .qpkc svg{width:100%;height:100%;display:block}
.qpkwide .qpkw-txt{min-width:0}
.qpkwide b{display:block;font-family:'Jost',sans-serif;font-size:13.5px;color:var(--cream)}
.qpkwide i{display:block;font-style:normal;font-size:11px;color:rgba(243,234,219,.65);margin-top:1px}
.qpk{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 4px 8px}
.qpk svg{width:34px;height:auto}
.qpk i{font-style:normal;font-size:10px;line-height:1.25;color:var(--soft);text-align:center}
@media (max-width:640px){
  .qpeek{grid-template-columns:repeat(3,1fr)}
  .qfloat{display:none}
}

/* account sheet v2: modeled on the profile tabs of ShopBack / Grab / Chope */
.pfwhy{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pfw{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 13px}
.pfw .pfwi{flex:0 0 34px;height:34px;border-radius:10px;background:var(--beige);display:grid;place-items:center;color:var(--orange)}
.pfw .pfwi svg{width:19px;height:19px}
.pfw b{display:block;font-size:13.5px}
.pfw span{display:block;font-size:11.5px;color:var(--soft);margin-top:1px}
.pfhero{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;background:var(--ink);color:#fff;border:0;border-radius:16px;padding:14px 15px;cursor:pointer;text-align:left}
.pfhero img{width:40px;height:40px}
.pfhero .pfhtxt b{display:block;font-size:19px;letter-spacing:-.01em}
.pfhero .pfhtxt span{display:block;font-size:11.5px;opacity:.75;margin-top:2px}
.pfhero .chev{width:18px;height:18px;margin-left:auto;opacity:.6;flex:0 0 18px}
.pfgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pfgrid4 .pfg{padding:11px 4px}
.pfgrid4 .pfg b{font-size:16px}
.pfgrid4 .pfg span{font-size:10.5px}
.pflist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pfrow{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;cursor:pointer;text-align:left;text-decoration:none;color:var(--ink);font:inherit;width:100%}
.pfrow .pfri{flex:0 0 34px;height:34px;border-radius:10px;background:var(--beige);display:grid;place-items:center;color:var(--ink)}
.pfrow .pfri svg{width:19px;height:19px}
.pfrow b{display:block;font-size:13.5px}
.pfrow span:not(.pfri):not(.pfsw){display:block;font-size:11.5px;color:var(--soft);margin-top:1px}
.pfrow .chev{width:16px;height:16px;margin-left:auto;color:var(--soft);flex:0 0 16px}
.pfrow > div{flex:1;min-width:0}
.pfsw{flex:0 0 40px;width:40px;height:24px;border-radius:999px;background:#D8CDBE;position:relative;transition:background .18s;margin-left:auto}
.pfsw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s}
.pfsw.on{background:var(--orange)}
.pfsw.on i{left:19px}
.pffoot{margin-top:14px;text-align:center;font-size:11px;color:var(--soft)}
.pffoot a{color:var(--soft);text-decoration:underline}

/* inline edit panel inside a booking card */
.bkedit{margin-top:10px;background:var(--beige);border:1px solid var(--line);border-radius:12px;padding:12px}
.bkedit .field label{font-size:11px}
.bkedit input{width:100%}
.bkedit .stepper{display:flex;align-items:center;gap:14px}

/* confirmation card quick actions */
.confacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.confacts .bka{flex:1;text-align:center;text-decoration:none;display:block}

/* edit escape hatch on the ticket */
.tkedit{display:block;margin-top:10px;font-size:12.5px;color:var(--orange);font-weight:600;text-decoration:underline;text-align:center}


/* .bka was designed for the dark confirmation card; on the white booking
   cards it rendered cream-on-white and was effectively invisible */
.bkbody .bka{border-color:#D8CDBE;color:var(--ink);background:var(--beige)}
.bkbody .bka:hover{border-color:var(--orange);color:var(--orange)}
.bkbody .copybtn{color:var(--red)}
.bkbody .bkcxl-note,.bkbody .crow + span{color:var(--soft)}

/* confirmation card v2: reassurance first, ref number demoted (Resy/OpenTable pattern) */
.conf2{text-align:center}
.cfcheck{width:56px;margin:2px auto 0}
.cfcheck svg{width:56px;height:56px}
.cfcheck circle{fill:none;stroke:#5FA96B;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:cfring .5s ease-out forwards}
.cfcheck path{fill:none;stroke:#5FA96B;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:cftick .32s .42s ease-out forwards}
@keyframes cfring{to{stroke-dashoffset:0}}
@keyframes cftick{to{stroke-dashoffset:0}}
.cftitle{font-size:24px;font-weight:700;margin-top:12px;letter-spacing:-.01em}
.cfsub{font-size:13px;color:rgba(243,234,219,.75);margin-top:4px}
.cfwhen{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;margin-top:14px}
.cfday{font-size:14px;color:rgba(243,234,219,.85)}
.cftime{font-size:30px;font-weight:700;margin-top:2px}
.cfmeta{font-size:12.5px;color:rgba(243,234,219,.75);margin-top:6px}
.cfmeta em{font-style:normal;color:#FFB98A;font-weight:600}

/* social proof popup (Drops pattern) */
.sp-pop{position:fixed;left:14px;bottom:86px;z-index:60;display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--ink);border-radius:14px;box-shadow:0 8px 20px rgba(43,32,23,.16);padding:10px 32px 10px 12px;max-width:320px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;cursor:pointer}
.sp-pop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.sp-pop img{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover}
.sp-txt{font-size:12.5px;line-height:1.35;font-weight:600;color:var(--ink)}
.sp-txt b{font-weight:800}
.sp-meta{display:block;font-size:11px;font-weight:500;color:var(--soft);margin-top:2px}
.sp-x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--soft);font-size:15px;line-height:1;cursor:pointer;padding:4px}
@media (min-width:900px){.sp-pop{left:26px;bottom:26px}}

/* referral card on the ticket (seated + post-visit share moment) */
.refcard{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--cream);border-radius:16px;padding:14px 15px;margin:14px auto 0;max-width:430px;text-align:left}
.refcard img{width:38px;height:38px;flex:none}
.refcard > div{flex:1;min-width:0}
.refcard b{display:block;font-family:'Jost',sans-serif;font-size:15.5px}
.refcard span{display:block;font-size:11.5px;color:rgba(243,234,219,.75);margin-top:2px}

/* friend-landing referral banner */
.refbanner{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);padding:10px 14px;font-size:13px}
.refbanner img{width:26px;height:26px;flex:none}
.refbanner span{flex:1}
.refbanner b{color:#FFB98A}
.refbanner button{border:0;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;font-size:12.5px;padding:8px 16px;cursor:pointer}

/* welcome-gift countdown */
.glcount{margin-top:10px}
.glrow{display:flex;align-items:baseline;gap:7px;justify-content:center}
.glrow b{font-size:22px;letter-spacing:-.01em;color:var(--orange)}
.glrow span{font-size:12.5px;color:var(--soft);font-weight:600}
.glbar{height:7px;border-radius:999px;background:#E8DCCB;overflow:hidden;margin-top:7px}
.glbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),#C41230);transition:width .9s cubic-bezier(.3,.8,.3,1)}
.glcount.dark .glrow span{color:rgba(243,234,219,.7)}
.glcount.dark .glbar{background:rgba(255,255,255,.15)}

/* homepage guarantee line */
.hguarantee{margin-top:12px;font-size:13px;background:var(--beige);border-radius:12px;padding:11px 14px;color:var(--soft)}
.hguarantee b{color:var(--ink)}

/* persona reveal (quiz result) */
.preveal{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:26px 18px 22px;text-align:center;overflow:hidden}
.preveal:before{content:'';position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 16%,transparent),transparent);pointer-events:none}
.pchar{width:150px;margin:0 auto;animation:pcpop .5s cubic-bezier(.2,1.4,.4,1) both}
.pchar svg{width:100%;height:auto;display:block}
@keyframes pcpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pk{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--soft);margin-top:12px}
.pname{font-size:30px;font-weight:700;letter-spacing:-.01em;margin-top:4px;color:var(--pc)}
.ptag{font-size:14px;color:var(--ink);font-weight:600;margin-top:4px}
.plines{list-style:none;padding:0;margin:14px auto 0;max-width:320px;text-align:left}
.plines li{font-size:13px;color:var(--soft);padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed var(--line)}
.plines li:last-child{border-bottom:0}
.plines li:before{content:'✓';position:absolute;left:4px;color:var(--pc);font-weight:700}
.psub{font-size:11.5px;color:var(--soft);margin-top:10px}
.ppick{background:var(--ink);border-radius:16px;padding:14px;margin-top:14px;color:var(--cream)}
.ppk{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFB98A}
.ppbody{display:flex;align-items:center;gap:12px;margin-top:10px}
.ppbody img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.ppbody > div{flex:1;min-width:0}
.ppbody b{display:block;font-family:'Jost',sans-serif;font-size:16px}
.ppbody span{display:block;font-size:12px;color:rgba(243,234,219,.75);margin-top:2px}

/* persona avatar + homepage pick strip */
.pfav.char{background:var(--beige);display:grid;place-items:center;padding:5px}
.pfav.char svg{width:100%;height:100%}
.pstrip{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:9px 12px;margin:12px 0 2px}
.pschar{width:34px;height:34px;flex:none}
.pschar svg{width:100%;height:100%;display:block}
.pstxt{flex:1;font-size:12.5px;color:var(--soft);min-width:0}
.pstxt b{color:var(--ink)}
.psgo{background:var(--orange);color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:7px 14px;text-decoration:none}
.psx{border:0;background:none;color:var(--soft);font-size:16px;cursor:pointer;padding:2px 4px}

.qpk .qpkc{width:38px;height:38px;display:block}
.qpk .qpkc svg{width:100%;height:100%;display:block}

/* A cuisine chip with no photo yet: show its drawn icon on the cream tile
   instead of a broken image, so adding a cuisine never waits on artwork. */
.ci.noimg{background:var(--bg);display:flex;align-items:center;justify-content:center}
.ci.noimg svg{width:60%;height:60%}

/* ---------- foodie personality quiz (personality.html) ----------
   A guided story: one day of eating in Singapore, one scene per question.
   The reveal + story card are the shareable payoff. */
.fpwrap{max-width:620px;margin:0 auto;padding:0 20px 70px}
.fpstep{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;position:relative}
/* visible back-a-question button (testers had no obvious way back) */
.fpback{position:absolute;left:0;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--line-d);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,transform .15s}
.fpback:hover{border-color:var(--orange);color:var(--orange)}
.fpback:active{transform:translateY(-50%) scale(.92)}
.fptime{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;background:var(--ink);color:var(--cream);border-radius:999px;padding:6px 12px}
.fpplace{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fpscene{background:linear-gradient(180deg,#FFF9F1,var(--cream));border:1.5px solid var(--line);border-radius:20px;margin-top:14px;overflow:hidden}
.fpscene svg{width:100%;height:auto;display:block}
.fpline{font-size:13px;line-height:1.5;color:var(--faint);margin:14px auto 0;max-width:46ch;text-align:center}
.fpline b{color:var(--soft)}
/* The set-up, sitting ABOVE the picture so you read the situation before you
   look at it. Testers kept missing that these were scenarios at all when the
   line was small grey text under the illustration. */
.fpsetup{
  position:relative;text-align:left;margin-top:16px;padding:13px 16px 14px 17px;
  background:linear-gradient(180deg,#FFF6EC,#FFF1E2);
  border:1.5px solid #F6D8BD;border-left:5px solid var(--orange);border-radius:14px;
}
.fpsetup .sk{
  display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--orange);
}
.fpsetup p{font-size:16.5px;line-height:1.42;font-weight:500;color:var(--ink);margin-top:5px}
.fpsetup b{font-weight:700}
@media (min-width:620px){.fpsetup p{font-size:18px}}
/* THE QUESTION is the loudest thing on the screen (Javen: "didn't know there
   were questions until the 3rd round") — big, dark, with an orange tick mark */
.fpq{font-family:'Jost',sans-serif;font-size:30px;font-weight:700;line-height:1.16;margin-top:10px;letter-spacing:-.015em;text-align:center;color:var(--ink)}
.fpq:after{content:'';display:block;width:44px;height:5px;border-radius:999px;background:var(--orange);margin:12px auto 0}
@media (max-width:360px){.fpq{font-size:26px}}
.fpresume{display:flex;align-items:center;justify-content:center;gap:4px;background:#FFF3E4;border:1.5px solid #F5D9BC;border-radius:12px;padding:9px 12px;margin-top:14px;font-size:12px;color:var(--soft)}
.fpresume button{color:var(--orange);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.fpcard{animation:qslide .38s cubic-bezier(.3,.8,.3,1) both}
.fpdots{display:flex;gap:6px;justify-content:center;margin-top:22px}
.fpdots i{width:7px;height:7px;border-radius:50%;background:var(--line-d);transition:background .2s,transform .2s}
.fpdots i.on{background:var(--orange);transform:scale(1.25)}

/* the reveal: full-colour hero in the persona's colour, rays + confetti */
.fphero{position:relative;border-radius:26px;overflow:hidden;background:var(--pc);color:var(--cream);text-align:center;padding:38px 20px 30px;margin-top:18px}
.fphero .fprays{position:absolute;inset:-65%;background:repeating-conic-gradient(rgba(255,255,255,.08) 0 9deg,transparent 9deg 20deg);animation:a-spin 46s linear infinite;pointer-events:none}
.fpconf i{position:absolute;top:-12px;width:9px;height:13px;border-radius:3px;opacity:0;animation:fpfall 2.6s ease-in both;pointer-events:none}
@keyframes fpfall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(74vh) rotate(320deg)}}
.fphero .fpchar{width:min(52vw,210px);margin:6px auto 0;position:relative;animation:fppop .65s cubic-bezier(.2,1.5,.4,1) .15s both}
.fphero .fpchar svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.22))}
@keyframes fppop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.fphero .fpring{position:absolute;left:50%;top:44%;width:250px;height:250px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.12);animation:fpring .8s cubic-bezier(.2,1,.4,1) .1s both}
@keyframes fpring{from{transform:translate(-50%,-50%) scale(.2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.fpk{position:relative;font-size:11px;font-weight:700;letter-spacing:.22em;opacity:.8;text-transform:uppercase}
.fpname{position:relative;font-family:'Jost',sans-serif;font-size:34px;font-weight:700;letter-spacing:-.01em;margin-top:10px;animation:prise .5s ease .35s both}
.fptagline{position:relative;font-size:15px;font-weight:600;font-style:italic;margin-top:6px;opacity:.92;animation:prise .5s ease .5s both}
.fpshort{position:relative;font-size:13px;margin-top:4px;opacity:.78;animation:prise .5s ease .6s both}
.fpchips{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.fpchips span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;animation:prise .45s ease both}
.fphero .confirmbtn{position:relative;background:var(--cream);color:var(--ink);max-width:320px;margin:20px auto 0;animation:prise .5s ease .8s both}
.fphero .confirmbtn:hover{background:#fff}
.fpheronote{position:relative;font-size:11.5px;opacity:.72;margin-top:9px;animation:prise .5s ease .9s both}
/* atas is ink-coloured; give its hero a touch more light so it never goes flat */
.fphero.lift{background:linear-gradient(160deg,#4A3A28,var(--pc))}

/* full description below the hero */
.fpdesc{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px;margin-top:14px;font-size:14px;line-height:1.65;color:var(--soft);text-align:left}
.fpdesc b{color:var(--ink)}

/* perfect match / worst match cards */
.fpduo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:480px){.fpduo{grid-template-columns:1fr}}
.fpmcard{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px 14px;text-align:center}
.fpmcard .mk{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.fpmcard.good .mk{color:#5F8A4E}
.fpmcard.bad .mk{color:var(--red)}
.fpmcard .mchar{width:74px;margin:10px auto 0}
.fpmcard .mchar svg{width:100%;height:auto;display:block}
.fpmcard.bad .mchar{filter:grayscale(.55);opacity:.85}
.fpmcard b{display:block;font-family:'Jost',sans-serif;font-size:16px;margin-top:8px}
.fpmcard span{display:block;font-size:11.5px;color:var(--soft);margin-top:4px;line-height:1.45}
.fpnext{display:flex;flex-direction:column;gap:10px;margin-top:16px}

/* homepage banner that sends people into the story quiz */
.fpcta{position:relative;overflow:hidden;background:var(--ink);border:0;border-radius:20px;padding:22px;margin-top:26px;color:var(--cream);display:flex;align-items:center;gap:16px}
.fpcta .qz-tag{color:#FFB98A}
.fpcta .fpcast{display:flex;flex:none}
.fpcta .fpcast span{width:52px;height:52px;border-radius:50%;background:var(--cream);border:2.5px solid var(--ink);display:grid;place-items:center;overflow:hidden}
.fpcta .fpcast span+span{margin-left:-14px}
.fpcta .fpcast svg{width:78%;height:78%}
@media (max-width:560px){.fpcta{flex-direction:column;align-items:flex-start}.fpcta .fpcast{order:-1}}

/* compact Makan Match banner (its new home further down the page) */
.mmbanner{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;margin-top:26px}
.mmbanner .mmart{flex:none;width:56px}
.mmbanner .mmart svg{width:100%;height:auto;display:block}
.mmbanner > div{flex:1;min-width:0}
.mmbanner b{display:block;font-family:'Jost',sans-serif;font-size:16.5px}
.mmbanner span{display:block;font-size:12.5px;color:var(--soft);margin-top:2px}
.mmbanner .qc-btn{flex:none;padding:12px 18px}
@media (max-width:520px){.mmbanner{flex-wrap:wrap}.mmbanner .qc-btn{width:100%;text-align:center}}

@media (prefers-reduced-motion:reduce){
  .fphero .fprays,.fpconf i{animation:none}
  .fpconf i{display:none}
}

/* ---------- the makan pet ---------- */
/* feed moment on the (dark) booking confirmation card */
.cfpet{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;margin-top:12px;text-align:left}
.cfpet .cfpetart{flex:0 0 54px;width:54px;height:54px}
.cfpet .cfpetart svg{width:100%;height:100%;display:block}
.cfpet b{display:block;font-family:'Jost',sans-serif;font-size:15px;color:var(--cream)}
.cfpet span{display:block;font-size:11.5px;color:rgba(243,234,219,.75);margin-top:2px}
.cfpet.evolved{animation:gridflash 1.2s ease 1}
/* pet card in the account sheet */
.pfpet{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#FFF7EE,#fff);border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:10px;text-decoration:none;color:var(--ink)}
.pfpet .pfpetart{flex:0 0 46px;width:46px;height:46px}
.pfpet .pfpetart svg{width:100%;height:100%;display:block}
.pfpet > div{flex:1;min-width:0}
.pfpet b{display:block;font-size:13.5px}
.pfpet span{display:block;font-size:11.5px;color:var(--soft);margin-top:1px}
.petbar{height:6px;border-radius:999px;background:#EFE6D8;overflow:hidden;margin-top:6px}
.petbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),#F2B33D);transition:width .6s cubic-bezier(.3,.8,.3,1)}
/* homepage pet strip (upgrades the persona strip once a pet exists) */
.pstrip .pschar.pet{width:40px;height:40px}
/* hatch card on the personality reveal */
.fphatch{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px 16px;margin-top:14px;text-align:center}
.fphatch .hk{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--orange);text-transform:uppercase}
.fphatch .hegg{width:110px;margin:10px auto 0}
.fphatch .hegg svg{width:100%;height:auto;display:block}
.fphatch h3{font-family:'Jost',sans-serif;font-size:19px;margin-top:10px}
.fphatch p{font-size:12.5px;color:var(--soft);margin-top:6px;max-width:44ch;margin-left:auto;margin-right:auto}
.fphatch .hrow{display:flex;gap:8px;max-width:340px;margin:14px auto 0}
.fphatch input{flex:1;min-width:0;border:1.5px solid var(--line-d);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;background:#FFFDF9}
.fphatch input:focus{outline:none;border-color:var(--orange)}
.fphatch .confirmbtn{margin:0;width:auto;padding:12px 20px}
.fphatch .hstages{display:flex;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.fphatch .hs{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--faint);width:56px}
.fphatch .hs svg{width:44px;height:44px}
.fphatch .hs b{font-size:10px;color:var(--soft);font-weight:600}
.fphatch .hs .hat{font-size:9px;color:var(--faint)}
/* hatched celebration */
.fppet-live .hegg{animation:fppop .6s cubic-bezier(.2,1.5,.4,1) both}
@media (prefers-reduced-motion:reduce){.cfpet.evolved{animation:none}}

/* option sub-description (the little aside under each answer) */
.qopt .qsub{font-size:11px;line-height:1.35;color:var(--faint);margin-top:4px;font-style:italic}

/* ---------- pre-launch funnel (personality.html signup + launch.html) ---------- */
/* the founding-member signup card on the quiz reveal */
.fpsignup{background:var(--ink);border-radius:20px;padding:22px 18px;margin-top:14px;text-align:center;color:var(--cream)}
.fpsignup .hk{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:#FFB98A;text-transform:uppercase}
.fpsignup h3{font-family:'Jost',sans-serif;font-size:20px;margin-top:8px}
.fpsignup p{font-size:12.5px;color:rgba(243,234,219,.78);margin-top:8px;max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.55}
.fpsignup p b{color:var(--cream)}
.fpsignup .hrow{display:flex;gap:8px;margin:14px auto 0}
.fpsignup input{flex:1;min-width:0;border:1.5px solid rgba(255,255,255,.25);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;background:rgba(255,255,255,.08);color:var(--cream)}
.fpsignup input::placeholder{color:rgba(243,234,219,.45)}
.fpsignup input:focus{outline:none;border-color:var(--orange)}
.fpsignup .confirmbtn{margin:0;width:auto;padding:12px 18px;white-space:nowrap}
.fpsignup .glcount .glrow span{color:rgba(243,234,219,.7)}
.fpsignup .glcount .glbar{background:rgba(255,255,255,.15)}
.fpsignup .glcount{max-width:300px;margin:12px auto 0}
.fpsignup.done{background:linear-gradient(140deg,#2F3B24,#232B1A)}
.fperr{font-size:12px;color:#FFB98A;margin-top:8px}
/* nav launch chip */
.lnchip{background:var(--ink);color:var(--cream);border-radius:999px}
.lnchip b{color:#FFB98A;font-weight:700}
.lnchip:hover{background:#3A2C1E}

/* launch.html: countdown hero */
.lchero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center;padding:44px 20px 46px}
.lchero .lcrays{position:absolute;inset:-70% -30%;background:repeating-conic-gradient(rgba(255,255,255,.05) 0 8deg,transparent 8deg 19deg);animation:a-spin 60s linear infinite;pointer-events:none}
.lcin{position:relative;max-width:640px;margin:0 auto}
.lck{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#FFB98A}
.lchero h1{font-size:clamp(28px,6vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin-top:12px}
.lchero h1 em{font-style:normal;color:var(--orange)}
.lcsub{font-size:16px;color:rgba(243,234,219,.8);margin:12px auto 0;max-width:40ch;line-height:1.55}
.lccount{display:flex;gap:10px;justify-content:center;margin-top:22px}
.lcbox{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 0;width:74px}
.lcbox b{display:block;font-family:'Jost',sans-serif;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.lcbox i{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,234,219,.6);margin-top:2px}
@media (max-width:420px){.lcbox{width:64px}.lcbox b{font-size:25px}}
.lchcta{display:inline-block;text-decoration:none;margin-top:22px;padding:15px 30px}
.lchsub{font-size:11.5px;color:rgba(243,234,219,.6);margin-top:9px}
@media (prefers-reduced-motion:reduce){.lchero .lcrays{animation:none}}

/* launch.html: body */
.lcwrap{max-width:640px;margin:0 auto;padding:18px 20px 60px}
.lcmember{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px 18px;margin-top:14px;box-shadow:var(--shadow)}
.lcmember .hk{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--orange);text-transform:uppercase}
.lcmember .hrow{display:flex;gap:8px}
.lcmember input{flex:1;min-width:0;border:1.5px solid var(--line-d);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;background:#FFFDF9}
.lcmember input:focus{outline:none;border-color:var(--orange)}
.lcmember .confirmbtn{margin:0;width:auto;padding:12px 18px;white-space:nowrap}
.lcmember .fperr{color:var(--red)}
.lcmember .glcount{max-width:300px;margin:12px 0 0}
.lcwelcome{background:linear-gradient(90deg,var(--orange),#F2B33D);color:#fff;font-weight:700;font-size:13.5px;border-radius:12px;padding:10px 14px;text-align:center;margin-bottom:14px;animation:prise .5s ease both}
.lcmrow{display:flex;align-items:center;gap:14px}
.lcmpet{flex:0 0 64px;width:64px;height:64px}
.lcmpet svg{width:100%;height:100%;display:block}
.lcmtxt{flex:1;min-width:0}
.lcmtxt b{display:block;font-size:14.5px;word-break:break-all}
.lcmtxt span{display:block;font-size:12px;color:var(--soft);margin-top:2px}
.lcmcoins{text-align:right;flex:none}
.lcmcoins b{display:block;font-size:24px;color:var(--orange);letter-spacing:-.01em}
.lcmcoins span{display:block;font-size:10.5px;color:var(--soft)}
.lcmnote{background:var(--beige);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--soft);margin-top:14px;line-height:1.55}
.lcvalues{margin-top:26px}
.lcvalues h2{font-size:20px;margin-bottom:4px}
.lcv{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px;margin-top:10px}
.lcv .lcvi{flex:0 0 44px;width:44px;height:44px}
.lcv .lcvi svg{width:100%;height:100%;display:block}
.lcv b{display:block;font-size:14.5px}
.lcv span{display:block;font-size:12.5px;color:var(--soft);margin-top:3px;line-height:1.5}
.lcshare{background:var(--ink);border-radius:20px;padding:22px 18px;margin-top:26px;text-align:center;color:var(--cream)}
.lcshare h3{font-size:18px}
.lcshare p{font-size:12.5px;color:rgba(243,234,219,.75);margin-top:6px}
.lcsharerow{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.lcshare .qc-btn.alt{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:var(--cream)}
.lcshared{font-size:12px;color:#8FD49B;margin-top:10px}
.lcfoot{text-align:center;font-size:11.5px;color:var(--faint);margin-top:30px}
.lcfoot a{color:var(--soft);text-decoration:underline}

/* [hidden] loses to .mybk's display:inline-flex at equal specificity, so
   "hidden" nav chips (coins when signed out, bookings at zero) still showed */
.navchip[hidden]{display:none!important}

/* THE WORD "QUESTION" on every screen — the recurring feedback was that
   people don't realise these are questions. A loud orange pill sits right
   on top of the question text, numbered N of 8. */
.fpqhead{display:table;margin:16px auto 0;background:var(--orange);color:#fff;font-family:'Jost',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:8px 18px;box-shadow:0 3px 10px rgba(242,111,33,.35)}
.fpqhead span{opacity:.75;font-weight:600}

/* auth links (login/sign-out text buttons on the funnel cards) */
.authlink{color:var(--orange);font-weight:700;font-size:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fpsignup .authlink{color:#FFB98A}

/* ---------- launch page, human edition ----------
   The de-AI pass: staggered entrance choreography, hand-drawn squiggle,
   floating character stickers, tilted ticket-stub countdown, a marquee
   band, scrapbook value cards with tape + brand-drawn icons, and a
   bobbing cast strip. Symmetry is broken ON PURPOSE. */
@keyframes lcrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lc-in{animation:lcrise .6s cubic-bezier(.2,.8,.3,1) both}
.lchero h1{position:relative}
.lchero h1 em{position:relative;display:inline-block}
.lcsq{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:14px;overflow:visible}
.lcsq path{stroke:var(--orange);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230;animation:lcsqdraw .7s .7s ease-out forwards}
@keyframes lcsqdraw{to{stroke-dashoffset:0}}
/* floating character stickers */
.lcfl{position:absolute;width:74px;height:74px;border-radius:50%;background:var(--cream);border:3px solid rgba(255,255,255,.25);display:grid;place-items:center;overflow:hidden;transform:rotate(var(--rot,0deg));animation:qbob 5.5s ease-in-out infinite;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.lcfl svg{width:76%;height:76%}
@media (max-width:700px){
  /* on phones the stickers peek in from the edges beside the countdown,
     never over the headline */
  .lcfl{width:54px;height:54px}
  .lcfl.d1{left:-16px !important;top:46% !important}
  .lcfl.d2{right:-16px !important;top:40% !important}
  .lcfl.d3,.lcfl.d4,.lcfl.d5{display:none}
}
/* countdown = tilted ticket stubs, seconds runs hot */
.lcbox{transform:rotate(-2deg)}
.lcbox:nth-child(2){transform:rotate(1.4deg)}
.lcbox:nth-child(3){transform:rotate(-1.2deg)}
.lcbox:nth-child(4){transform:rotate(2.2deg);background:var(--orange);border-color:var(--orange)}
.lcbox:nth-child(4) i{color:rgba(255,255,255,.8)}
.lcbox b{transition:transform .18s ease}
.lcbox.tk b{transform:scale(1.18)}
/* marquee band */
.lcticker{background:var(--ink);transform:rotate(-1.2deg) scale(1.02);margin:-14px -8px 0;overflow:hidden;padding:11px 0;box-shadow:0 6px 18px rgba(43,32,23,.18);position:relative;z-index:2}
.lctk{display:flex;width:max-content;animation:lctick 26s linear infinite;white-space:nowrap}
.lctk span{font-family:'Jost',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--cream);padding-right:14px}
.lctk span i{font-style:normal;color:var(--orange);padding-right:14px}
@keyframes lctick{to{transform:translateX(-50%)}}
/* scroll-in reveals */
.lrev{opacity:0;transform:translateY(20px)}
.lrev.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
/* value cards: scrapbook sticker sheet */
.lcvgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:560px){.lcvgrid{grid-template-columns:1fr}}
.lcv2{position:relative;border:1.5px solid var(--line);border-radius:18px;padding:22px 16px 18px;text-align:center;transition:transform .25s ease}
.lcv2:hover{transform:translateY(-4px) rotate(0deg) !important}
.lcv2.t1{background:#fff;transform:rotate(-1.1deg)}
.lcv2.t2{background:#FFF3E4;transform:rotate(1deg)}
.lcv2.t3{background:#FBF6EC;transform:rotate(.9deg)}
.lcv2.t4{background:#F3EFE4;transform:rotate(-1.3deg)}
.lcv2 .tape{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);width:64px;height:18px;background:rgba(242,111,33,.28);border-radius:2px}
.lcv2 .lcvi2{width:64px;height:64px;margin:0 auto}
.lcv2 .lcvi2 svg{width:100%;height:100%;display:block}
.lcv2 b{display:block;font-family:'Jost',sans-serif;font-size:19px;margin-top:10px}
.lcv2 span{display:block;font-size:13.5px;color:var(--soft);margin-top:5px;line-height:1.5}
/* the cast strip */
.lccast{margin-top:30px;text-align:center}
.lccast h2{font-size:20px}
.lccast p{font-size:12.5px;color:var(--soft);margin-top:4px}
.lccrow{display:flex;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap}
.lcc{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;text-decoration:none}
.lcc .av{width:58px;height:58px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;overflow:hidden;animation:qbob 4.6s ease-in-out infinite}
.lcc:nth-child(2) .av{animation-delay:.4s}.lcc:nth-child(3) .av{animation-delay:.8s}.lcc:nth-child(4) .av{animation-delay:1.2s}.lcc:nth-child(5) .av{animation-delay:1.6s}.lcc:nth-child(6) .av{animation-delay:2s}.lcc:nth-child(7) .av{animation-delay:2.4s}
.lcc .av svg{width:76%;height:76%}
.lcc i{font-style:normal;font-size:10.5px;color:var(--soft);line-height:1.2}
.lcc.my .av{background:#3A2C1E}
/* share card gets a tilt + face */
.lcshare{transform:rotate(-.6deg)}
.lcshare .winky{width:44px;margin:0 auto 8px}
.lcshare .winky svg{width:100%;height:auto}
@media (prefers-reduced-motion:reduce){
  .lc-in,.lcsq path,.lctk,.lcfl,.lcc .av{animation:none}
  .lcsq path{stroke-dashoffset:0}
  .lrev{opacity:1;transform:none}
  .lcv2,.lcbox{transform:none !important}
}

/* share row on the reveal: primary IG + ghost save */
.fpsharerow{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;animation:prise .5s ease .8s both}
.fpsharerow .confirmbtn{margin:0;width:auto;padding:14px 22px;background:var(--cream);color:var(--ink)}
.fpsharerow .confirmbtn:hover{background:#fff}
.fpsharerow .confirmbtn.ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(255,255,255,.45)}
.fpsharerow .confirmbtn.ghost:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.08)}

/* the one clear quiz block (replaces cast + share double-CTA) */
.lcquiz{background:var(--ink);border-radius:22px;padding:26px 18px 24px;margin-top:26px;text-align:center;color:var(--cream);transform:rotate(-.5deg)}
.lcquiz .lccrow{margin-top:0}
.lcquiz .lcc i{color:rgba(243,234,219,.65)}
.lcquiz .lcc .av{border-color:transparent}
.lcquiz h2{font-size:clamp(24px,5.4vw,32px);margin-top:14px}
.lcquiz p{font-size:14px;color:rgba(243,234,219,.75);margin-top:6px}
.lcqbtn{display:block;max-width:340px;margin:16px auto 0;text-decoration:none;text-align:center;padding:16px 20px;font-size:16px}
.lcqshare{margin-top:12px}
.lcquiz .authlink{color:#FFB98A}
.lcquiz .lcshared{color:#8FD49B}

/* auth overlay used by the quiz pages' Log in / Sign up chips */
.authoverlay{position:fixed;inset:0;background:rgba(43,32,23,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.authcard{position:relative;background:#fff;border-radius:20px;padding:24px 22px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:qslide .28s cubic-bezier(.3,.8,.3,1) both}
.authx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--faint);cursor:pointer;padding:4px}
.authx:hover{color:var(--ink)}
.authcard .socsim{margin-top:10px}

/* Makan Match entry now lives above the list */
.mmbanner.mmtop{margin:6px 0 18px}

/* ---------- pet evolution sequence ----------
   anticipation (tremble + building glow) -> white flash -> elastic reveal ->
   rays + confetti + name plate. Timeline lives entirely in these keyframes. */
.evolve{position:fixed;inset:0;z-index:90;background:rgba(43,32,23,.9);display:flex;align-items:center;justify-content:center;animation:fadein .25s ease}
.evolve.evout{opacity:0;transition:opacity .3s ease}
.evstage{position:relative;width:min(78vw,340px);text-align:center}
.evpet{position:relative;width:100%;aspect-ratio:1}
.evpet svg{width:100%;height:100%}
/* the old form: trembles harder and glows brighter, then vanishes at the flash */
.evold{animation:evShake 1.5s cubic-bezier(.36,.07,.19,.97) both, evGlow 1.5s ease-in both, evGone .01s linear 1.5s both}
@keyframes evShake{
  0%,10%{transform:translateX(0) scale(1)}
  20%{transform:translateX(-3px) scale(1)}30%{transform:translateX(3px) scale(1)}
  40%{transform:translateX(-4px) scale(1.02)}50%{transform:translateX(4px) scale(1.02)}
  60%{transform:translateX(-5px) scale(1.04)}70%{transform:translateX(5px) scale(1.05)}
  80%{transform:translateX(-6px) scale(1.06)}90%{transform:translateX(6px) scale(1.08)}
  100%{transform:translateX(0) scale(1.1)}}
@keyframes evGlow{from{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}to{filter:drop-shadow(0 0 46px rgba(255,255,255,.95)) brightness(1.7)}}
@keyframes evGone{to{opacity:0}}
/* the flash at the moment of change */
.evflash{position:absolute;inset:-40%;border-radius:999px;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.9) 35%,transparent 70%);opacity:0;animation:evFlash .55s ease-out 1.4s both}
@keyframes evFlash{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.6)}}
/* the new form: elastic pop out of the flash */
.evnew{position:absolute;inset:0;opacity:0;animation:evPop .8s cubic-bezier(.2,1.6,.35,1) 1.62s both}
@keyframes evPop{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.12)}75%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
/* celebration furniture */
.evrays{position:absolute;inset:-30%;opacity:0;animation:evRaysIn .5s ease 1.7s both, spin 9s linear 1.7s infinite;
  background:repeating-conic-gradient(from 0deg, rgba(243,234,219,.14) 0deg 9deg, transparent 9deg 24deg);border-radius:999px}
@keyframes evRaysIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.evconf{position:absolute;inset:-10% -6%;pointer-events:none;overflow:visible}
.evconf i{position:absolute;top:-4%;width:9px;height:14px;border-radius:2px;opacity:0;animation:evFall 2.4s ease-in both}
@keyframes evFall{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}100%{opacity:0;transform:translateY(64vh) rotate(560deg)}}
.evplate{opacity:0;animation:evPlate .5s cubic-bezier(.3,1.4,.4,1) 2.15s both;margin-top:6px}
@keyframes evPlate{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.evplate b{display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:30px;color:#F3EADB}
.evplate span{display:inline-block;margin-top:7px;background:var(--pc,#F26F21);color:#fff;font-family:'Jost',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:7px 16px;border:2px solid rgba(255,255,255,.35)}
.evhint{margin-top:16px;font-size:12px;color:rgba(243,234,219,.55);opacity:0;animation:evRaysIn .4s ease 2.6s both}
/* reduced motion: no shake, no flash — straight to the reveal */
.evolve.reduced .evold{display:none}
.evolve.reduced .evflash,.evolve.reduced .evrays{animation:none;opacity:0}
.evolve.reduced .evnew{animation:none;opacity:1}
.evolve.reduced .evplate{animation:none;opacity:1}
.evolve.reduced .evconf i{animation:none}
.evolve.reduced .evhint{animation:none;opacity:1}

/* ---------- the account dashboard ---------- */
.dashwrap{max-width:560px;margin:0 auto;padding:0 20px 70px}
.dhead{display:flex;align-items:center;gap:14px;margin-top:24px}
.dava{width:64px;height:64px;flex:none;background:#fff;border:2px solid var(--line-d);border-radius:50%;padding:7px}
.dava svg{width:100%;height:100%}
.dwho{flex:1;min-width:0}
.dwho b{font-size:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dprov{display:inline-block;margin-top:4px;background:#fff;border:1.5px solid var(--line-d);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;color:var(--soft)}
.dcard{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px 20px 22px;margin-top:16px;box-shadow:0 6px 22px rgba(43,32,23,.05)}
.dk{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}
.drow{display:flex;align-items:center;gap:14px;margin-top:12px}
.dpet{width:74px;height:74px;flex:none}
.dpet svg{width:100%;height:100%}
.dtxt{flex:1;min-width:0}
.dtxt b{font-size:16px;display:block}
.dtxt span{font-size:12.5px;color:var(--soft);display:block;margin-top:3px}
.dnote{font-size:12px;color:var(--faint);margin-top:12px}
.dlinks{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.dlinks a{font-size:12.5px;font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.dbtn{display:block;text-align:center;margin-top:14px;text-decoration:none}
.dcoins{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dbig{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.dbig b{font-size:44px;line-height:1;color:#fff}
.dbig span{font-size:13.5px;color:rgba(243,234,219,.8);font-weight:600}
.dprompt{background:linear-gradient(135deg,var(--orange),#D95D14);border-color:var(--orange)}
.dspots{list-style:none;margin-top:12px;display:grid;gap:10px}
.dspots li{display:flex;align-items:center;gap:12px}
.dspots i{font-style:normal;font-family:'Jost',sans-serif;font-weight:700;font-size:15px;color:var(--orange);width:18px;text-align:center}
.dspots div{flex:1;min-width:0}
.dspots b{font-size:13.5px;display:block}
.dspots span{font-size:11.5px;color:var(--soft)}
.dgo{flex:none;background:var(--orange);color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:8px 15px;text-decoration:none}
.dgo.alt{background:transparent;color:var(--ink);border:1.5px solid var(--line-d)}