.brand{display:inline-block;flex-shrink:0;line-height:0;color:inherit}.brand-logo{display:block;height:40px;width:auto;max-width:var(--logo-w,220px)}.brand-mark{display:inline-flex;align-items:center;gap:10px;line-height:1}.brand-pin{width:25px;height:31px;flex:none}.brand-word{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.05em;color:inherit}.brand-word span{font-weight:500}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;font-weight:800;transition:.22s var(--ease)}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--forest-900);color:var(--theme-on-primary)}.button-primary:hover{background:var(--forest-700)}.button-ember{background:var(--ember-500);color:var(--theme-on-accent)}.button-soft{background:var(--sand-100);border-color:var(--sand-200)}.button-outline{border-color:rgba(16,32,28,.18);background:var(--theme-paper,#fff)}.icon-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--theme-paper,#fff);display:grid;place-items:center}.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);padding:8px 11px;border-radius:999px;font-size:.82rem;background:var(--theme-paper,#fff)}.pill strong{color:var(--forest-700)}.trust{background:var(--theme-trust-bg);color:var(--theme-trust-text);border-color:var(--theme-trust-line)}.sponsored{background:var(--theme-sponsored-bg);color:var(--theme-sponsored-text);border-color:var(--theme-sponsored-line)}.badge{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.card{background:var(--theme-paper,#fff);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}.card-body{padding:20px}.metric{display:grid;gap:4px}.metric strong{font-size:1.9rem;letter-spacing:-.04em}.metric span{color:var(--muted);font-size:.9rem}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--theme-paper,#fff);border-radius:999px;padding:8px 12px;font-size:.84rem}.chip[aria-pressed="true"],.chip-active{background:var(--forest-900);color:var(--theme-on-primary);border-color:var(--forest-900)}.notice{padding:16px 18px;border-radius:16px;background:var(--lagoon-100);border:1px solid var(--lagoon-200)}.toast{position:fixed;right:20px;bottom:20px;z-index:100;background:var(--forest-950);color:var(--theme-on-primary-dark);padding:14px 16px;border-radius:14px;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.is-visible{opacity:1;transform:none}.field{display:grid;gap:7px}.field span{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--theme-paper,#fff);min-height:48px;padding:0 14px}.field textarea{padding:14px;min-height:120px;resize:vertical}.progress{height:9px;background:var(--sand-200);border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--forest-700),var(--lagoon-500));border-radius:inherit}.table-wrap{overflow:auto;overflow-anchor:none}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.92rem}.data-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* V4.5 locality autocomplete — suggestions exist only after typing >= 2 chars. */
.locality-field{position:relative;z-index:12}.locality-suggestions{position:absolute;left:0;right:0;bottom:calc(100% + 8px);top:auto;z-index:90;background:var(--theme-paper,#fff);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:7px;max-height:320px;overflow:auto;align-self:start;height:auto}.locality-suggestions[hidden]{display:none}.locality-suggestions button{width:100%;display:grid;gap:2px;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:11px}.locality-suggestions button:hover,.locality-suggestions button[aria-selected="true"]{background:var(--sand-100)}.locality-suggestions strong{font-size:.93rem}.locality-suggestions span{font-size:.75rem;color:var(--muted);text-transform:capitalize}.hero-search .locality-suggestions{top:auto;bottom:calc(100% + 14px);max-height:min(320px,calc(100vh - 40px))}
.hospitality-media{position:relative;overflow:hidden}.hospitality-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}.hospitality-card:hover .hospitality-media>img{transform:scale(1.035)}.hospitality-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.3),transparent 55%);pointer-events:none}.hospitality-media .media-tags{position:relative;z-index:2}
.simple-hero{padding:76px 0 42px;background:var(--sand-100)}
.simple-hero h1{font-size:clamp(3rem,6vw,6rem)}
.hero-photo{position:relative;color:#fff}
.hero-photo-bg{position:absolute;inset:0}
.hero-photo-bg img{width:100%;height:100%;object-fit:cover}
.hero-photo .hero-dim{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-primary-dark) 88%,transparent) 0%,color-mix(in srgb,var(--theme-primary) 58%,transparent) 55%,rgba(0,0,0,.28) 100%),linear-gradient(0deg,color-mix(in srgb,var(--theme-primary-dark) 65%,transparent),transparent 68%)}
.hero-photo-content{position:relative;z-index:45}
.hero-photo.simple-hero{background:var(--theme-primary-dark)}
.hero-photo .eyebrow{color:rgba(255,255,255,.78)}
.hero-photo .section-copy{color:rgba(255,255,255,.88)}

