/* =============================================================
   BRAND MARKETPLACE
   Premium, Apple-leaning layout that builds on the design system's
   .story-arc / .static-card / .sc-section-header patterns.
   All colors come from variables.css — nothing invented here.
   ============================================================= */

/* Hero + live-pill styles live in hero.css and style.css respectively,
   since both are reusable beyond the marketplace page. */

/* ── Market filter pills ──
   Same reasoning as the live pill: dropped backdrop-filter because the
   container sits on a flat surface and the blur was firing on every scroll. */
.market-filter {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
}

.market-filter-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.market-filter-btn:hover {
  color: var(--color-text);
}

.market-filter-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* =============================================================
   PRICING / MULTIPLIER SECTION
   ============================================================= */

/* 3 elegant tier cards — mirror .static-card aesthetics */
.multiplier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tier-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-3xl);
  padding: var(--space-2xl);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%,
              var(--tier-bg-highlight, #1a1a1f) 0%,
              var(--tier-bg, #0c0c10) 75%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: box-shadow var(--transition-slow);
}

.tier-card:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tier-card .multi-value {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tier-color);
}

.tier-card .multi-months {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-md);
  letter-spacing: -0.01em;
}

.tier-card .multi-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* Tier color tokens — usable on any descendant via var(--tier-color) */
.tier-early       { --tier-color: #F5A623; }
.tier-growth      { --tier-color: #818CF8; }
.tier-established { --tier-color: #10B981; }

.tier-card.tier-early {
  --tier-bg: #14110a;
  --tier-bg-highlight: #2a1f10;
}
.tier-card.tier-growth {
  --tier-bg: #0c0d18;
  --tier-bg-highlight: #1a1c34;
}
.tier-card.tier-established {
  --tier-bg: #081311;
  --tier-bg-highlight: #102a22;
}

/* =============================================================
   BRAND LISTINGS
   ============================================================= */

.listings-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-lg);
}

.brand-listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Apple-style listing card: radial gradient surface, glass edges,
   subtle brighten-on-hover (no orange border) */
.brand-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-3xl);
  padding: 28px;
  cursor: pointer;
  background: radial-gradient(120% 120% at 0% 0%,
              #1c1c22 0%,
              #0d0d11 75%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.brand-card:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 20px 60px -10px rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
}

.brand-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: var(--space-md);
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo treatment: gradient surface, no harsh orange */
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #2a2a35 0%, #15151a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Logo image inside the chip — sized to fill most of it while leaving
   a small inset of the chip frame visible around the edges. */
.brand-logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

.brand-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.brand-name {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
}

.brand-tm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 13px 0 6px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  letter-spacing: 0;
}

.brand-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
  font-weight: 400;
}

.brand-meta .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
  margin: 0 8px;
  vertical-align: middle;
  opacity: 0.6;
}

/* Clickable domain — looks like meta text until hover. */
.brand-domain-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.brand-domain-link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* External-link glyph — sized in em so it scales with the text. */
.brand-domain-link__icon {
  width: 0.85em;
  height: 0.85em;
  display: inline-block;
  vertical-align: -0.08em;
  margin-left: 0.35em;
  opacity: 0.55;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.brand-domain-link:hover .brand-domain-link__icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Price tag — clean, minimal */
.brand-price-tag {
  text-align: right;
  white-space: nowrap;
  padding-top: 2px;
}

.brand-price-tier {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.brand-price-tier .multi-color {
  font-weight: 800;
  letter-spacing: -0.02em;
  /* color is set by the tier-{early|growth|established} modifier */
  color: var(--tier-color);
}

.brand-price-tier .tier-sep {
  margin: 0 4px;
  opacity: 0.5;
}

.brand-price-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 2px;
}

.brand-price-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Metrics strip: subtle dividers, generous padding */
.brand-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.brand-metric-cell {
  padding: 18px 14px;
  text-align: center;
  position: relative;
}

.brand-metric-cell + .brand-metric-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.metric-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 8px;
}

.metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.metric-value.metric-positive  { color: #5BE3B0; }
.metric-value.metric-warning   { color: #F5C16C; }
.metric-value.metric-negative  { color: #F87171; }

/* Footer chevron line in card */
.brand-card-cta-hint {
  margin-top: 18px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  opacity: 0.7;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.brand-card:hover .brand-card-cta-hint {
  opacity: 1;
  color: var(--color-text-secondary);
}

/* =============================================================
   SELLER CTA — featured "hero" card style
   ============================================================= */

.seller-cta-box {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-3xl);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  background:
    radial-gradient(120% 200% at 100% 0%, rgba(255, 121, 27, 0.18) 0%, transparent 55%),
    radial-gradient(120% 200% at 0% 100%, rgba(140, 71, 210, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #15151a 0%, #0c0c10 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.seller-cta-box h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.seller-cta-box p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.seller-cta-box .btn {
  margin-bottom: 0;
  white-space: nowrap;
}

/* =============================================================
   BRAND DETAIL MODAL — premium / refined
   ============================================================= */

.brand-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 6, 0.65);
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: var(--space-3xl) var(--space-md);
}

.brand-modal.open {
  display: flex;
  animation: modal-fade 0.25s ease-out;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.brand-modal__panel {
  width: 100%;
  max-width: 820px;
  height: fit-content;
  background:
    radial-gradient(100% 60% at 50% 0%, #1a1a20 0%, #0b0b10 70%);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 60px 120px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: modal-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-rise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);     opacity: 1; }
}

.brand-modal__header {
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 11, 16, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-modal__title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-modal__title-block .brand-logo {
  width: 52px;
  height: 52px;
  font-size: 26px;
}

.brand-modal__title-block h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-modal__action {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  transition: all var(--transition-base);
}

.brand-modal__action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

.brand-modal__action svg {
  display: block;
}

/* "Copied" feedback toast — sits to the left of the copy button. */
.brand-modal__action-feedback {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.brand-modal__action.is-copied .brand-modal__action-feedback {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Light theme variants */
.theme-light .brand-modal__action {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}

.theme-light .brand-modal__action:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
}

/* Pricing banner — large valuation hero */
.modal-pricing-banner {
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-pricing-banner__group {
  display: flex;
  align-items: center;
  gap: 32px;
}

.modal-pricing-stat__label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 6px;
}

.modal-pricing-stat__value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1;
}

.modal-pricing-stat__value--sm {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-pricing-stat__sub {
  font-weight: 400;
  color: var(--color-text-muted);
}

.modal-pricing-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
}

.modal-tier-pill {
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--tier-color), transparent 40%);
  background: color-mix(in srgb, var(--tier-color), transparent 82%);
  color: var(--tier-color);
}

/* Includes row */
.modal-includes {
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.modal-includes__label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-right: 4px;
}

.modal-includes__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  text-decoration: none;
}

/* Clickable variant (domain link) — same look at rest, brightens on hover */
.modal-includes__pill--link {
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.modal-includes__pill--link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text);
}

.theme-light .modal-includes__pill--link:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}

/* Line-style icons inside the includes pills (leading + trailing).
   Same Feather/Lucide visual language as the external-link glyph used
   on the meta-line link, sized in em so they scale with the pill text. */
.modal-includes__pill-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Trailing external-link icon (on the domain link pill) — slightly
   smaller and more muted, with a subtle nudge on hover. */
.modal-includes__pill-icon--trail {
  width: 0.85em;
  height: 0.85em;
  margin-left: 2px;
  opacity: 0.55;
}

.modal-includes__pill--link:hover .modal-includes__pill-icon--trail {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Two-column split — screenshot on the left (sticky), data sections on
   the right. Falls back to a single column on narrow viewports. */
.brand-detail__split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-xl);
}

.brand-detail__screenshot {
  position: sticky;
  top: 110px; /* clears the global fixed header */
}

.brand-detail__screenshot a {
  display: block;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 40px -12px rgba(0, 0, 0, 0.14);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.brand-detail__screenshot a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 24px 56px -12px rgba(0, 0, 0, 0.22);
}

