:root {
  --ink: #111216;
  --muted: #686c73;
  --paper: #f6f6f3;
  --card: #ffffff;
  --acid: #d8ff3e;
  --orange: #ff6338;
  --line: #e5e5df;
  --shadow: 0 18px 45px rgba(16, 17, 20, .11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; padding-bottom: 92px; }
.topbar { height: 76px; padding: 0 max(22px, calc((100vw - 1160px) / 2)); display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(246,246,243,.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px 10px 10px 3px; background: var(--ink); color: var(--acid); letter-spacing: 0; transform: rotate(-3deg); }
.location-pill { margin: auto; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; background: #fff; font-weight: 600; font-size: .9rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ff633826; }
.business-link, .text-button { background: transparent; border: 0; font-weight: 700; cursor: pointer; }
main { width: min(1160px, calc(100% - 44px)); margin: 0 auto; }
.discover-view, .saved-view, .business-view { display: none; }
.discover-view.active, .saved-view.active, .business-view.active { display: block; }
.intro-row { padding: 48px 0 30px; display: flex; justify-content: space-between; align-items: flex-start; }
.eyebrow { font-family: Manrope, sans-serif; font-size: .76rem; letter-spacing: .15em; font-weight: 800; color: var(--orange); margin: 0 0 12px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: Manrope, sans-serif; }
.intro-row h1, .page-heading h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.055em; margin: 0; max-width: 760px; }
.intro-row h1 span { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.avatar { border: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--acid); font-weight: 800; cursor: pointer; }
.planning-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 620px; margin: 0 0 18px; padding: 6px; border-radius: 20px; background: #e9e9e3; }
.planning-tab { border: 0; border-radius: 15px; padding: 14px 18px; background: transparent; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.planning-tab span { display: block; font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.02rem; }
.planning-tab small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.planning-tab.active { background: var(--ink); color: white; box-shadow: 0 8px 22px rgba(17,18,22,.16); }
.planning-tab.active small { color: var(--acid); }
.search-box { height: 58px; background: white; border: 1px solid var(--line); border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 0 18px; box-shadow: 0 8px 24px rgba(16,17,20,.04); }
.search-box > span { font-size: 1.6rem; transform: rotate(-15deg); }
.search-box input { border: 0; outline: 0; width: 100%; background: transparent; font-size: 1rem; }
.search-box button { border: 0; background: #efefea; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: none; }
.category-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 16px 0 30px; }
.category-scroll::-webkit-scrollbar { display: none; }
.category { border: 1px solid var(--line); background: white; padding: 10px 16px; border-radius: 999px; white-space: nowrap; display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.category.active { background: var(--ink); color: white; border-color: var(--ink); }
.category.active span { color: var(--acid); }
.section-heading, .nearby-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 18px 0; }
.section-heading h2, .nearby-heading h2 { font-size: 1.55rem; letter-spacing: -.03em; margin-bottom: 3px; }
.section-heading p, .nearby-heading p { color: var(--muted); margin: 0; font-size: .9rem; }
.hot-title { display: flex; gap: 9px; align-items: center; }
.flame { width: 26px; height: 26px; display: grid; place-items: center; background: var(--orange); color: white; clip-path: polygon(50% 0,100% 100%,0 100%); font-size: .68rem; }
.text-button { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.featured-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.featured-card { min-height: 330px; border-radius: 24px; overflow: hidden; background: #222; position: relative; color: white; cursor: pointer; box-shadow: var(--shadow); }
.featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.featured-card:hover img { transform: scale(1.025); }
.featured-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(4,5,8,.88)); }
.featured-card .card-content { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 24px; }
.rank-chip { position: absolute; z-index: 3; top: 18px; left: 18px; background: var(--acid); color: var(--ink); padding: 8px 11px; border-radius: 10px; font-weight: 800; font-size: .78rem; }
.save-button { position: absolute; z-index: 4; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 1.25rem; cursor: pointer; }
.save-button.saved { background: var(--acid); }
.featured-card h3 { font-size: clamp(1.35rem, 3vw, 2rem); margin: 0 0 6px; letter-spacing: -.035em; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .88rem; color: rgba(255,255,255,.8); }
.dot-separator::before { content: "•"; margin-right: 7px; }
.view-toggle { display: flex; border: 1px solid var(--line); padding: 3px; border-radius: 12px; background: white; }
.view-toggle button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: none; cursor: pointer; }
.view-toggle button.active { background: var(--ink); color: white; }
.nearby-heading { margin-top: 46px; }
.listing-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.listing-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 150px 1fr; min-height: 150px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.listing-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,17,20,.07); }
.listing-card img { width: 100%; height: 100%; object-fit: cover; }
.listing-card-content { padding: 18px 54px 16px 18px; }
.listing-card h3 { font-size: 1.05rem; margin: 5px 0 8px; letter-spacing: -.02em; }
.listing-card p { margin: 0; font-size: .86rem; color: var(--muted); }
.type-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--orange); }
.promoted { color: var(--muted); border: 1px solid var(--line); padding: 3px 6px; border-radius: 5px; }
.listing-card .save-button { top: 12px; right: 12px; background: #f1f1ed; }
.listing-card .save-button.saved { background: var(--acid); }
.map-view { height: 590px; border-radius: 26px; background-color: #e7e6de; background-image: linear-gradient(35deg, transparent 45%,rgba(255,255,255,.72) 46%,rgba(255,255,255,.72) 50%,transparent 51%), linear-gradient(120deg, transparent 42%,rgba(255,255,255,.55) 43%,rgba(255,255,255,.55) 47%,transparent 48%); position: relative; overflow: hidden; border: 1px solid #d7d6cf; }
.map-view::before { content:""; position:absolute; width:150%; height:115px; left:-25%; top:33%; background:#acd9e6; transform:rotate(-8deg); opacity:.7; }
.map-road { position: absolute; background: rgba(255,255,255,.8); border: 1px solid #d2d1c8; width: 120%; height: 16px; left: -10%; }
.road-one { top: 25%; transform: rotate(22deg); }.road-two{top:68%;transform:rotate(-15deg)}.road-three{top:50%;transform:rotate(75deg)}
.map-label { position:absolute; z-index:2; font-weight:800; color:#8c8c85; font-size:.73rem; letter-spacing:.05em; text-transform:uppercase; }.river-market{top:12%;left:18%}.crossroads{top:38%;left:56%}.plaza{top:63%;left:25%}.op{bottom:12%;right:18%}
.map-pin { position: absolute; z-index:4; width: 42px; height: 42px; border-radius: 50% 50% 50% 5px; transform: rotate(-45deg); border: 3px solid white; background: var(--ink); color: var(--acid); display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.2); cursor:pointer; }
.map-pin span { transform:rotate(45deg); font-weight:800; }.map-pin.active { background:var(--orange); color:white; transform:rotate(-45deg) scale(1.14); }
.map-card { position:absolute; z-index:6; left:20px; right:20px; bottom:20px; background:white; border-radius:18px; padding:16px; box-shadow:var(--shadow); display:none; }
.map-card.show { display:flex; gap:15px; align-items:center; }.map-card img{width:80px;height:70px;object-fit:cover;border-radius:12px}.map-card h3{margin:0 0 4px;font-size:1rem}.map-card p{margin:0;color:var(--muted);font-size:.82rem}
.empty-state { text-align: center; padding: 70px 20px; }
.empty-state > span { font-size: 2rem; }
.empty-state h3 { margin: 10px 0 5px; }
.empty-state p { color: var(--muted); }
.empty-state button, .primary-button { border: 0; background: var(--ink); color: white; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.bottom-nav { position: fixed; z-index: 30; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 18px; background: rgba(17,18,22,.95); box-shadow: 0 16px 40px rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.bottom-nav button { min-width: 92px; color: #aaa; border: 0; background: none; border-radius: 13px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; cursor: pointer; position:relative; }
.bottom-nav button.active { background: #2c2e31; color: white; }
.bottom-nav button.active span { color: var(--acid); }
#savedBadge { display:grid;place-items:center;position:absolute;right:4px;top:3px;min-width:18px;height:18px;background:var(--orange);color:white;border-radius:99px;font-size:.68rem; }
.page-heading { padding: 60px 0 34px; }
.business-view { padding: 50px 0; }
.back-button { background:none;border:0;padding:0;margin-bottom:45px;font-weight:700;cursor:pointer; }
.business-hero { max-width: 850px; }
.business-hero h1 { font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .96; letter-spacing: -.06em; margin-bottom: 25px; }
.business-hero > p:not(.eyebrow) { font-size: 1.2rem; line-height: 1.6; max-width: 700px; color: var(--muted); }
.primary-cta { display: inline-flex; gap: 22px; align-items: center; background: var(--acid); color: var(--ink); text-decoration: none; padding: 16px 20px; border-radius: 14px; font-weight: 800; margin-top: 12px; }
.business-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin: 70px 0 25px; }
.business-steps article { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 25px; }
.business-steps article > span { color: var(--orange); font-weight: 800; font-size: .76rem; }
.business-steps h3 { margin: 28px 0 8px; }
.business-steps p, .promotion-note { color: var(--muted); line-height: 1.55; }
.analytics-preview { margin: 24px 0; padding: 30px; border-radius: 22px; background: white; border: 1px solid var(--line); }
.analytics-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:25px; }
.analytics-heading h2 { margin:0;font-size:clamp(1.45rem,3vw,2.15rem);letter-spacing:-.04em;max-width:580px; }
.live-pill { white-space:nowrap;border-radius:99px;background:#eef1e7;padding:8px 11px;font-size:.78rem;font-weight:700; }
.live-pill i { display:inline-block;width:7px;height:7px;border-radius:50%;background:#4e9a35;margin-right:6px; }
.funnel-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.funnel-grid article { padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line); }
.funnel-grid strong { display:block;font-family:Manrope,sans-serif;font-size:1.65rem;letter-spacing:-.04em; }
.funnel-grid span { display:block;color:var(--muted);font-size:.8rem;margin-top:4px; }
.funnel-path { display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin:22px 0 14px;padding:13px;border-radius:13px;background:var(--ink);color:white;font-size:.82rem;font-weight:700; }
.funnel-path b { color:var(--acid); }
.analytics-note { margin:0;color:var(--muted);font-size:.85rem;line-height:1.55; }
.promotion-note { background: #111216; color: #d1d1cd; border-radius: 18px; padding: 20px 24px; }
.promotion-note strong { color: white; }.promotion-note span { border:1px solid #666;padding:3px 6px;border-radius:5px;font-size:.78rem; }
dialog { border: 0; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(9,10,12,.65); backdrop-filter: blur(5px); }
.info-dialog { width: min(500px, calc(100% - 30px)); border-radius: 24px; padding: 34px; }
.dialog-close { position:absolute;top:14px;right:14px;border:0;background:#efefea;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.2rem; }
.info-icon { width:48px;height:48px;background:var(--orange);color:white;display:grid;place-items:center;clip-path:polygon(50% 0,100% 100%,0 100%);margin-bottom:20px; }
.info-dialog h2 { font-size:1.7rem;letter-spacing:-.03em; }.info-dialog p{line-height:1.6;color:var(--muted)}
.rank-signals{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.rank-signals span{background:#efefea;border-radius:99px;padding:8px 11px;font-size:.83rem;font-weight:700}.info-dialog .small{font-size:.85rem}.info-dialog .primary-button{width:100%;margin-top:8px}
.sheet-dialog { width: min(630px, 100%); max-height: 92vh; margin: auto; border-radius: 26px; padding: 0; overflow: auto; }
.detail-image { width:100%;height:270px;object-fit:cover; }.detail-body{padding:26px}.detail-topline{display:flex;justify-content:space-between;align-items:start;gap:20px}.detail-body h2{font-size:2rem;letter-spacing:-.04em;margin:6px 0}.detail-description{color:var(--muted);line-height:1.6;margin:24px 0}.detail-facts{display:grid;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.detail-facts p{margin:0}.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.detail-actions button{border:1px solid var(--line);border-radius:13px;background:white;padding:13px;font-weight:700;cursor:pointer}.detail-actions .go{background:var(--ink);color:white;border-color:var(--ink)}
.intent-question { display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;margin-top:20px;padding:15px;border-radius:16px;background:#efefea; }
.intent-question > div span { display:block;font-family:Manrope,sans-serif;font-weight:800; }
.intent-question small { display:block;color:var(--muted);font-size:.75rem;margin-top:2px; }
.intent-button { border:1px solid #d6d6cf;background:white;border-radius:11px;padding:11px 13px;font-weight:700;cursor:pointer; }
.intent-button.strong { background:var(--ink);border-color:var(--ink);color:white; }
.intent-button.active { background:var(--acid);border-color:var(--acid);color:var(--ink); }
.intent-disclaimer { color:var(--muted);font-size:.74rem;line-height:1.45;margin:12px 2px 0; }
.toast { position:fixed;z-index:60;left:50%;bottom:100px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:11px 16px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:.25s; }.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width: 760px) {
  main { width: min(100% - 28px, 600px); }
  .topbar { padding: 0 16px; height: 66px; gap: 10px; }
  .brand > span:last-child, .business-link { display:none; }
  .location-pill { margin-left:auto;margin-right:0;font-size:.82rem;padding:8px 11px; }
  .intro-row { padding: 30px 0 22px; }
  .intro-row h1 { font-size: 2.8rem; }
  .avatar { display:none; }
  .planning-tabs { max-width: none; }
  .planning-tab { padding: 12px 13px; }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-card { min-height: 310px; }
  .featured-card:nth-child(2) { min-height: 250px; }
  .listing-list { grid-template-columns: 1fr; }
  .listing-card { grid-template-columns: 118px 1fr; min-height: 135px; }
  .listing-card-content { padding: 15px 45px 13px 14px; }
  .nearby-heading { margin-top: 38px; }
  .bottom-nav { bottom: 10px; width: calc(100% - 24px); justify-content:space-around; }
  .bottom-nav button { min-width:0; flex:1; padding:9px 5px; font-size:.72rem; flex-direction:column; gap:2px; }
  .bottom-nav button span { font-size:1.15rem; }
  .business-steps { grid-template-columns: 1fr; margin-top:45px; }
  .business-steps h3 { margin-top:16px; }
  .analytics-preview { padding:22px 18px; }
  .analytics-heading { display:block; }
  .live-pill { display:inline-block;margin-top:14px; }
  .funnel-grid { grid-template-columns:1fr 1fr; }
  .funnel-path { justify-content:flex-start; }
  .intent-question { grid-template-columns:1fr 1fr; }
  .intent-question > div { grid-column:1 / -1; }
  .detail-actions { grid-template-columns:1fr; }
  .sheet-dialog { margin:auto 0 0;width:100%;max-height:90vh;border-radius:24px 24px 0 0; }
  .detail-image { height:220px; }
}
@media (min-width: 900px) { .bottom-nav { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important;transition:none!important; } }