:root{
  --navy:#0a1628; --red:#dc1e20; --red-dark:#b0181a; --blue:#3fa7de; --blue-dark:#2b7fb0; --gold:#F4A261;
  --ink:#1a1a2e; --gray-100:#f4f5f7; --gray-200:#e9eaed; --gray-500:#8a8f98; --gray-700:#4a4f58;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.10);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ===== Nav — Ringer-style: compact top bar + persistent horizontally-
   scrolling pill row, single hamburger-triggered mega-menu shared by mobile
   and desktop instead of two separately-maintained menus. Modeled directly
   on theringer.com's own top-bar-plus-pill-row pattern (fetched live
   before building this, not guessed from memory). ===== */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-200);}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.nav-logo img{height:34px;width:auto;}
.nav-logo b{font-size:17px;letter-spacing:-.2px;color:#3fa7de;text-transform:uppercase;}
.nav-logo b span{color:var(--red);}

/* ===== Search box ===== */
.nav-search{position:relative;flex:1 1 320px;max-width:400px;margin:0 4px;}
.nav-search input{width:100%;padding:8px 14px;border-radius:999px;border:1px solid var(--gray-200);
  background:var(--gray-100);font-size:13.5px;font-family:inherit;color:var(--ink);}
.nav-search input:focus{outline:none;border-color:var(--blue);background:#fff;}
.nav-search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
  border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-md);max-height:340px;overflow-y:auto;z-index:60;}
.nav-search-results.open{display:block;}
.nav-search-results a{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;text-decoration:none;
  color:var(--ink);font-size:13.5px;border-bottom:1px solid var(--gray-100);}
.nav-search-results a:last-child{border-bottom:none;}
.nav-search-results a:hover{background:var(--gray-100);}
.nav-search-results .r-name{font-weight:600;}
.nav-search-results .r-meta{color:var(--gray-500);font-size:12px;white-space:nowrap;}
@media (max-width:560px){.nav-search{display:none;}}

/* ===== Menu trigger — ALWAYS visible, mobile and desktop alike, since it's
   now the single entry point to the full site map rather than a mobile-only
   fallback. ===== */
.nav-menu-trigger{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--gray-200);background:#fff;cursor:pointer;font-family:inherit;font-size:13.5px;
  font-weight:700;color:var(--ink);flex:0 0 auto;}
.nav-menu-trigger:hover{background:var(--gray-100);}
.nav-menu-trigger .trigger-icon{display:flex;flex-direction:column;gap:3px;}
.nav-menu-trigger .trigger-bar{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;}

/* ===== Persistent horizontal pill row — the "sub menu below" with swipe /
   side-scroll for overflow, exactly the pattern requested. Same markup,
   same behavior, on every screen size — no separate mobile version to keep
   in sync. ===== */
.nav-pills-scroll{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:0 20px 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.nav-pills-scroll::-webkit-scrollbar{display:none;}
.nav-pills-scroll a{flex:0 0 auto;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--gray-700);text-decoration:none;background:var(--gray-100);}
.nav-pills-scroll a:hover{background:var(--gray-200);}
.nav-pills-scroll a.active{background:var(--ink);color:#fff;}

/* ===== Mega-menu overlay — one panel, shared by mobile and desktop.
   Responsive column count via auto-fit grid means the SAME markup wraps to
   1-2 columns on a phone and up to 5 on a laptop without any separate
   mobile-specific HTML. ===== */
.mega-menu-overlay{display:none;position:fixed;inset:0;background:rgba(10,22,40,.55);z-index:200;
  padding:20px;}
.mega-menu-overlay.open{display:flex;align-items:flex-start;justify-content:center;}
.mega-menu-panel{background:#fff;border-radius:20px;max-width:900px;width:100%;max-height:88vh;
  overflow-y:auto;padding:24px 28px 32px;margin-top:40px;}
.mega-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--gray-200);}
.mega-menu-close{background:var(--gray-100);border:none;border-radius:50%;width:36px;height:36px;
  font-size:16px;cursor:pointer;color:var(--gray-700);}
