/* =============================================================================
   Chup public site — shared design system (marketing + café pages).
   The logged-out surface, in the customer-app visual language: warm cream ground,
   white/photo cards, orange accent, Poppins. Consumes the --chup-* tokens from
   chup.css. Everything is `pub-`/`pubnav`/`pubfoot` namespaced so it never
   collides with Bootstrap (core.css) which these pages also load.
   Loaded once via partials/public_nav.html (present on every public page).
   ========================================================================== */

/* ---- layout primitives ---- */
.pub-wrap { max-width: 1040px; margin: 0 auto; padding-inline: 1.25rem; }
.pub-sec { padding: 3.5rem 0; }
.pub-sec--tight { padding-top: 0; }
.pub-surface { background: var(--chup-surface); }
.pub-cream { background: var(--chup-bg); }
.pub-sec-head { text-align: center; max-width: 60ch; margin: 0 auto 2.2rem; }
.pub-sec-head h2 { font-family: var(--chup-font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--chup-ink); margin: .5rem 0 .5rem; text-wrap: balance; }
.pub-sec-head p { color: var(--chup-muted); font-size: 1rem; margin: 0; }
.pub-eyebrow { font-family: var(--chup-font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: .72rem; color: var(--chup-primary); margin: 0; }
.pub-eyebrow--ondark { color: #FFB27A; }
.pub-hl { color: var(--chup-primary); background: linear-gradient(transparent 62%, var(--chup-primary-bg) 0); padding: 0 .06em; }
.pub-hl--ondark { color: #fff; background: linear-gradient(transparent 62%, rgba(255,106,0,.55) 0); }

/* ---- pills ---- */
.pub-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--chup-primary-bg); color: var(--chup-primary-700); }
.pub-pill--gold { background: var(--chup-gold-bg); color: var(--chup-gold-600); }
.pub-pill--glass { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.pub-pill-ic { width: 13px; height: 13px; vertical-align: -1px; }

/* ---- buttons ---- */
.pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
  font-family: var(--chup-font-display); font-weight: 800; font-size: .95rem; line-height: 1; text-decoration: none;
  border: 1.5px solid transparent; border-radius: 999px; padding: .8rem 1.4rem; transition: transform .14s ease, box-shadow .18s ease, background .15s ease; }
.pub-btn:hover { transform: translateY(-2px); }
.pub-btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }
.pub-btn--primary { background: var(--chup-primary); color: #fff; box-shadow: var(--chup-shadow-brand); }
.pub-btn--primary:hover { background: var(--chup-primary-600); color: #fff; }
.pub-btn--outline { background: var(--chup-surface); border-color: var(--chup-primary); color: var(--chup-primary); }
.pub-btn--outline:hover { color: var(--chup-primary); }
.pub-btn--ghostw { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; }
.pub-btn--ghostw:hover { color: #fff; background: rgba(255,255,255,.2); }
.pub-btn--soft { background: var(--chup-primary-bg); color: var(--chup-primary-700); }
.pub-btn--soft:hover { background: var(--chup-primary-100); color: var(--chup-primary-700); }
.pub-btn--white { background: #fff; color: var(--chup-primary-700); }
.pub-btn--white:hover { color: var(--chup-primary-700); }
.pub-btn--block { width: 100%; }

/* Google sign-in button (white, real Google mark) */
.pub-gbtn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--chup-font-display); font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: #fff; color: var(--chup-ink); border: 1.5px solid var(--chup-border); border-radius: 999px;
  padding: .95rem 1.5rem; box-shadow: 0 8px 22px rgba(25,26,35,.1); transition: transform .12s ease, box-shadow .18s ease; }
.pub-gbtn:hover { color: var(--chup-ink); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(25,26,35,.16); }
.pub-gbtn--block { width: 100%; }

/* =============================== NAV =============================== */
.pubnav { position: sticky; top: 0; z-index: 40; background: rgba(255,247,238,.9);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--chup-border); }
.pubnav-inner { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; height: 62px;
  display: flex; align-items: center; gap: 1rem; position: relative; }
.pubnav-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.pubnav-brand img { height: 34px; width: auto; display: block; }
.pubnav-kind { font-family: var(--chup-font-display); font-weight: 800; font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--chup-primary-700); background: var(--chup-primary-bg);
  border: 1px solid var(--chup-primary-100); border-radius: 999px; padding: .16rem .55rem; }