.brand-detail__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16; /* approximate "phone-like" preview */
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 900px) {
  .brand-detail__split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .brand-detail__screenshot {
    position: static;
    max-width: 360px;
  }
  .brand-detail__screenshot img {
    aspect-ratio: 16 / 10; /* desktop-letterbox-ish for the small preview */
  }
}

/* Body sections — no own padding now that they live inside the
   .brand-detail__split right column. The split's gap provides the
   horizontal separation from the screenshot, and the first section
   sits flush with the top of its column.

   Mask lives here (not on .brand-detail__content) so the sticky
   screenshot in the other split column keeps a clean drop shadow,
   uncut by a containing mask. JS updates --fade-y-start / --fade-y-end
   on scroll so the fade band tracks the sticky pill at the viewport
   bottom. */
.modal-body {
  padding: 0;
  /* Grid item must be allowed to shrink below its content's intrinsic width,
     otherwise a wide data table stretches this column and forces the whole
     page to scroll sideways instead of the table scrolling inside its wrap. */
  min-width: 0;
  --fade-y-start: calc(100% - 120px);
  --fade-y-end: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--fade-y-start), transparent var(--fade-y-end));
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--fade-y-start), transparent var(--fade-y-end));
}

.modal-section + .modal-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-section__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-section__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.modal-section__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.modal-section__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
  font-weight: 400;
}

/* Data tables (revenue / activity) — scroll horizontally within their own
   wrapper (never the whole page) with a subtle, non-system scrollbar. */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.data-table-wrap::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.data-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.data-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 9999px;
}

.data-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