.mega-menu-close:hover{background:var(--gray-200);}
.mega-menu-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;}
.mega-menu-col h5{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);margin:0 0 10px;}
.mega-menu-col a{display:block;font-size:14.5px;padding:6px 0;color:var(--ink);text-decoration:none;}
.mega-menu-col a:hover{color:var(--blue-dark);}
@media (max-width:600px){
  .mega-menu-panel{margin-top:0;border-radius:0;max-height:100vh;height:100vh;}
  .nav-top{padding:10px 14px;gap:8px;}
  .nav-menu-trigger{padding:9px 12px;}
  .nav-menu-trigger .trigger-label{display:none;}
}

/* ===== Breadcrumb ===== */
.breadcrumb{max-width:1100px;margin:16px auto 0;padding:0 20px;font-size:13px;color:var(--gray-500);}
.breadcrumb a{color:var(--gray-500);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ===== Hero ===== */
.day-hero{position:relative;padding:40px 20px 30px;text-align:center;color:#fff;overflow:hidden;
  background:linear-gradient(-45deg, var(--navy), var(--red), var(--blue), var(--gold));
  background-size:400% 400%;animation:gradientShift 18s ease infinite;}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* ===== Real hero photography — once a page has one of the illustrated
   banner images, this overrides the animated gradient entirely. The dark
   scrim gradient on top is doing real legibility work here: several of
   these banners are genuinely busy (a full bar scene, a detailed food
   close-up), so white H1 text needs real contrast underneath it, not just
   a thin darkening. Deliberately NOT applying the gradient animation to
   these — a moving background under a static photo looks broken, not
   lively, since the photo itself doesn't move with it. */
.day-hero.has-photo{
  animation:none;
  background-image:linear-gradient(160deg, rgba(10,22,40,.78), rgba(10,22,40,.42) 55%, rgba(10,22,40,.6)), var(--hero-photo);
  background-size:cover;background-position:center;
}

/* ===== Landmark banner element — a large illustrated landmark sitting
   inside the animated gradient hero, Ringer-style: bold, a little
   oversized, bleeding toward one edge rather than centered and tidy.
   `mix-blend-mode:luminosity` lets the moving gradient colors show through
   the artwork instead of the PNG just sitting flatly on top of it, so the
   landmark feels genuinely integrated with the color animation rather than
   pasted on as an afterthought. ===== */
.day-hero-landmark{position:absolute;top:50%;right:-40px;transform:translateY(-50%);
  width:clamp(220px,28vw,380px);height:auto;opacity:.85;mix-blend-mode:luminosity;
  filter:brightness(1.4) contrast(1.1);pointer-events:none;z-index:0;}
.day-hero-landmark.left{right:auto;left:-40px;}
.day-hero > *:not(.day-hero-landmark){position:relative;z-index:1;}
@media (max-width:700px){
  .day-hero-landmark{width:140px;opacity:.5;right:-20px;}
}
@media (max-width:480px){
  .day-hero-landmark{display:none;}
}
.day-hero h1{font-size:clamp(28px,4vw,42px);margin:0 0 10px;font-weight:800;letter-spacing:-.5px;}
.day-hero .lede{max-width:640px;margin:0 auto;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);}
.day-hero .stat-row{margin-top:18px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.day-hero .stat{font-size:13px;color:rgba(255,255,255,.85);}
.day-hero .stat b{display:block;font-size:22px;font-weight:800;color:#fff;}

/* ===== Day switcher / legend ===== */
.day-switcher{max-width:1100px;margin:22px auto 0;padding:0 20px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.day-switcher a{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;background:var(--gray-100);color:var(--gray-700);}
.day-switcher a.active{background:var(--ink);color:#fff;}
.day-switcher a:hover:not(.active){background:var(--gray-200);}
.cat-legend{max-width:1100px;margin:18px auto 0;padding:0 20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.cat-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gray-700);background:var(--gray-100);padding:6px 12px;border-radius:999px;}
.cat-legend .swatch{width:9px;height:9px;border-radius:50%;}

/* ===== Sections / carousels ===== */
main{max-width:1100px;margin:0 auto;padding:28px 20px 10px;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:34px 0 14px;}
.section-head h2{font-size:19px;font-weight:800;margin:0;}
.section-head .count{color:var(--gray-500);font-weight:600;font-size:14px;}
.carousel-wrap{position:relative;}
.carousel-nav{display:flex;gap:8px;}
.carousel-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--gray-200);background:#fff;cursor:pointer;
  font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);color:var(--gray-700);}
.carousel-nav button:hover{background:var(--gray-100);}
.carousel-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .card{scroll-snap-align:start;flex:0 0 260px;}
@media (max-width:520px){ .carousel-track .card{flex-basis:78vw;} }