.pubnav-links { display: flex; align-items: center; gap: .3rem; margin-left: 1rem; }
.pubnav-links a { font-family: var(--chup-font-display); font-weight: 600; font-size: .9rem; color: var(--chup-ink-700);
  text-decoration: none; padding: .5rem .7rem; border-radius: 9px; white-space: nowrap; transition: background .15s, color .15s; }
.pubnav-links a:hover, .pubnav-links a.is-active { background: var(--chup-primary-bg); color: var(--chup-primary); }
.pubnav-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.pubnav-switch { font-family: var(--chup-font-display); font-weight: 700; font-size: .88rem; color: var(--chup-ink);
  text-decoration: none; white-space: nowrap; padding: .5rem .3rem; }
.pubnav-switch:hover { color: var(--chup-primary); }
.pubnav-cta { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--chup-font-display);
  font-weight: 800; font-size: .9rem; text-decoration: none; border-radius: 999px; padding: .6rem 1.15rem;
  background: var(--chup-primary); color: #fff; box-shadow: var(--chup-shadow-brand); transition: transform .14s ease, background .15s; white-space: nowrap; }
.pubnav-cta:hover { color: #fff; transform: translateY(-2px); background: var(--chup-primary-600); }
.pubnav-burger { display: none; background: none; border: 0; width: 42px; height: 42px; align-items: center;
  justify-content: center; color: var(--chup-ink); font-size: 1.6rem; cursor: pointer; border-radius: 10px; }
.pubnav-burger:hover { background: var(--chup-primary-bg); }
/* Mobile menu = offcanvas (fixed, so it escapes any hero overflow:hidden and
   slides in over everything). Backdrop + right-hand panel. */
.pubnav-ocbd { position: fixed; inset: 0; z-index: 1090; background: rgba(16,12,8,.5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pubnav-ocbd.is-open { opacity: 1; visibility: visible; }
.pubnav-oc { position: fixed; top: 0; right: 0; z-index: 1091; height: 100dvh; width: min(86vw, 320px);
  background: var(--chup-surface); box-shadow: -18px 0 46px rgba(27,42,74,.24);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.pubnav-oc.is-open { transform: translateX(0); }
.pubnav-oc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pubnav-oc-head img { height: 32px; width: auto; display: block; }
.pubnav-oc-close { width: 40px; height: 40px; flex: none; border: 0; cursor: pointer; border-radius: 11px;
  background: var(--chup-primary-bg); color: var(--chup-primary); font-size: 1.5rem; display: grid; place-items: center; }
.pubnav-oc-close:hover { background: var(--chup-primary-100); }
.pubnav-oc-link { font-family: var(--chup-font-display); font-weight: 700; font-size: 1.05rem; color: var(--chup-ink);
  text-decoration: none; padding: .9rem .35rem; border-bottom: 1px solid var(--chup-border); }
.pubnav-oc-link.is-active { color: var(--chup-primary); }
.pubnav-oc-switch { color: var(--chup-primary); font-weight: 800; border-bottom: 0 !important; }
.pubnav-oc-cta { margin-top: auto; padding-top: 1.1rem; }
.pubnav-oc-cta .pubnav-cta { width: 100%; justify-content: center; padding: .95rem 1.1rem; font-size: 1rem; box-shadow: none; }

/* Transparent-over-photo variant — the nav overlays a photographic hero and the
   page content starts underneath it (hero adds its own top padding). */
/* A soft top-down scrim behind the nav so white nav text stays legible over a
   light part of the hero photo (the photo itself still shows below it). */
.pubnav--photo { position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 62%, transparent 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.pubnav--photo .pubnav-links a { color: rgba(255,255,255,.88); }
.pubnav--photo .pubnav-links a:hover, .pubnav--photo .pubnav-links a.is-active { background: rgba(255,255,255,.16); color: #fff; }
.pubnav--photo .pubnav-switch { color: #fff; }
.pubnav--photo .pubnav-burger { color: #fff; }
.pubnav--photo .pubnav-kind { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }

/* Tablets (>=721px) keep the full nav; phones collapse to a burger. Between
   ~720–860 the switch link is hidden to keep links + CTA from crowding. */
@media (max-width: 860px) and (min-width: 721px) {
  .pubnav-switch { display: none; }
  .pubnav-links { gap: .1rem; margin-left: .5rem; }
  .pubnav-links a { padding: .5rem .55rem; }
}
@media (max-width: 720px) {
  .pubnav-links, .pubnav-switch, .pubnav-kind { display: none; }
  .pubnav-burger { display: flex; }
}

/* =============================== PHOTO HERO =============================== */
.pubhero { position: relative; overflow: hidden; color: #fff; background-size: cover; background-position: center; }
.pubhero-in { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 8.5rem 1.25rem 4rem; }
.pubhero h1 { font-family: var(--chup-font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem); color: #fff; margin: 1rem 0 1rem; max-width: 17ch; text-wrap: balance; }
.pubhero .pub-sub { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; max-width: 46ch; margin: 0 0 1.6rem; }
.pubhero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.pubhero-stats { display: flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.pubhero-stat b { display: block; font-family: var(--chup-font-display); font-weight: 800; font-size: 1.7rem; color: #fff; line-height: 1; }
.pubhero-stat span { font-size: .78rem; color: rgba(255,255,255,.72); font-weight: 600; }

/* Light (photo-less) hero — solo centred */
.pubhero-solo { text-align: center; padding: 3.5rem 1.25rem 2.5rem;
  background: radial-gradient(130% 90% at 50% -20%, #FFEFE1 0%, var(--chup-bg) 62%); }
.pubhero-solo h1 { font-family: var(--chup-font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem); color: var(--chup-ink); margin: 1rem auto; max-width: 17ch; text-wrap: balance; }
.pubhero-solo .pub-sub { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--chup-body); max-width: 52ch; margin: 0 auto 1.6rem; }
.pubhero-solo .pubhero-cta { justify-content: center; }

/* =============================== PHOTO BAND + CTA =============================== */
.pubband { position: relative; overflow: hidden; color: #fff; background-size: cover; background-position: center; text-align: center; }
.pubband-in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 4.2rem 1.25rem; }
.pubband h2 { font-family: var(--chup-font-display); font-weight: 800; color: #fff; font-size: clamp(1.6rem, 4vw, 2.25rem); margin: .5rem 0 .6rem; }
.pubband p { color: rgba(255,255,255,.86); font-size: 1rem; margin: 0 auto 1.4rem; max-width: 52ch; }

.pubcta { position: relative; overflow: hidden; color: #fff; text-align: center; background-size: cover; background-position: center; }
.pubcta-in { position: relative; z-index: 2; padding: 4rem 1.25rem; max-width: 640px; margin: 0 auto; }
.pubcta h2 { font-family: var(--chup-font-display); font-weight: 800; color: #fff; font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: 0 0 .7rem; }
.pubcta p { color: rgba(255,255,255,.92); margin: 0 0 1.4rem; font-size: 1rem; }
.pubcta-terms { margin: 1rem 0 0; font-size: .74rem; color: rgba(255,255,255,.82); }
.pubcta-terms a { color: #fff; text-decoration: underline; }
.pubcta-mascot { position: absolute; right: 1.5rem; bottom: 0; width: 118px; height: auto; z-index: 3;
  pointer-events: none; filter: drop-shadow(0 12px 22px rgba(0,0,0,.32)); }
@media (max-width: 680px) { .pubcta-mascot { display: none; } }

/* logo chips (on a dark band) */
.pub-logos { list-style: none; padding: 0; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.pub-logos a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: .45rem .85rem .45rem .45rem;
  border-radius: 999px; font-weight: 700; font-size: .82rem; color: #fff; }
.pub-logos a:hover { background: rgba(255,255,255,.2); color: #fff; }
.pub-logos img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #fff; }

/* "What's on" showcase inside the dark "Out in the wild" band — upcoming events
   (their own banner + logo) + a live-challenge count. */
.pub-wildon { margin-top: 2rem; }
.pub-wildon .pub-eyebrow--ondark { margin-bottom: .8rem; }
.pub-events { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
@media (max-width: 560px) { .pub-events { grid-template-columns: 1fr; } }
.pub-ev { position: relative; overflow: hidden; border-radius: 14px; min-height: 96px; display: flex;
  align-items: flex-end; text-align: left; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(150deg, #6a4a1e, #3c2a10); }
.pub-ev-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-ev-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.72) 100%); }
.pub-ev--plain .pub-ev-scrim { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.4)); }
.pub-ev-live { position: absolute; top: .55rem; right: .55rem; z-index: 3; display: inline-flex; align-items: center;
  gap: .3rem; font-size: .56rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: #E1483B; padding: .2rem .5rem; border-radius: 999px; }
.pub-ev-live b { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; }
.pub-ev-body { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: .6rem; padding: .7rem .8rem; width: 100%; }
.pub-ev-logo { flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.pub-ev-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-ev-tx { min-width: 0; flex: 1; }
.pub-ev-t { display: block; font-weight: 800; font-size: .92rem; color: #fff; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-ev-w { display: block; font-size: .72rem; color: rgba(255,255,255,.9); margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pubband .pub-wildon-ch { margin: 1.8rem auto 0; max-width: none; font-size: .84rem; font-weight: 700;
  color: rgba(255,255,255,.94); display: inline-flex; align-items: center; gap: .4rem; }
.pub-wildon-ch i { color: #E7C86C; font-size: 1.05rem; }

/* =============================== STEPS =============================== */
.pub-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 900px; margin: 0 auto; }
.pub-step { position: relative; overflow: hidden; background: var(--chup-surface); border: 1px solid var(--chup-border);
  border-radius: var(--chup-radius-lg); padding: 1.7rem 1.5rem; box-shadow: 0 6px 18px rgba(27,42,74,.05); }
.pub-step > * { position: relative; z-index: 1; }
.pub-step::after { content: ""; position: absolute; right: -34px; top: -34px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--chup-primary-rgb),.10), transparent 70%); pointer-events: none; }
.pub-step-n { font-family: var(--chup-font-display); font-weight: 800; font-size: 2.1rem; color: var(--chup-primary); line-height: 1; letter-spacing: -.03em; }
.pub-step h3 { font-family: var(--chup-font-display); font-weight: 800; font-size: 1.1rem; color: var(--chup-ink); margin: .75rem 0 .35rem; }
.pub-step p { color: var(--chup-muted); font-size: .93rem; line-height: 1.5; margin: 0; }

/* =============================== FEATURE CARDS =============================== */
.pub-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.pub-fcard { position: relative; overflow: hidden; background: var(--chup-surface); border: 1px solid var(--chup-border);
  border-radius: var(--chup-radius-lg); padding: 1.5rem; box-shadow: 0 6px 18px rgba(27,42,74,.05);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease; --glow: rgba(var(--chup-primary-rgb),.12); }
.pub-fcard > * { position: relative; z-index: 1; }
.pub-fcard::after { content: ""; position: absolute; right: -42px; top: -42px; width: 145px; height: 145px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none; }
.pub-fcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27,42,74,.12); }
.pub-fbar { width: 32px; height: 4px; border-radius: 4px; background: var(--chup-primary); margin-bottom: 1rem; }
.pub-fcard--gold  { --glow: rgba(var(--chup-gold-rgb),.18); } .pub-fcard--gold .pub-fbar  { background: var(--chup-gold); }
.pub-fcard--teal  { --glow: rgba(0,194,209,.15); }           .pub-fcard--teal .pub-fbar  { background: var(--chup-teal); }
.pub-fcard--purple{ --glow: rgba(139,92,246,.15); }          .pub-fcard--purple .pub-fbar{ background: var(--chup-purple); }
.pub-fcard--pink  { --glow: rgba(255,77,166,.15); }          .pub-fcard--pink .pub-fbar  { background: var(--chup-pink); }
.pub-fcard h3 { font-family: var(--chup-font-display); font-weight: 800; font-size: 1.08rem; color: var(--chup-ink); margin: 0 0 .35rem; }
.pub-fcard p { color: var(--chup-muted); font-size: .92rem; line-height: 1.5; margin: 0; }
.pub-more { text-align: center; margin-top: 1.6rem; }
.pub-more a { color: var(--chup-primary); font-weight: 700; text-decoration: none; }
.pub-more a:hover { text-decoration: underline; }

/* =============================== PHONE MOCKUP =============================== */
.pub-showcase { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; max-width: 980px; margin: 0 auto; }
.pub-showcase h2 { font-family: var(--chup-font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--chup-ink); margin: .6rem 0 .7rem; }
.pub-showcase p { color: var(--chup-muted); font-size: 1rem; line-height: 1.55; margin: 0 0 1.2rem; max-width: 38ch; }
.pub-phones { position: relative; min-height: 460px; }
.pub-phone { position: absolute; top: 50%; left: 50%; width: 208px; aspect-ratio: 9 / 19.3; background: #0f1016;
  border-radius: 38px; padding: 9px; box-shadow: 0 36px 74px -26px rgba(27,42,74,.6); }
.pub-phone::after { content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 17px; background: #0f1016; border-radius: 999px; z-index: 4; }
.pub-pscreen { position: relative; width: 100%; height: 100%; border-radius: 29px; overflow: hidden; background: var(--chup-bg); }
.pub-pscreen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-phone--front { transform: translate(-42%, -50%) rotate(3deg); z-index: 2; }
.pub-phone--back { transform: translate(-76%, -52%) rotate(-9deg) scale(.9); z-index: 1; opacity: .94; }
.pub-slot { display: grid; place-items: center; text-align: center; padding: 1.1rem; height: 100%;
  background: var(--chup-primary-bg); border: 2px dashed var(--chup-primary-100); }
.pub-slot span { font-size: .78rem; font-weight: 700; color: var(--chup-primary-700); line-height: 1.6; }

/* =============================== FAQ =============================== */
.pub-faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.pub-faq details { background: var(--chup-surface); border: 1px solid var(--chup-border); border-radius: var(--chup-radius); padding: 0 1.2rem; }
.pub-faq summary { list-style: none; cursor: pointer; font-family: var(--chup-font-display); font-weight: 700;
  font-size: 1rem; color: var(--chup-ink); padding: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--chup-primary); }
.pub-faq details[open] summary::after { content: "\2013"; }
.pub-faq details p { color: var(--chup-body); font-size: .95rem; line-height: 1.6; padding: 0 0 1.1rem; margin: 0; }

/* =============================== PRICING =============================== */
.pub-price-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 760px; margin: 0 auto; }
.pub-price { position: relative; background: var(--chup-surface); border: 1px solid var(--chup-border);
  border-radius: var(--chup-radius-lg); padding: 1.6rem; box-shadow: 0 6px 18px rgba(27,42,74,.05); }
.pub-price--pro { border: 2px solid var(--chup-primary); box-shadow: 0 16px 40px -18px rgba(var(--chup-primary-rgb),.4); }
.pub-price-badge { position: absolute; top: -12px; left: 1.6rem; }
.pub-price h3 { font-family: var(--chup-font-display); font-weight: 800; font-size: 1.15rem; color: var(--chup-ink); margin: 0; }
.pub-price-amt { font-family: var(--chup-font-display); font-weight: 800; font-size: 2.1rem; color: var(--chup-ink); margin: .5rem 0 .1rem; }
.pub-price-amt small { font-size: .9rem; font-weight: 600; color: var(--chup-muted); }
.pub-price ul { list-style: none; padding: 0; margin: 1rem 0 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.pub-price li { display: flex; gap: .7rem; font-size: .92rem; color: var(--chup-body); align-items: flex-start; }
.pub-ck { flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--chup-primary-bg); position: relative; margin-top: 1px; }
.pub-ck::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8px;
  border-right: 2px solid var(--chup-primary); border-bottom: 2px solid var(--chup-primary); transform: rotate(45deg); }

/* =============================== DIRECTORY =============================== */
.pub-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.6rem; }
.pub-chip { padding: .5rem .95rem; border-radius: 999px; font-family: var(--chup-font-display); font-size: .85rem;
  font-weight: 700; border: 1px solid var(--chup-border); background: var(--chup-surface); color: var(--chup-ink);
  cursor: pointer; text-decoration: none; }
.pub-chip.is-active, .pub-chip:hover { background: var(--chup-primary); color: #fff; border-color: var(--chup-primary); }
.pub-dir-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.pub-dir-card { display: flex; gap: .8rem; align-items: center; background: var(--chup-surface);
  border: 1px solid var(--chup-border); border-radius: var(--chup-radius); padding: 1rem; text-decoration: none;
  transition: transform .14s ease, box-shadow .16s ease; }
.pub-dir-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,42,74,.1); }
.pub-dir-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--chup-primary-bg);
  display: grid; place-items: center; color: var(--chup-primary); font-weight: 800; flex: none; }
/* text column must be allowed to shrink so the name/meta can ellipsize (not push the card wider) */
.pub-dir-text { flex: 1 1 auto; min-width: 0; }
.pub-dir-card h3 { font-family: var(--chup-font-display); font-weight: 800; font-size: .98rem; color: var(--chup-ink);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-dir-card p { font-size: .8rem; color: var(--chup-muted); margin: .15rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-dir-tag { flex: none; align-self: flex-start; font-size: .6rem; font-weight: 800; letter-spacing: .02em;
  padding: .2rem .55rem; border-radius: 999px; background: var(--chup-gold-bg); color: var(--chup-gold-600); white-space: nowrap; }
.pub-dir-tag--popup { background: var(--chup-primary-bg); color: var(--chup-primary-700); }

/* =============================== FOOTER =============================== */
.pubfoot { background: var(--chup-ink); color: #fff; padding: 3rem 1.25rem 1.7rem; }
.pubfoot-in { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.6rem; }
.pubfoot-brand { font-family: var(--chup-font-display); font-weight: 800; font-size: 1.4rem; color: #fff; }
.pubfoot-brand img { height: 40px; }
.pubfoot-tag { font-size: .85rem; color: rgba(255,255,255,.66); margin: .7rem 0 0; max-width: 34ch; line-height: 1.55; }
.pubfoot h4 { font-family: var(--chup-font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin: 0 0 .8rem; }
.pubfoot-col a { display: block; color: rgba(255,255,255,.82); text-decoration: none; font-size: .9rem; margin-bottom: .6rem; }
.pubfoot-col a:hover { color: #fff; }
.pubfoot-bar { max-width: 1040px; margin: 1.8rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.6); }
.pubfoot-soc { display: flex; gap: .6rem; }
.pubfoot-soc a { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.pubfoot-soc a:hover { background: rgba(255,255,255,.2); }
.pubfoot-soc svg { width: 17px; height: 17px; fill: #fff; }

/* =============================== DISCOVERY / DIRECTORY =============================== */
/* slim top bar (search + List/Map toggle) — shared by both views */
.pub-dbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--chup-border); background: var(--chup-bg); flex-wrap: wrap; }
/* On small phones the search takes its own full-width row and the toggle drops below, right-aligned. */
@media (max-width: 560px) {
  .pub-dbar .pub-dsearch { flex: 1 1 100%; }
  .pub-dbar .pub-seg { margin-left: auto; }
}
.pub-dsearch { flex: 1; position: relative; }
.pub-dsearch input { width: 100%; font: inherit; font-size: 14px; padding: 11px 16px 11px 42px; border-radius: 999px; border: 1.5px solid var(--chup-border); background: #fff; color: var(--chup-ink); }
.pub-dsearch input::placeholder { color: var(--chup-muted); }
.pub-dsearch svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--chup-muted); }
.pub-seg { flex: none; display: inline-flex; background: var(--chup-surface); border: 1px solid var(--chup-border); border-radius: 10px; overflow: hidden; }
.pub-seg button { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 14px; border: 0; background: none; color: var(--chup-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pub-seg button.on { background: var(--chup-primary-bg); color: var(--chup-primary); }
.pub-seg svg { width: 14px; height: 14px; }

.pub-dlabel { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.pub-dlabel h2 { font-family: var(--chup-font-display); font-weight: 800; font-size: 1.1rem; color: var(--chup-ink); margin: 0; }
.pub-dlabel .pub-eyebrow { margin: 0; }

/* tile grid + tile (mirrors the customer-app card) */
.pub-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.pub-ptile { position: relative; overflow: hidden; border-radius: 18px; min-height: 172px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; color: #fff; text-decoration: none; --b1: #2b3550; --b2: #55617f;
  background: radial-gradient(120% 90% at 80% -10%, rgba(255,255,255,.16), transparent 55%), linear-gradient(150deg, var(--b1), var(--b2));
  box-shadow: 0 8px 20px -10px rgba(27,42,74,.5); transition: transform .16s ease, box-shadow .18s ease; }
.pub-ptile:hover { transform: translateY(-4px); box-shadow: 0 20px 42px -16px rgba(27,42,74,.55); }
.pub-ptile[data-cat="coffee"]     { --b1: #2c1d12; --b2: #6b4426; } .pub-ptile[data-cat="boba"] { --b1: #34215a; --b2: #6f4f9e; }
.pub-ptile[data-cat="ramen"]      { --b1: #4a1c1c; --b2: #8f3a2e; } .pub-ptile[data-cat="bakery"]     { --b1: #6a4410; --b2: #b3822f; }
.pub-ptile[data-cat="dessert"]    { --b1: #7a2a52; --b2: #c25a8f; }
.pub-ptile.has-photo { background-image: linear-gradient(180deg, rgba(16,16,24,.26) 0%, rgba(16,16,24,.4) 45%, rgba(16,16,24,.78) 100%), var(--lc-photo); background-size: cover; background-position: center; }
svg.pub-ptile-wm { position: absolute; right: -10px; top: -14px; width: 104px; height: 104px; opacity: .15; fill: #fff; z-index: 0; }
.pub-ptile > *:not(.pub-ptile-wm):not(.pub-ptile-head) { position: relative; z-index: 2; }
.pub-ptile-head { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: flex-start; justify-content: space-between; z-index: 2; }
.pub-plogo { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--b2); display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.28); overflow: hidden; flex: none; }
.pub-plogo img { width: 100%; height: 100%; object-fit: cover; }
.pub-pbadge { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--chup-ink); }
.pub-pbadge.gold { color: var(--chup-gold-600); padding: 4px 7px; } .pub-pbadge.pop { color: var(--chup-primary-700); }
.pub-pbadge svg { width: 13px; height: 13px; display: block; }
.pub-pname { font-family: var(--chup-font-display); font-weight: 800; font-size: 16px; color: #fff; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.pub-pmeta { font-size: 11.5px; color: rgba(255,255,255,.88); margin: 3px 0 9px; text-shadow: 0 1px 5px rgba(0,0,0,.35); }
.pub-phook { align-self: flex-start; font-size: 11px; font-weight: 800; color: #fff; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 4px 10px; }

/* map view */
.pub-maplayout { display: grid; grid-template-columns: 1fr 320px; height: 560px; }
.pub-map { position: relative; background: var(--chup-bg); }
.pub-maprail { border-left: 1px solid var(--chup-border); background: var(--chup-surface); overflow-y: auto; }
.pub-mrail-head { padding: 13px 16px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--chup-muted); border-bottom: 1px solid var(--chup-border); position: sticky; top: 0; background: var(--chup-surface); }
.pub-mrow { display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--chup-border); text-decoration: none; }
.pub-mrow:hover { background: var(--chup-bg); }
.pub-mrow-logo { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; overflow: hidden; --b1:#2b3550; --b2:#55617f; background: linear-gradient(150deg,var(--b1),var(--b2)); }
.pub-mrow-logo[data-cat="coffee"]{ --b1:#2c1d12; --b2:#6b4426; } .pub-mrow-logo[data-cat="boba"]{ --b1:#34215a; --b2:#6f4f9e; } .pub-mrow-logo[data-cat="ramen"]{ --b1:#4a1c1c; --b2:#8f3a2e; } .pub-mrow-logo[data-cat="bakery"]{ --b1:#6a4410; --b2:#b3822f; } .pub-mrow-logo[data-cat="dessert"]{ --b1:#7a2a52; --b2:#c25a8f; }
.pub-mrow-logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-mrow-b { min-width: 0; flex: 1; } .pub-mrow-b h4 { margin: 0; font-family: var(--chup-font-display); font-size: 14px; font-weight: 800; color: var(--chup-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pub-mrow-b p { margin: 1px 0 0; font-size: 11.5px; color: var(--chup-muted); }
.pub-mrow-hook { flex: none; font-size: 10px; font-weight: 800; color: var(--chup-primary-700); background: var(--chup-primary-bg); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
/* Chup map pin (divIcon) */
.dir-pin { background: transparent; border: 0; }
.dir-pin-inner { width: 34px; height: 34px; border-radius: 50%; background: var(--chup-primary); border: 2.5px solid #fff; box-shadow: 0 5px 13px rgba(0,0,0,.3); display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; font-size: 11px; }
.dir-pin-inner img { width: 100%; height: 100%; object-fit: cover; }

/* =============================== CAFÉ PUBLIC PAGE =============================== */
.pubcafe-hero { --b1: #2b3550; --b2: #55617f; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 82% -10%, rgba(255,255,255,.16), transparent 55%), linear-gradient(150deg, var(--b1), var(--b2)); }
.pubcafe-hero[data-cat="cafe"]       { --b1: #2c1d12; --b2: #6b4426; }
.pubcafe-hero[data-cat="bubble_tea"] { --b1: #34215a; --b2: #6f4f9e; }
.pubcafe-hero[data-cat="restaurant"] { --b1: #4a1c1c; --b2: #8f3a2e; }
.pubcafe-hero[data-cat="bakery"]     { --b1: #6a4410; --b2: #b3822f; }
.pubcafe-hero[data-cat="dessert"]    { --b1: #7a2a52; --b2: #c25a8f; }
.pubcafe-hero[data-cat="other"]      { --b1: #2f5a4a; --b2: #4a9178; }
.pubcafe-hero.has-card-photo { background-image: linear-gradient(160deg, rgba(16,16,24,.34) 0%, rgba(16,16,24,.2) 42%, rgba(16,16,24,.72) 100%), var(--lc-photo); background-size: cover; background-position: center; }
svg.pubcafe-hero-wm { position: absolute; right: -12px; top: -22px; width: 150px; height: 150px; opacity: .12; fill: #fff; z-index: 1; transform: rotate(-8deg); }
.pubcafe-hero-in { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 6.4rem 1.25rem 2.4rem;
  display: flex; align-items: center; gap: 1.15rem; }
.pubcafe-logo { width: 82px; height: 82px; border-radius: 20px; object-fit: cover; background: #fff; flex: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.28); display: grid; place-items: center;
  font-family: var(--chup-font-display); font-weight: 800; font-size: 2rem; color: var(--b2); }
.pubcafe-id { min-width: 0; }
.pubcafe-name { font-family: var(--chup-font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 5vw, 2.4rem); color: #fff; margin: 0; line-height: 1.08; }
.pubcafe-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.pubcafe-desc { font-size: 1.02rem; line-height: 1.65; color: var(--chup-body); margin: 0 0 1.6rem; max-width: 60ch; }
.pubcafe-desc strong { color: var(--chup-ink); }
.pubcafe-split { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
.pubcafe-col-title { font-family: var(--chup-font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: .72rem; color: var(--chup-primary); margin: 0 0 .8rem; }
.pubcafe-col-title.mt { margin-top: 1.6rem; }
/* rewards ladder */
.pub-ladder { display: flex; flex-direction: column; gap: .6rem; }
.pub-rung { display: flex; align-items: center; gap: .8rem; background: var(--chup-surface); border: 1px solid var(--chup-border); border-radius: 14px; padding: .8rem .95rem; }
.pub-rung-n { width: 40px; height: 40px; border-radius: 12px; background: var(--chup-gradient-warm); color: #fff; flex: none;
  display: grid; place-items: center; font-family: var(--chup-font-display); font-weight: 800; }
.pub-rung h3 { font-family: var(--chup-font-display); font-weight: 800; font-size: .98rem; color: var(--chup-ink); margin: 0; }
.pub-rung p { font-size: .82rem; color: var(--chup-muted); margin: .1rem 0 0; }
/* hours */
.pub-hours { background: var(--chup-surface); border: 1px solid var(--chup-border); border-radius: var(--chup-radius); overflow: hidden; }
.pub-hr { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; font-size: .9rem; border-top: 1px solid var(--chup-border); }
.pub-hr:first-child { border-top: 0; }
.pub-hr b { color: var(--chup-ink); font-weight: 700; }
.pub-hr span { color: var(--chup-body); text-align: right; }
.pubcafe-note { font-size: .82rem; color: var(--chup-muted); margin: .6rem 0 0; }
/* location / directions */
.pub-loc { display: flex; align-items: flex-start; gap: .6rem; background: var(--chup-surface); border: 1px solid var(--chup-border); border-radius: var(--chup-radius); padding: 1rem 1.1rem; }
.pub-loc i { flex: none; font-size: 1.2rem; color: var(--chup-primary); margin-top: .1rem; }
.pub-loc-addr { font-weight: 700; color: var(--chup-ink); font-size: .92rem; line-height: 1.4; }
.pub-dir { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-weight: 700; font-size: .86rem; color: var(--chup-primary); text-decoration: none; }
.pub-dir:hover { text-decoration: underline; }
/* pop-up appearances */
.pub-appear { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.pub-appear li { border: 1px solid var(--chup-border); border-radius: var(--chup-radius); padding: .9rem 1rem; background: var(--chup-surface); }
.pub-appear li.is-live { border-color: var(--chup-primary); background: var(--chup-primary-bg); }
.pub-appear-place { font-size: .98rem; font-weight: 800; color: var(--chup-ink); }
.pub-appear-live { font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: var(--chup-primary); color: #fff; margin-left: .4rem; }
.pub-appear-when { margin: .3rem 0 0; font-size: .88rem; font-weight: 700; color: var(--chup-body); }
.pub-appear-sub { margin: .15rem 0 0; font-size: .84rem; color: var(--chup-muted); }
/* solid gradient CTA (café join) */
.pubcta--solid { background: var(--chup-gradient); }
.pubcta--solid .pubcta-in { padding: 3rem 1.5rem; }

/* =============================== RESPONSIVE =============================== */
@media (min-width: 700px) {
  .pub-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pub-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pub-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-price-grid { grid-template-columns: 1fr 1fr; }
  .pub-steps { grid-template-columns: repeat(3, 1fr); }
  .pub-showcase { grid-template-columns: 1fr 1fr; }
  .pubcafe-split { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .pub-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .pub-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .pub-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pub-maplayout { grid-template-columns: 1fr; height: auto; }
  .pub-map { height: 340px; }
  .pub-maprail { max-height: 340px; border-left: 0; border-top: 1px solid var(--chup-border); }
}
@media (max-width: 699px) {
  .pub-phone--back { display: none; }
  .pub-phone--front { transform: translate(-50%, -50%) rotate(0); }
  .pub-phones { min-height: 500px; }
  .pubfoot-in { grid-template-columns: 1fr 1fr; }
}