.data-table {
  width: 100%;
  /* Keep the columns at their natural, readable width; when that exceeds the
     wrapper (small screens) the wrapper scrolls instead of squashing cells. */
  min-width: max-content;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 11px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

.data-table th {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.data-table .row-group-label {
  padding: 18px 14px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  border-bottom: none;
}

.row-group-label--revenue { color: #5BE3B0; }
.row-group-label--costs   { color: #F87171; }

.data-table tr.row-revenue td { color: #5BE3B0; }
.data-table tr.row-cost    td { color: var(--color-text-muted); }
.data-table tr.row-cost    td:first-child { color: var(--color-text-secondary); }

.data-table tr.row-divider td {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table tr.row-profit td {
  font-weight: 700;
  font-size: var(--text-base);
  padding-top: 14px;
  padding-bottom: 14px;
}

.data-table tr.row-profit td:first-child {
  color: var(--color-text);
}

.data-table tr.row-margin td {
  font-size: var(--text-xs);
  padding-top: 6px;
}

.data-table tr.row-margin td:first-child {
  color: var(--color-text-muted);
  font-weight: 400;
}

.value-dash { color: rgba(255, 255, 255, 0.15); }

/* Subtle row hover — works in both themes. Group-label rows and
   the divider don't get the highlight (their padding/layout is different). */
.data-table tbody tr {
  transition: background-color var(--transition-base);
}

.data-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.04);
}

.data-table tbody tr:has(> td.row-group-label):hover td,
.data-table tbody tr.row-divider:hover td {
  background-color: transparent;
}

.theme-light .data-table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 0.025);
}

.theme-light .data-table tbody tr:has(> td.row-group-label):hover td,
.theme-light .data-table tbody tr.row-divider:hover td {
  background-color: transparent;
}

.profit-good { color: #5BE3B0; }
.profit-mid  { color: #F5C16C; }
.profit-bad  { color: #F87171; }

/* Metric pills */
.metric-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.metric-pills--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}

.metric-pill {
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 16px 18px;
  flex: 1;
  min-width: 140px;
}

.metric-pill__label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 6px;
}

.metric-pill__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.metric-pill__suffix {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 2px;
}

/* Traffic split bar */
.traffic-split-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 12px;
}

.traffic-bar {
  display: flex;
  align-items: center;
  gap: 18px;
}

.traffic-bar__track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
}

.traffic-bar__organic {
  background: linear-gradient(90deg, #10B981, #5BE3B0);
}

.traffic-bar__paid {
  background: linear-gradient(90deg, #818CF8, #A78BFA);
}

.traffic-bar__legend {
  display: flex;
  gap: 18px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.traffic-bar__legend .organic { color: #5BE3B0; }
.traffic-bar__legend .paid    { color: #A78BFA; }

/* Modal footer CTA */
.brand-modal__footer {
  padding: 22px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
}

.brand-modal__footer .footer-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 400;
}

.brand-modal__footer .btn {
  margin-bottom: 0;
}

/* =============================================================
   IN-PLACE BRAND DETAIL
   When a listing is clicked, the grid + filter + heading hide
   and the detail view renders in-place under a back button.
   ============================================================= */

/* When a listing detail is open we hide the surrounding marketplace UI
   so the user can focus on a single brand. The class lives on <body> so
   it can reach sibling sections (seller CTA, pricing footnote, closing CTA).
   The hero stays visible above for page context. */
.marketplace-detail-open .listings-section .sc-section-header,
.marketplace-detail-open .listings-section .listings-toolbar,
.marketplace-detail-open #brand-listings,
.marketplace-detail-open .seller-cta-section,
.marketplace-detail-open .multiplier-section--footnote,
.marketplace-detail-open .cta.accent-background {
  display: none;
}

.brand-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-detail[hidden] {
  display: none;
}

/* Back arrow link — big display-text style, no pill chrome */
.brand-detail__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--space-lg);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  /* font-size + weight come from .font-black */
  line-height: 1;
  cursor: pointer;
  letter-spacing: -0.02em;
  transition: color var(--transition-base);
}

.brand-detail__back svg {
  width: 0.7em;
  height: 0.7em;
  stroke-width: 2.5;
  transition: transform var(--transition-base);
}

.brand-detail__back:hover {
  color: var(--color-text);
}

.brand-detail__back:hover svg {
  transform: translateX(-0.15em);
}

@media (max-width: 700px) {
  .brand-detail__back {
    font-size: var(--text-4xl);
  }
}

/* Header: title block + copy action — same layout as the modal had */
.brand-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.brand-detail__title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-detail__title-block .brand-logo {
  width: 52px;
  height: 52px;
  font-size: 26px;
}

.brand-detail__title-block h2 {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.brand-detail__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-detail__action {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-base);
}

.brand-detail__action:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-border-light);
  color: var(--color-text);
}

.brand-detail__action svg { display: block; }

.brand-detail__action-feedback {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.brand-detail__action.is-copied .brand-detail__action-feedback {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Small bottom padding so the last item doesn't sit directly flush
   against the dock when scrolled to the end. The mask itself lives
   on .modal-body (see below) so the sticky screenshot's drop shadow
   isn't clipped by a containing mask. */
.brand-detail__content {
  padding-bottom: var(--space-md);
}

/* Sticky dock — pure container for the pill, no backdrop or mask of
   its own. Pins to viewport bottom while #brand-detail is in view,
   then parks at the container's bottom edge so it never overlays the
   page footer or anything outside the listing section. */
.brand-detail__dock {
  position: sticky;
  bottom: var(--space-lg);
  z-index: 10;
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
  pointer-events: none; /* lets scroll pass through the empty bits */
}

/* Contained pill capsule — three sections: brand summary · asking
   price · CTA. No mask, fully opaque against the dock backdrop. */
.brand-detail__footer {
  pointer-events: auto;
  width: 100%;
  max-width: 1100px;

  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 14px 14px 14px 24px;

  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 40px -12px rgba(0, 0, 0, 0.18);
}

.brand-detail__footer-group {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.brand-detail__footer-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.brand-detail__footer-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-detail__footer-name {
  color: var(--color-primary);
}

.brand-detail__footer-tier {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tier-color, var(--color-text-muted));
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tier-color, var(--color-text-muted)), transparent 90%);
  white-space: nowrap;
}

.brand-detail__footer-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: var(--color-border);
}