/* ===== Cards (colorful, tinted per category) ===== */
.card{border:1px solid rgba(0,0,0,.04);border-radius:16px;padding:16px;
  background:linear-gradient(160deg, var(--tint-a,#f4f5f7), #ffffff);
  box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px var(--tint-shadow, rgba(0,0,0,.18));}
.card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;}
.card h3{font-size:16px;margin:0;font-weight:700;}
.card .badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;padding:3px 8px;border-radius:999px;white-space:nowrap;background:var(--tint-solid,#868e96);}
.card .special{font-size:14px;color:var(--ink);margin:4px 0 8px;font-weight:600;}
.card .meta{font-size:12.5px;color:var(--gray-500);display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px;}
.card .verified{color:#2b8a3e;font-weight:600;}
.card .unverified{color:var(--gray-500);}
.card .actions{display:flex;gap:8px;flex-wrap:wrap;}
.card .actions a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--blue-dark);
  border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.7);padding:6px 10px;border-radius:8px;}
.card .actions a:hover{background:#fff;}
.empty-note{color:var(--gray-500);font-size:14px;padding:20px;text-align:center;}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0;}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--gray-100);}
.photo-caption{font-size:11.5px;color:var(--gray-500);margin-top:4px;}
.google-photo-credit{grid-column:1/-1;font-size:11px;color:var(--gray-500);margin-top:-4px;}

/* ===== Gems teaser ===== */
.gems-teaser{background:var(--gray-100);border-radius:16px;padding:20px;margin-top:32px;}
.gems-teaser h2{font-size:16px;margin:0 0 4px;}
.gems-teaser p.sub{font-size:13px;color:var(--gray-500);margin:0 0 14px;}

/* ===== Glow buttons (original design, inspired by vibrant hover/shadow treatments) ===== */
.glow-btn{position:relative;border:none;border-radius:14px;padding:13px 20px;font-family:inherit;font-weight:700;
  font-size:14px;cursor:pointer;color:#fff;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--c1,#dc1e20),var(--c2,#F4A261));
  box-shadow:0 6px 18px -6px var(--glow,rgba(220,30,32,.5));
  transition:transform .18s ease, box-shadow .18s ease;text-decoration:none;}
.glow-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px var(--glow,rgba(220,30,32,.55));}
.glow-btn:active{transform:translateY(0);}
.glow-btn.outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--gray-200), 0 2px 8px rgba(0,0,0,.04);}
.glow-btn.outline:hover{box-shadow:inset 0 0 0 1.5px var(--gray-500), 0 6px 16px rgba(0,0,0,.08);}

/* ===== Content block / link grid ===== */
.content-block{margin-top:40px;padding-top:24px;border-top:1px solid var(--gray-200);}
.content-block h2{font-size:19px;font-weight:800;margin:0 0 10px;}
.content-block p{font-size:14.5px;line-height:1.7;color:var(--gray-700);max-width:760px;}
.link-grid{margin-top:36px;}
.link-grid h2{font-size:16px;font-weight:800;margin:0 0 12px;}
.link-grid .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;}
.link-grid .cols div h5{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin:0 0 8px;}
.link-grid .cols div a{display:block;font-size:13.5px;padding:3px 0;text-decoration:none;color:var(--ink);}
.link-grid .cols div a:hover{color:var(--blue-dark);text-decoration:underline;}