/* Shared prev/numbers/next pager — reused by search results and every admin table. */
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:6px}
.pagination-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pagination-arrow,.pagination-page{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;font-weight:800;font-size:.85rem;border:1px solid var(--line);background:var(--theme-paper,#fff);color:var(--ink)}
.pagination-page{min-width:38px;padding:0}
.pagination-arrow:hover,.pagination-page:hover{border-color:var(--forest-700)}
.pagination-page.is-current{background:var(--forest-900);color:var(--theme-on-primary);border-color:var(--forest-900)}
.pagination-arrow.is-disabled,.pagination-page.is-current{cursor:default}
.pagination-arrow.is-disabled{color:var(--muted);background:var(--sand-100)}
/* NearFor Control Room: floating "+ Issue" button (site-wide, see layout())
   and its quick-create modal. Self-contained classes (cr-modal-*) rather
   than reusing admin.css's .modal/.modal-overlay, which isn't loaded on
   most pages the FAB appears on. */
/* Right side, not left: left is where the admin/business-console sidebar
   lives, and this FAB shows site-wide (frontend + every admin page). Same
   20px/20px corner offset it always had on the left, just mirrored — it
   can briefly share the corner with .toast (right:20px;bottom:20px,
   visible ~2.6s after an action) or for-business's .desktop-cta.is-visible
   (right:26px;bottom:26px), but a rare few-second overlap beats sitting
   oddly high all the time. */
.cr-fab{position:fixed;right:20px;bottom:20px;z-index:95;box-shadow:var(--shadow-lg)}
@media(max-width:760px){.cr-fab{right:12px;bottom:12px}}
.cr-modal-overlay{position:fixed;inset:0;background:rgba(10,20,18,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.cr-modal-overlay[hidden]{display:none}
.cr-modal-box{background:var(--theme-paper,#fff);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:90vh;overflow:auto;padding:22px}
.cr-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cr-modal-head h2{font-size:1.3rem}
.cr-quick-form{display:grid;gap:14px}
.cr-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.cr-field-row{grid-template-columns:1fr}}
.cr-context-note{font-size:.8rem;color:var(--muted);background:var(--sand-50);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.cr-context-note strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--forest-700,var(--ink))}
.cr-context-note code{background:var(--sand-100);padding:2px 6px;border-radius:6px;word-break:break-all}
/* Quick-create modal: compact so it fits on screen without scrolling
   (fixed height fields + tighter padding/gaps than the generic .cr-modal-box). */
.cr-fab-modal .cr-modal-box{width:min(500px,100%);max-height:85vh;padding:18px}
.cr-fab-modal .cr-modal-head{margin-bottom:10px}
.cr-fab-modal .cr-modal-head h2{font-size:1.12rem}
.cr-fab-modal .cr-quick-form{gap:10px}
.cr-fab-modal .cr-field-row{gap:10px}
.cr-fab-modal .field span{font-size:.72rem}
.cr-fab-modal .field input,.cr-fab-modal .field select{min-height:40px}
.cr-fab-modal .field textarea{min-height:60px;padding:10px;font-size:.9rem}
.cr-fab-modal .field input[type="file"]{min-height:auto;padding:8px 10px;font-size:.85rem}
.cr-fab-modal .cr-context-note{padding:8px 10px;font-size:.74rem}
.cr-fab-modal .cr-context-note code{font-size:.72rem}
/* .workspace-hero used to live only in dashboard.css, so any page using it
   without loading 'dashboard' (adminPage, advertiserDashboardPage, all 3
   scrape pages) rendered it as display:block -- title and action button
   stacked on separate lines instead of title-left/button-right, same class
   of bug as Control Room's own hero fix earlier today. Moved here since
   components.css loads on every page unconditionally, so this can't drift
   again by forgetting to add 'dashboard' to some future page's css list.
   align-items:center (not the original :end) is deliberate: the flex row
   bottom-aligned the button against the h1's baseline, which visually
   read as "too low" next to a clamp(2.7rem,5vw,5rem) heading. */
.workspace-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}
.workspace-hero h1{font-size:clamp(2.7rem,5vw,5rem);max-width:14ch}
.workspace-hero p{max-width:64ch;margin-top:8px}
@media(max-width:650px){.workspace-hero{align-items:start;flex-direction:column}}
/* .breadcrumb: shared across every page that renders a breadcrumb trail
   (business, blog article, etc). Previously this styling lived only in
   business.css, so pages loading a different page-css bundle (blog.css)
   got the breadcrumb markup with no styling at all — rendered as a plain
   unstyled bullet list, off-theme. Lives here so every page gets it. */
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--muted)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:750}
/* Screenshot capture in issue modal (control-room-fab.js). */
.cr-cap-row{margin:2px 0}
.cr-caps{display:flex;gap:10px;flex-wrap:wrap}
.cr-caps[hidden]{display:none}
.cr-cap{position:relative;display:inline-block}
.cr-cap img{display:block;width:120px;height:80px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.cr-cap button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--theme-paper,#fff);cursor:pointer;font-size:.75rem;line-height:1}
.cr-select{position:fixed;inset:0;z-index:1200;cursor:crosshair;background:rgba(10,20,18,.25)}
.cr-select-hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--forest-950);color:#fff;padding:10px 16px;border-radius:12px;font-size:.85rem;pointer-events:none;white-space:nowrap}
.cr-select-rect{position:fixed;border:2px solid var(--ember-500);background:rgba(223,101,72,.12);box-shadow:0 0 0 9999px rgba(10,20,18,.35);pointer-events:none}
/* Annotation editor for issue screenshots (cr-capture.js). */
.cr-cap button[data-cr-cap-edit]{position:absolute;bottom:-8px;left:-8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--forest-900);color:#fff;cursor:pointer;font-size:.8rem;line-height:1}
.cr-draw{position:fixed;inset:0;z-index:1300;background:rgba(10,20,18,.92);display:flex;flex-direction:column;gap:10px;padding:14px}
.cr-draw-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--theme-paper,#fff);border-radius:14px;padding:8px 10px}
.cr-draw-bar button[data-draw-tool]{border:1px solid var(--line);background:transparent;border-radius:10px;min-height:38px;padding:0 10px;cursor:pointer;font-size:1rem}
.cr-draw-bar button[data-draw-tool][aria-pressed="true"]{background:var(--forest-900);color:#fff;border-color:var(--forest-900)}
.cr-draw-color{width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer}
.cr-draw-color.is-on{border-color:var(--ink);box-shadow:0 0 0 2px #fff}
.cr-draw-sep{width:1px;height:24px;background:var(--line)}
.cr-draw-bar .button{margin-left:auto}
.cr-draw-bar .button + .button{margin-left:0}
.cr-draw-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.cr-draw-stage canvas{max-width:100%;max-height:100%;border-radius:12px;touch-action:none;cursor:crosshair;background:#fff}

/* Compare: toggle button, shortlist tray */
.cmp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;min-width:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--theme-paper,#fff);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.cmp-btn:hover{border-color:var(--ink)}
.cmp-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sand-50)}
.result-media-wrap{position:relative}
.cmp-btn-card{position:absolute;top:12px;right:12px;z-index:5;width:40px;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cmp-btn-card .cmp-btn-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.listing-quick .cmp-btn-head{padding:0 14px}
.cmp-tray{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;width:min(calc(100% - 24px),860px);padding:10px 14px;border:1px solid var(--line);border-radius:20px;background:var(--theme-paper,#fff);box-shadow:0 12px 36px rgba(20,20,16,.2)}
.cmp-tray[hidden]{display:none}
.cmp-tray-items{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:8px;max-width:210px;padding:4px 6px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--sand-50);font-size:.85rem}
.cmp-chip img{width:32px;height:32px;border-radius:50%;object-fit:cover}.cmp-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cmp-chip button{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 6px}
.cmp-tray-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cmp-tray-hint{font-size:.85rem;color:var(--muted)}.cmp-tray-msg{margin:0;font-size:.92rem;font-weight:600}
.cmp-tray .is-disabled{opacity:.45;pointer-events:none}
@media(max-width:959px){body.has-cmp-tray .cmp-tray{bottom:calc(72px + env(safe-area-inset-bottom))}body.has-cmp-tray{padding-bottom:0}}
body[data-jmode="trip"] .cmp-tray{bottom:calc(76px + env(safe-area-inset-bottom))}
@media(max-width:959px){.cmp-tray-items{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px}.cmp-chip{flex:none}}