.brand-detail__footer-cta {
  margin-bottom: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* Responsive: collapse the bar on narrow viewports */
@media (max-width: 800px) {
  .brand-detail__footer {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-3xl);
  }

  .brand-detail__footer-sep {
    display: none;
  }

  .brand-detail__footer-cta {
    width: 100%;
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   Theme-light overrides for the inner content blocks.
   These classes (.modal-*) are reused from the old modal layout
   and need light-theme treatments now that they live in-place
   inside the theme-light story-arc.
   ───────────────────────────────────────────────────────────── */

/* Pricing banner — clean, no background wash */
.theme-light .modal-pricing-banner {
  border-bottom-color: var(--color-border);
}

.theme-light .modal-pricing-divider {
  background: var(--color-border);
}

/* Includes row */
.theme-light .modal-includes {
  border-bottom-color: var(--color-border);
}

.theme-light .modal-includes__pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}

/* Section dividers */
.theme-light .modal-section + .modal-section {
  border-top-color: var(--color-border);
}

/* Data table — table cells and group labels */
.theme-light .data-table th,
.theme-light .data-table td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.theme-light .data-table th {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.theme-light .data-table tr.row-divider td {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.theme-light .row-group-label--revenue { color: #047857; }
.theme-light .row-group-label--costs   { color: #B91C1C; }

.theme-light .data-table tr.row-revenue td { color: #047857; }
.theme-light .data-table tr.row-cost    td { color: var(--color-text-muted); }
.theme-light .data-table tr.row-cost    td:first-child { color: var(--color-text-secondary); }

.theme-light .value-dash { color: rgba(0, 0, 0, 0.18); }

.theme-light .profit-good { color: #047857; }
.theme-light .profit-mid  { color: #B45309; }
.theme-light .profit-bad  { color: #B91C1C; }

/* Metric pills */
.theme-light .metric-pill {
  background: rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Traffic split bar */
.theme-light .traffic-bar__track {
  background: rgba(0, 0, 0, 0.06);
}

.theme-light .traffic-bar__legend .organic { color: #047857; }
.theme-light .traffic-bar__legend .paid    { color: #4F46E5; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .brand-detail__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-detail__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .brand-detail__footer .btn {
    width: 100%;
  }
}

/* =============================================================
   THEME-LIGHT OVERRIDES
   When the marketplace lives inside a .theme-light story-arc,
   every dark-glass component needs a paper-white counterpart.
   ============================================================= */

/* — Hero pill — theme-light override lives with the .live-pill rules in style.css */

/* — Market filter (segmented control) — */
.theme-light .market-filter {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.theme-light .market-filter-btn {
  color: var(--color-text-muted);
}

.theme-light .market-filter-btn:hover {
  color: var(--color-text);
}

.theme-light .market-filter-btn.active {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* — Brand card — */
.theme-light .brand-card {
  background:
    radial-gradient(120% 120% at 0% 0%,
      var(--color-surface-elevated) 0%,
      var(--color-surface) 75%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.theme-light .brand-card:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 12px 32px -8px rgba(0, 0, 0, 0.12);
}

.theme-light .brand-logo {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-light) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-light .brand-tm-badge {
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

.theme-light .brand-meta .dot {
  background: var(--color-text-muted);
}

/* — Metric strip (the dark inset row) — */
.theme-light .brand-metrics-strip {
  background: rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.theme-light .brand-metric-cell + .brand-metric-cell::before {
  background: rgba(0, 0, 0, 0.08);
}

/* Stronger metric semantic colors so they read on light bg */
.theme-light .metric-value.metric-positive { color: #059669; }
.theme-light .metric-value.metric-warning  { color: #B45309; }
.theme-light .metric-value.metric-negative { color: #DC2626; }

/* — Seller CTA box — */
.theme-light .seller-cta-box {
  background:
    radial-gradient(120% 200% at 100% 0%, rgba(255, 121, 27, 0.10) 0%, transparent 55%),
    radial-gradient(120% 200% at 0% 100%, rgba(140, 71, 210, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.03);
}

/* — Pricing tier cards (in case ever placed in a theme-light arc) — */
.theme-light .tier-card {
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--tier-light-highlight, #ffffff) 0%,
      var(--tier-light-bg, var(--color-surface)) 75%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.theme-light .tier-card:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 8px 24px -8px rgba(0, 0, 0, 0.08);
}

/* Light theme tier color overrides — deeper hues for AA contrast on white */
.theme-light .tier-early       { --tier-color: #B45309; }
.theme-light .tier-growth      { --tier-color: #4F46E5; }
.theme-light .tier-established { --tier-color: #047857; }

.theme-light .tier-card.tier-early {
  --tier-light-bg: #FEF7EC;
  --tier-light-highlight: #FFFBF4;
}
.theme-light .tier-card.tier-growth {
  --tier-light-bg: #F1F2FE;
  --tier-light-highlight: #F8F9FF;
}
.theme-light .tier-card.tier-established {
  --tier-light-bg: #ECFAF3;
  --tier-light-highlight: #F4FDF9;
}

.theme-light .tier-card .multi-months {
  color: var(--color-text);
}

.theme-light .tier-card .multi-desc {
  color: var(--color-text-muted);
}

/* =============================================================
   PRICING FOOTNOTE VARIANT
   Compact, quieter take on the multiplier section — sits under
   the seller CTA as a footnote, not a main section.
   ============================================================= */

.multiplier-section--footnote {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.multiplier-section--footnote .footnote-header {
  margin: 0 0 var(--space-sm);
}

.multiplier-section--footnote .footnote-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* 2-col layout: table on the left, description aside on the right,
   separated by a thin vertical hairline. */
.multiplier-layout {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  align-items: center;
  gap: var(--space-2xl);
}

.multiplier-aside {
  padding-left: var(--space-2xl);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-light .multiplier-aside {
  border-left-color: rgba(0, 0, 0, 0.1);
}

.multiplier-aside p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* Stack on small screens — separator becomes a horizontal rule above. */
  .multiplier-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .multiplier-aside {
    padding-left: 0;
    padding-top: var(--space-lg);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .theme-light .multiplier-aside {
    border-top-color: rgba(0, 0, 0, 0.1);
  }
}

/* Table-style tier rows — thin top dividers, no boxes — full width.
   First row's top border is omitted because the footnote-header already
   provides a bottom rule, avoiding a doubled line. */
.multiplier-grid--compact {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tier-card--compact {
  display: grid;
  grid-template-columns: 80px minmax(180px, 1fr) 2fr;
  align-items: center;
  gap: var(--space-xl);
  padding: 18px var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Reset the box-ish defaults inherited from .tier-card */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}


.tier-card--compact:hover {
  background: transparent;
  box-shadow: none;
}

.tier-card--compact .multi-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  /* tier-color comes from .tier-early / .tier-growth / .tier-established */
}

.tier-card--compact .multi-meta {
  display: contents;
}

.tier-card--compact .multi-months {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 0;
  letter-spacing: 0;
}

.tier-card--compact .multi-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 0;
  line-height: 1.5;
  text-align: left;
}

/* Light theme: darker hairlines */
.theme-light .multiplier-grid--compact {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.theme-light .tier-card--compact {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: transparent;
  box-shadow: none;
}

.theme-light .tier-card--compact:hover {
  background: transparent;
  box-shadow: none;
}

@media (max-width: 600px) {
  .tier-card--compact {
    grid-template-columns: 48px 1fr;
    gap: 14px;
  }

  .tier-card--compact .multi-desc {
    grid-column: 2;
    text-align: left;
  }
}

/* — Section dividers' card-cta-hint readable on light — */
.theme-light .brand-card-cta-hint {
  color: var(--color-text-muted);
}

.theme-light .brand-card:hover .brand-card-cta-hint {
  color: var(--color-text-secondary);
}