/* ===== Business page ===== */
.biz-hero{position:relative;padding:36px 20px;background:linear-gradient(160deg,var(--tint-a,#f4f5f7),#fff);border-bottom:1px solid var(--gray-200);}

/* ===== Business-page landmark scene — deliberately subtle, NOT a bold
   full-strength photo like the day-hero treatment. Business pages use dark
   text on a light background (unlike day pages' white-on-dark), so a rich,
   detailed illustration at full opacity would fight the text for
   attention and hurt legibility across 900+ pages. Sitting the scene at
   low opacity *behind* the existing light gradient keeps every business
   page's text exactly as readable as before, while still giving each page
   a distinct, colorful personality instead of a flat solid tint. */
.biz-hero.has-scene{
  background-image:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.93)), var(--scene-img);
  background-size:cover;background-position:center;
}
.biz-hero-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start;}
.biz-title-block{flex:1 1 560px;min-width:0;}
.biz-title-block h1{font-size:clamp(26px,3.4vw,36px);margin:0 0 6px;font-weight:800;}
.biz-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--gray-700);margin-bottom:10px;}
.biz-sub .badge{font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:999px;background:var(--tint-solid,#868e96);}
.biz-address{font-size:13.5px;color:var(--gray-700);margin-bottom:10px;}
.biz-intro-headline{font-size:16px;font-weight:800;color:var(--gray-700);margin:0 0 12px;line-height:1.4;letter-spacing:-.1px;}
.coupon-callout{background:#fff7e6;border:1px solid #f1d38a;border-radius:12px;padding:10px 14px;margin-top:12px;font-size:13.5px;color:#6b4e00;}
.contribute-box{margin-top:16px;background:var(--gray-100);border-radius:14px;padding:18px;}

/* ===== Accordion — Suggest a Special, Nominate a Gem, Add a Photo all
   start collapsed so the form doesn't clutter the page for visitors who
   have no intention of filling it out; click the header to expand. ===== */
.cs-accordion-head{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:left;}
.cs-accordion-head h2{margin:0;}
.cs-accordion-head-sm{font-size:14.5px;font-weight:700;color:var(--ink);}
.cs-accordion-icon{font-size:20px;font-weight:700;color:var(--gray-500);flex:0 0 auto;
  transition:transform .2s;line-height:1;}
.cs-accordion.open .cs-accordion-icon{transform:rotate(45deg);}
.cs-accordion-body{display:none;margin-top:12px;}
.cs-accordion.open .cs-accordion-body{display:block;}
.cs-gate p{margin:0;font-size:13.5px;color:var(--gray-700);}
.link-btn{background:none;border:none;color:var(--blue-dark);font-weight:700;text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit;padding:0;}
#csPhotoForm, #csSpecialForm{display:flex;flex-direction:column;gap:8px;}
#csPhotoForm input[type="file"]{font-size:13px;}
#csPhotoForm input, #csSpecialForm input, #csSpecialForm textarea{padding:9px 12px;border-radius:8px;border:1px solid var(--gray-200);font-size:13.5px;font-family:inherit;}
.cs-day-picker{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;background:#fff;border-radius:8px;padding:10px;}
.cs-day-picker label{display:flex;align-items:center;gap:4px;}
.cs-time-row{display:flex;gap:14px;font-size:12.5px;}
.cs-time-row label{display:flex;align-items:center;gap:6px;}
.cs-time-row input{padding:6px 8px;}
.cs-contribute-status{font-size:12.5px;color:var(--red);margin:8px 0 0;min-height:16px;}
.cs-contribute-note{font-size:11.5px;color:var(--gray-500);margin:4px 0 0;}
.stars{color:#f1a208;font-size:15px;letter-spacing:1px;}
.biz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.trust-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.trust-badges span{font-size:11.5px;font-weight:600;background:#fff;border:1px solid var(--gray-200);padding:4px 10px;border-radius:999px;color:var(--gray-700);}
.upvote-box{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:18px 20px;min-width:200px;text-align:center;box-shadow:var(--shadow-sm);}
.upvote-box .num{font-size:30px;font-weight:800;color:var(--ink);}
.upvote-box .lbl{font-size:12.5px;color:var(--gray-500);margin-bottom:12px;}

/* ===== Compact upvote box — was 4 full-width stacked buttons plus a large
   stat number, taking up a lot of vertical space next to a much taller
   About-section-having title column. Squeezed the buttons into a 2x2 grid
   and shrunk the stat, so the box reads as a compact action panel instead
   of a second column stretching the whole page taller than it needs to. ===== */
.upvote-box-compact{width:260px;flex:0 0 260px;padding:16px 18px;}

/* ===== Side column — wraps the upvote box and the new specials mini-box
   together so they stack as one column beside the title/description, not
   as a third loose flex sibling. ===== */
.biz-side-col{display:flex;flex-direction:column;gap:14px;width:260px;flex:0 0 260px;}
.biz-side-col .upvote-box-compact{width:100%;}

/* ===== Specials mini-box — the actual specials cards, moved out of the
   full-width carousel further down the page and placed right beside the
   description instead, where they're immediately visible. Reuses the same
   card_html() markup (so the Details modal keeps working identically) but
   restyled to stack full-width and compact instead of scrolling horizontally. ===== */
.specials-mini-box{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow-sm);}
.specials-mini-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.specials-mini-head h3{font-size:14px;margin:0;}
.specials-mini-head .count{font-size:12px;color:var(--gray-500);font-weight:600;}
.specials-mini-list{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;}
.specials-mini-list .card{width:100%;flex:1 1 auto;min-width:0;scroll-snap-align:none;padding:10px 12px;font-size:12.5px;}
.specials-mini-list .card .top-row{font-size:13px;}
.specials-mini-list .card .meta{font-size:11px;}
.uvb-row{margin-bottom:10px;}
.uvb-stat .num{font-size:22px;margin-bottom:0;}
.uvb-stat .lbl{font-size:11px;margin-bottom:0;line-height:1.3;}
.uvb-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.uvb-btn-grid .glow-btn{width:100%;justify-content:center;font-size:12px;padding:9px 8px;white-space:nowrap;}
.upvote-box-compact .claim-banner, .upvote-box-compact .verified-badge{margin-top:12px;font-size:12px;padding:10px 12px;}

/* ===== About, now inline in the hero title column instead of a separate
   content-block further down the page — first thing visible after the
   address/badges, no scroll required. ===== */
.biz-about-inline{margin-top:14px;}
.biz-about-inline p{font-size:14px;color:var(--gray-700);line-height:1.6;margin:0 0 12px;max-width:62ch;}
.biz-about-inline p:last-child{margin-bottom:0;}
.review-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gray-200);padding:14px 0;}
.review-row:last-child{border-bottom:none;}
.review-row .who{font-weight:700;font-size:14px;}
.review-row .txt{font-size:13.5px;color:var(--gray-700);margin-top:4px;max-width:600px;}
.claim-banner{background:#fff7e6;border:1px solid #f1d38a;border-radius:14px;padding:16px 18px;margin-top:18px;font-size:13.5px;color:#6b4e00;}
.verified-badge{background:#eef7ee;border:1px solid #a8d9ae;border-radius:14px;padding:12px 18px;margin-top:18px;
  font-size:13.5px;font-weight:700;color:#1f9d55;display:inline-flex;align-items:center;gap:6px;}

/* ===== Closed-business banner — full width, impossible to miss, sits above
   everything else in the hero. Pages for inactive businesses are still
   generated (not deleted) so old links and search results don't 404, but a
   visitor should never land here without immediately knowing the place is
   closed — silently rendering a closed business exactly like an open one
   was a real, sitewide gap this banner closes. ===== */
.closed-banner{background:#fce8e9;border:1px solid #e5a3a7;color:#8a1c22;font-weight:700;font-size:13.5px;
  text-align:center;padding:12px 20px;border-radius:12px;max-width:1180px;margin:0 auto 16px;}

/* ===== At a Glance block — surfaces rating, gem type, price tier, "known for" ===== */
.at-a-glance{margin:14px 0;padding:14px 16px;background:var(--gray-100);border-radius:12px;}
.glance-item{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.glance-stars{color:var(--gold);letter-spacing:1px;}
.glance-src{font-size:11.5px;font-weight:600;color:var(--gray-500);margin-left:2px;}
.glance-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.glance-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fff4e0;color:#8a5a00;
  display:inline-flex;align-items:center;gap:4px;}
.glance-chip-icon{width:12px;height:12px;object-fit:contain;}
.glance-chip.glance-vibes{background:#eef7ee;color:#1f9d55;}
.glance-chip.glance-price{background:var(--gray-200);color:var(--gray-700);}
.glance-known-for{font-size:13.5px;color:var(--gray-700);line-height:1.5;}
.glance-known-for b{color:var(--ink);}
.glance-known-for.glance-voiced{font-size:14px;font-style:italic;color:var(--ink);padding-left:12px;
  border-left:3px solid var(--gold);}
.glance-percentile{font-size:12px;color:var(--blue-dark);font-weight:600;margin-top:4px;}

/* ===== Good to Know — split into two tones so a visitor can tell "charming
   fact" from "temper your expectations" without reading every line. ===== */
.know-group{margin-bottom:14px;}
.know-group:last-child{margin-bottom:0;}
.know-group h3{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px;}
.know-charm h3{color:#1f9d55;}
.know-caution h3{color:#b8860b;}

/* ===== Good to Know — the real, honest detail written into `notes` during
   research, finally surfaced instead of silently discarded at render time. ===== */
.good-to-know-list{list-style:none;padding:0;margin:0;}
.good-to-know-list li{position:relative;padding:6px 0 6px 20px;font-size:13.5px;color:var(--gray-700);
  line-height:1.5;}
.know-caution .good-to-know-list li{color:#6b5410;}
.claim-banner a{font-weight:700;color:#b0181a;text-decoration:underline;}

/* ===== Pricing (list-your-business) ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px;}
.price-card{border:1px solid var(--gray-200);border-radius:18px;padding:26px;background:#fff;box-shadow:var(--shadow-sm);}
.price-card.featured{border:2px solid var(--red);box-shadow:0 10px 30px -10px rgba(220,30,32,.35);position:relative;}
.price-card.featured::before{content:"MOST POPULAR";position:absolute;top:-12px;left:20px;background:var(--red);color:#fff;font-size:10px;
  font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.04em;}
.price-card h3{font-size:18px;margin:0 0 4px;}
.price-card .price{font-size:32px;font-weight:800;margin:10px 0 4px;}
.price-card .price span{font-size:14px;font-weight:600;color:var(--gray-500);}
.price-card ul{list-style:none;padding:0;margin:16px 0 20px;}
.price-card li{font-size:13.5px;padding:6px 0;color:var(--gray-700);display:flex;gap:8px;}
.price-card li::before{content:"✓";color:#2b8a3e;font-weight:800;}
.faq-item{border-bottom:1px solid var(--gray-200);padding:16px 0;}
.faq-item h4{font-size:15px;margin:0 0 6px;}
.faq-item p{font-size:14px;color:var(--gray-700);margin:0;line-height:1.6;}
.signup-form{max-width:520px;background:var(--gray-100);border-radius:18px;padding:26px;margin-top:20px;}
.signup-form label{display:block;font-size:12.5px;font-weight:700;color:var(--gray-700);margin:12px 0 4px;}
.signup-form input,.signup-form select,.signup-form textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--gray-200);font-family:inherit;font-size:14px;}
.signup-form button{margin-top:18px;width:100%;justify-content:center;}

/* ===== Footer ===== */
/* ===== Footer sponsor CTA — replaces the old top-nav Sponsor button.
   Sitting right above the footer means it's still highly visible on every
   page (nobody leaves without seeing it), without competing for space in
   the primary nav bar the way a persistent bright-red button did. ===== */
.footer-sponsor-cta{background:linear-gradient(135deg,var(--navy),#152a4a);padding:28px 20px;}
.footer-sponsor-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;}
.footer-sponsor-inner h3{color:#fff;font-size:19px;margin:0 0 4px;}
.footer-sponsor-inner p{color:rgba(255,255,255,.75);font-size:13.5px;margin:0;}
@media (max-width:600px){.footer-sponsor-inner{flex-direction:column;text-align:center;}}

.site-footer{position:relative;z-index:1;margin-top:0;padding:44px 20px 22px;background:rgba(10,22,40,.96);color:rgba(255,255,255,.85);}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(4, 1fr);gap:28px;}
.footer-brand .footer-tag{font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);margin-top:12px;max-width:260px;}
.footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:12px;}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.85);text-decoration:none;padding:4px 0;}
.footer-col a:hover{color:var(--blue);text-decoration:underline;}
.footer-bottom{max-width:1100px;margin:32px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.5);text-align:center;}
.footer-flag-icon{width:16px;height:auto;vertical-align:-3px;margin-right:4px;border-radius:2px;}
@media (max-width:800px){.footer-inner{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-inner{grid-template-columns:1fr;} .biz-hero-inner{flex-direction:column;}}
@media (max-width:640px){
  .upvote-box-compact{width:100%;flex:1 1 auto;}
  .biz-side-col{width:100%;flex:1 1 auto;}
  .uvb-btn-grid{grid-template-columns:1fr 1fr;}
}

/* ===== Special-details modal icon — transparent PNG icon matching the
   special's category/food type, shown as a circular badge over the
   animated gradient background of .cs-details-modal (added per request). */
.cs-details-icon-wrap{
  position:absolute; top:22px; right:14px; width:63px; height:63px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9a8, #ffcf4d);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28); z-index:2;
}
.cs-details-icon{ width:36px; height:36px; object-fit:contain; }
@media (max-width:600px){
  .cs-details-icon-wrap{ width:45px; height:45px; top:16px; right:10px; }
  .cs-details-icon{ width:26px; height:26px; }
}

/* ===== Footer newsletter subscribe (added to every page's footer) */
.footer-subscribe{min-width:220px;}
.footer-sub-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.footer-sub-row input[type="email"]{
  flex:1 1 160px;min-width:140px;padding:9px 12px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  color:#fff;font-size:13.5px;
}
.footer-sub-row input[type="email"]::placeholder{color:rgba(255,255,255,.55);}
.footer-sub-row button{
  padding:9px 16px;border-radius:8px;border:none;font-weight:700;font-size:13.5px;
  background:var(--gold, #e8b44c);color:#1a1a2e;cursor:pointer;white-space:nowrap;
}
.footer-sub-row button:disabled{opacity:.6;cursor:default;}
.footer-sub-msg{font-size:12.5px;margin-top:8px;min-height:1em;}
.footer-sub-msg.success{color:#8ee6a8;}
.footer-sub-msg.error{color:#ff9b9b;}

/* ===== About page — gratitude statement + father/son photo placeholder */
.about-gratitude{
  font-size:19px;line-height:1.7;font-weight:600;color:var(--ink);
  padding:18px 20px;border-left:4px solid var(--gold,#F4A261);background:var(--gray-100,#f4f5f7);
  border-radius:0 10px 10px 0;margin:0 0 28px;
}
.about-photo-placeholder{
  margin:18px 0 24px;border-radius:14px;border:2px dashed var(--gray-200,#e9eaed);
  background:var(--gray-100,#f4f5f7);padding:48px 20px;text-align:center;color:var(--gray-500,#8a8f98);
}
.about-photo-placeholder span{display:block;font-size:17px;font-weight:700;margin-bottom:6px;}
.about-photo-placeholder small{font-size:13px;}

/* ===== Blog — article typography + index cards */
.blog-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--gray-500,#8a8f98);
  font-size:13px;margin-bottom:18px;}
.blog-hero-image{margin:0 0 26px;}
.blog-hero-image img{width:100%;border-radius:14px;aspect-ratio:16/9;object-fit:cover;background:var(--gray-100,#f4f5f7);}
.blog-hero-image figcaption{font-size:12.5px;color:var(--gray-500,#8a8f98);margin-top:8px;}
.blog-lede{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:24px;}
.blog-article h2{margin-top:32px;}
.blog-list{line-height:1.8;padding-left:22px;}
.blog-cta-box{margin:32px 0;padding:22px 24px;border-radius:14px;background:var(--gray-100,#f4f5f7);
  border:1px solid var(--gray-200,#e9eaed);}
.blog-cta-box p{margin:0 0 14px;}
.blog-footer-note{margin-top:32px;padding-top:20px;border-top:1px solid var(--gray-200,#e9eaed);
  font-size:14px;color:var(--gray-700,#4a4f58);}

.blog-index-card{display:flex;gap:20px;text-decoration:none;color:inherit;padding:18px;
  border:1px solid var(--gray-200,#e9eaed);border-radius:16px;margin-bottom:18px;transition:box-shadow .15s;}
.blog-index-card:hover{box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.10));}
.blog-index-card img{width:180px;height:130px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  background:var(--gray-100,#f4f5f7);}
.blog-index-card-body h2{margin:6px 0 8px;font-size:20px;}
.blog-index-tag{display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--red,#dc1e20);}
.blog-index-card-body time{font-size:12.5px;color:var(--gray-500,#8a8f98);}
.blog-index-more{text-align:center;color:var(--gray-500,#8a8f98);margin-top:8px;}
@media (max-width:560px){
  .blog-index-card{flex-direction:column;}
  .blog-index-card img{width:100%;height:180px;}
}

/* ===== Content section nav (Scoop / Guides / Finds / Stories switcher) */
.blog-section-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.blog-section-nav a{padding:8px 16px;border-radius:999px;background:var(--gray-100,#f4f5f7);
  color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px;}
.blog-section-nav a:hover{background:var(--gray-200,#e9eaed);}

/* ===== "By Day" nav dropdown — replaces 7 separate day pills with one
   opener so the pill row doesn't overflow on list-heavy pages. */
.nav-day-dropdown{position:relative;flex:0 0 auto;}
.nav-day-trigger{
  padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--gray-700,#4a4f58);background:var(--gray-100,#f4f5f7);border:none;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.nav-day-trigger:hover{background:var(--gray-200,#e9eaed);}
.nav-day-trigger.active{background:var(--ink,#1a1a2e);color:#fff;}
.nav-day-caret{font-size:10px;}
.nav-day-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;
  border:1px solid var(--gray-200,#e9eaed);border-radius:12px;box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.10));
  min-width:160px;z-index:70;padding:6px;
}
.nav-day-menu.open{display:block;}
.nav-day-menu a{
  display:block;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--ink,#1a1a2e);text-decoration:none;
}
.nav-day-menu a:hover{background:var(--gray-100,#f4f5f7);}

/* ===== Super Gem card consistency — uses the data-category attribute
   already present on every .card, so this applies uniformly everywhere
   a Super Gem shows up (day pages, neighborhoods, specials board, business
   pages) without needing to touch per-page markup. Matches the dish-gems.html
   reference treatment: amber border + tinted background + diamond badge. */
.card[data-category="Super Gem"]{
  border:1.5px solid #F4A261 !important;
  background:linear-gradient(180deg, rgba(244,162,97,.10), rgba(244,162,97,0) 65%) !important;
}
.card[data-category="Super Gem"] .badge{
  background:rgba(244,162,97,.22) !important; color:#9a5b18 !important; font-weight:800 !important;
}
.card[data-category="Super Gem"] .badge::before{ content:"\1F48E  "; }

/* ===== Cuisine filter chip emoji icons (fallback for cuisines without a
   custom PNG icon yet — see LIVING_DOC_IMAGE_ASSETS.md for icon-set gaps) */
.cuisine-chip-emoji{font-size:13px;line-height:1;}

/* ===== Dish Roulette game */
.roulette-page{text-align:center;max-width:520px;margin-left:auto;margin-right:auto;}
.roulette-wheel-wrap{
  position:relative;height:84px;overflow:hidden;border-radius:16px;
  border:3px solid var(--gold,#F4A261);background:#fff;box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.10));
  margin-bottom:22px;
}
.roulette-track{display:flex;flex-direction:column;}
.roulette-item{
  height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:17px;font-weight:700;color:var(--ink,#1a1a2e);padding:0 20px;
}
.roulette-item img{width:36px;height:36px;object-fit:contain;flex:0 0 auto;}
.roulette-placeholder{color:var(--gray-500,#8a8f98);font-weight:600;}
.roulette-pointer{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);color:var(--red,#dc1e20);
  font-size:16px;pointer-events:none;
}
.roulette-spin-btn{font-size:17px;padding:14px 36px;}
.roulette-result{
  margin-top:28px;padding:24px;border-radius:16px;background:var(--gray-100,#f4f5f7);
  border:1px solid var(--gray-200,#e9eaed);
}
.roulette-result h3{margin:0 0 6px;font-size:22px;}
.roulette-result-special{font-size:16px;font-weight:600;color:var(--ink,#1a1a2e);margin:0 0 4px;}
.roulette-result-meta{font-size:13px;color:var(--gray-500,#8a8f98);margin:0 0 16px;}
.roulette-result .link-style-btn{display:block;margin:10px auto 0;}

/* ===== Business page redesign — category icon card, Good to Know/Hours/
   Amenities as cards, paired info-cards-row layout ===== */
.biz-cat-icon-card{
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:16px;background:linear-gradient(135deg,#fff6e0,#ffe4b3);
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08));align-self:flex-end;margin-bottom:-2px;
}
.biz-cat-icon-img{width:34px;height:34px;object-fit:contain;}
.biz-cat-icon-emoji{font-size:30px;line-height:1;}

.info-card{
  border:1px solid var(--gray-200,#e9eaed);border-radius:16px;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08));background:#fff;
}
.info-cards-row{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0;}
.info-cards-row .info-card{flex:1 1 260px;margin:0 !important;}
.info-card-solo{margin:20px 0;}
@media (max-width:600px){ .info-cards-row{flex-direction:column;} }

/* ===== Specials-card type icon — small icon prepended to the card title,
   computed client-side via csGetSpecialIcon so it works everywhere a
   .card renders (day pages, neighborhoods, business pages, specials board). */
.card-type-icon{width:18px;height:18px;object-fit:contain;vertical-align:-3px;margin-right:6px;}