/* ad-research — editorial dark.
   Palette mirrors pixelgate-landing: warm-cool monochrome surface stack,
   accent green used sparingly, gold for emphasis, Fraunces serif italics for
   display headlines. No gradients, no soft shadows; hierarchy emerges from
   stroke + surface lift + a tiny double-bezel on the most-important cards.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surface stack — same hierarchy as pixelgate. */
  --bg:           #0c0d0f;
  --bg-2:         #131418;
  --surface:      #1a1c21;
  --surface-2:    #21242a;
  --surface-3:    #2b2f37;

  /* Strokes. line-strong is for card outlines, line for inner dividers. */
  --line:         #25282e;
  --line-strong:  #353a43;

  /* Foreground stack — fg=primary, fg-2=labels, fg-3=meta, muted=de-emphasized. */
  --fg:           #f3f4f6;
  --fg-2:         #bdc2cb;
  --fg-3:         #8a8f99;
  --muted:        #5d626b;

  /* Accents. Accent green for actions + brand mark; gold for serif emphasis
     in headlines. Both used very sparingly — most of the page is monochrome. */
  --accent:       #c8e94f;
  --accent-soft:  #c8e94f1a;
  --accent-deep:  #97b53d;
  --gold:         #d4af6b;
  --gold-soft:    #d4af6b1a;

  /* State colors — only for badges, never for headings. */
  --ok:           #8fc879;
  --warn:         #f1c878;
  --error:        #ef8077;

  --mono:         "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif:        "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:         "Inter", -apple-system, system-ui, sans-serif;

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing rhythm. Use these instead of arbitrary px. */
  --gap-1: 6px;  --gap-2: 12px; --gap-3: 18px; --gap-4: 28px;
  --gap-5: 44px; --gap-6: 72px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: color 0.18s var(--ease); }
a:hover { color: var(--fg); }

code, pre { font-family: var(--mono); }

/* ── Type scale */
h1, h2, h3, h4 { color: var(--fg); letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: 40px; line-height: 1.05; margin: 0 0 var(--gap-3); }
h1 .em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold); }
h2 { font-size: 22px; margin: var(--gap-4) 0 var(--gap-2); }
h3 { font-size: 17px; margin: var(--gap-3) 0 var(--gap-2); }
h4 { font-size: 14px; margin: var(--gap-2) 0; color: var(--fg-2); font-weight: 500; }

p { margin: 0 0 var(--gap-2); color: var(--fg-2); }
.dim   { color: var(--fg-3); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny  { font-size: 11.5px; letter-spacing: 0.04em; }
.serif { font-family: var(--serif); }

/* Mono section labels — `[ section.name ]` pattern from pixelgate-landing.
   Adds editorial structure without competing with the headline. */
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--gap-2);
  display: inline-block;
}
.mono-label::before { content: "[ "; opacity: 0.6; }
.mono-label::after  { content: " ]"; opacity: 0.6; }

/* ── Top bar (sticky, minimal) */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(12, 13, 15, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-weight: 400; font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover { color: var(--fg); }
.brand:hover .dot { transform: scale(1.4); box-shadow: 0 0 12px var(--accent); }
.brand .dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--accent); border-radius: 50%;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

/* SVG logo — sized to match the cap-height of the adjacent brand text so it
   reads as part of the wordmark, not a standalone graphic. 16px ≈ text
   cap-height when font-size is 16px. Pulse animation removed — a pulsing
   logo in the top-left of every page was visually noisy. Hover gets a subtle
   rotate instead. */
/* 14px matches cap-height of 16px text — feels balanced next to the wordmark.
   !important to defeat any browser-cached older copy of this stylesheet. */
.brand .logo {
  width: 14px !important;
  height: 14px !important;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.brand:hover .logo {
  transform: rotate(45deg);
}
.brand-name { color: var(--fg-2); font-weight: 400; }
.brand-name strong {
  color: var(--fg); font-weight: 700;
  letter-spacing: 0.02em;
}
.brand-tag {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
@media (max-width: 640px) { .brand-tag { display: none; } }
.topbar-actions { display: flex; align-items: center; gap: var(--gap-3); }
.topbar-actions a { color: var(--fg-3); font-size: 13px; }

/* ── Main column */
main {
  flex: 1;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: var(--gap-5) 32px var(--gap-6);
}

/* ── Section header pattern (mono-label + display headline + meta line) */
.section-hero {
  margin-bottom: var(--gap-5);
}
.section-hero p {
  font-size: 15px; max-width: 56ch;
}

/* ── Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--gap-4) var(--gap-4);
  margin-bottom: var(--gap-3);
}
.card.tight { padding: var(--gap-3); }
.card.lift {
  /* Subtle double-bezel for hero cards — pixelgate-landing pattern */
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: var(--gap-4);
}
.card.lift > .inner {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: var(--gap-4) var(--gap-4);
}
.card.subtle { background: var(--bg-2); border-color: var(--line); }
.card.error  { border-color: var(--error); }
.card details { cursor: pointer; }
.card summary { cursor: pointer; user-select: none; color: var(--fg-2); list-style: none; }
.card summary::-webkit-details-marker { display: none; }
.card summary::before {
  content: "▸ "; color: var(--muted); transition: transform 0.18s var(--ease);
  display: inline-block;
}
.card details[open] summary::before { content: "▾ "; }

/* ── Forms */
.form { display: flex; flex-direction: column; gap: var(--gap-3); }
.form .intent-row {
  display: flex; flex-direction: column; gap: var(--gap-1);
}
.form .intent-row > input {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  padding: var(--gap-3) var(--gap-3);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--fg);
  outline: none;
  letter-spacing: -0.01em;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.form .intent-row > input:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.form .intent-row > input::placeholder { color: var(--muted); font-style: italic; }
.form label {
  display: flex; flex-direction: column; gap: var(--gap-1);
  font-size: 13px;
  color: var(--fg-3);
}
.form label > span:not(.value) {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.form input[type=text], .form input[type=number], .form select {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  font: 14px/1.4 var(--sans);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.18s var(--ease);
}
.form input:focus, .form select:focus { border-color: var(--accent); }

.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-3); }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-3); }

.toggles { display: flex; gap: var(--gap-3); flex-wrap: wrap; align-items: center; padding-top: 6px; }
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.toggle input { accent-color: var(--accent); margin: 0; }

details.advanced > summary {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  padding: 6px 0;
}
details.advanced > .content {
  margin-top: var(--gap-3);
  padding-top: var(--gap-3);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--gap-3);
}

.actions {
  display: flex; align-items: center; gap: var(--gap-3);
  margin-top: var(--gap-2);
}
.btn {
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.01em;
  padding: 12px 24px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s var(--ease), transform 0.15s var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: #0c0d0e;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--accent); }
.hint-inline { color: var(--fg-3); font-size: 13px; }

/* ── Session list — card grid */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap-3);
  margin-top: var(--gap-3);
}
.session-card {
  display: flex; flex-direction: column; gap: var(--gap-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--gap-3) var(--gap-3) var(--gap-3);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
  color: inherit;
  text-decoration: none;
  position: relative;
  min-height: 156px;
}
.session-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  color: inherit;
  text-decoration: none;
}
.session-card .top-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-2);
}
.session-card .intent {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Clamp long intents */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.session-card .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
}
.session-card .tags .tag {
  border: 1px solid var(--line-strong);
  padding: 3px 8px;
  border-radius: 4px;
}
.session-card .signals {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.session-card .signals .top-brand {
  color: var(--fg-2);
  font-family: var(--sans);
  font-weight: 500;
}
.session-card .signals .meta {
  color: var(--fg-3);
  font-size: 12.5px;
}

/* ── State badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}
.badge-done     { color: var(--ok); }
.badge-running, .badge-starting { color: var(--warn); }
.badge-running::before, .badge-starting::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.badge-failed   { color: var(--error); }
.badge-cancelled { color: var(--muted); }
.badge-unknown  { color: var(--muted); }

/* ── Stage timeline (running view) */
.stages {
  display: flex; flex-direction: column;
  gap: 4px;
  margin: var(--gap-3) 0;
}
.stage {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.stage.running { border-color: var(--accent); background: var(--accent-soft); }
.stage.done    { opacity: 0.7; }
.stage .step {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg-3);
}
.stage.running .step { background: var(--accent); color: #0c0d0e; border-color: var(--accent); }
.stage.done .step    { background: var(--surface-2); color: var(--ok); border-color: var(--ok); }
.stage.done .step::after { content: "✓"; font-size: 13px; }
.stage.done .step .num   { display: none; }
.stage .label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
}
.stage .label .title { color: var(--fg); font-weight: 500; }
.stage .label .detail {
  color: var(--fg-3); font-size: 12.5px; font-family: var(--mono); letter-spacing: 0.02em;
}
.stage .count {
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-3);
}
.progress-bar {
  margin-top: var(--gap-2);
  height: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.live-headline {
  font-size: 14px; color: var(--fg-2); margin: 0 0 var(--gap-1);
}
.live-headline .em { color: var(--accent); font-weight: 500; }

/* ── Brand cards (done view) */
.session-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-2);
  margin: var(--gap-3) 0 var(--gap-5);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--gap-3);
  display: flex; flex-direction: column; gap: 4px;
}
.stat .num {
  font-family: var(--serif);
  font-size: 30px; font-weight: 500; line-height: 1;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.stat .num.em { color: var(--accent); }
.stat .label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
}

/* Brand list — two columns: sticky nav + scrolling content */
.brands-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--gap-4);
  align-items: start;
}
.brands-nav {
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 8px;
}
.brands-nav .nav-title {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 var(--gap-2);
}
.brands-nav ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.brands-nav a {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--fg-3);
  font-size: 13px; line-height: 1.3;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  text-decoration: none;
}
.brands-nav a:hover { color: var(--fg); background: var(--surface); }
.brands-nav .rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  min-width: 18px;
}

.brand-card {
  scroll-margin-top: 90px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--gap-4);
  margin-bottom: var(--gap-3);
}
.brand-card.hero {
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-card.hero > .inner {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: var(--gap-4);
}
.brand-card .rank-row {
  display: flex; align-items: center; gap: var(--gap-2);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--gap-2);
}
.brand-card .rank-row .num { color: var(--gold); }
.brand-card h2 {
  font-family: var(--serif);
  font-size: 28px; font-weight: 500;
  margin: 0 0 var(--gap-1);
  color: var(--fg);
  letter-spacing: -0.02em;
}
.brand-card.hero h2 { font-size: 34px; }
.brand-card .lander-line {
  font-size: 13px; margin: 0 0 var(--gap-3);
}
.brand-card .lander-line a {
  font-family: var(--mono);
  color: var(--accent); font-size: 12.5px;
}
.brand-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--gap-2);
  margin-bottom: var(--gap-3);
}
.brand-stats .stat-mini {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.brand-stats .stat-mini .num {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; line-height: 1;
  color: var(--fg);
}
.brand-stats .stat-mini .label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
}
.brand-stats .stat-mini.em .num { color: var(--accent); }
.brand-stats .stat-mini.warn .num { color: var(--warn); }

.chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--gap-2) 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  background: var(--surface-2);
}
.chip.accent     { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip.gold       { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.chip.muted      { color: var(--fg-3); }
.chip.danger     { color: var(--error); border-color: var(--error); }

/* Teardown prose (Sonnet output) */
.teardown {
  margin: var(--gap-3) 0;
  padding: var(--gap-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.teardown strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--gold);
  display: block;
  margin: var(--gap-3) 0 var(--gap-1);
  letter-spacing: -0.01em;
}
.teardown strong:first-child { margin-top: 0; }
.teardown p { color: var(--fg-2); line-height: 1.65; margin: 0 0 var(--gap-2); }
.teardown ul { margin: 4px 0 var(--gap-2) 20px; padding: 0; }
.teardown ul li { color: var(--fg-2); line-height: 1.6; margin: 4px 0; }
.teardown ul li strong {
  display: inline;
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  color: var(--fg);
  margin: 0;
}

/* Brand details sections */
.section-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gap-3) 0;
}
.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--gap-2);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.kv:last-child { border-bottom: 0; }
.kv .k {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.kv .v { color: var(--fg-2); }

.headings-list { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.headings-list .h { color: var(--fg-2); padding: 2px 0; }
.headings-list .h::before { content: "▸"; color: var(--muted); margin-right: 6px; }

/* Sample ad copy callout */
.sample-quote {
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  padding: var(--gap-2) var(--gap-3);
  margin: var(--gap-3) 0 0;
  font-style: italic;
  color: var(--fg-3);
  font-size: 13px;
}
.sample-quote::before {
  content: "Sample ad creative — ";
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); display: block;
  margin-bottom: 4px;
}

/* ── Code / log blocks */
pre.log, pre.cmd {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--gap-3);
  font: 12.5px/1.55 var(--mono);
  color: var(--fg-2);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
}
pre.cmd { color: var(--fg-3); font-size: 12px; }

/* ── Back / nav links */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--fg-3);
  padding: 6px 0;
}
.back-link:hover { color: var(--accent); }

/* Footer — branded, two-column layout. Logo + tagline on the left, nav links
   on the right. Wraps to stacked on narrow screens. */
.footbar {
  border-top: 1px solid var(--line);
  padding: var(--gap-3) 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-3); flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.foot-left, .foot-right {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.foot-left strong {
  color: var(--fg-2); font-weight: 600;
  letter-spacing: 0.01em;
}
.foot-left > span:first-of-type, .foot-left > span:nth-of-type(2) {
  /* "Pixelgate Recon" wordmark — slightly brighter than the tag */
  color: var(--fg-3);
}
.foot-logo {
  width: 16px; height: 16px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}
.foot-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-dot { color: var(--line-strong); margin: 0 2px; }
.foot-right a {
  color: var(--fg-3); text-decoration: none;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 0;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.foot-right a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-build {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .footbar { flex-direction: column; gap: var(--gap-2); text-align: center; }
  .foot-left, .foot-right { justify-content: center; }
}

/* Sticky table header — used by master + merged-advertisers tables.
   The scrolling parent must be the table wrapper for sticky to anchor. */
.table-scroll {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  max-height: 78vh;
}
.table-scroll thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-2);
  /* Subtle border to separate sticky header from scrolled rows */
  box-shadow: inset 0 -1px 0 var(--line-strong);
}

/* ── Responsive */
@media (max-width: 960px) {
  .brands-layout { grid-template-columns: 1fr; }
  .brands-nav    { position: static; max-height: none; }
}
@media (max-width: 720px) {
  main { padding: var(--gap-4) 16px var(--gap-5); }
  .topbar { padding: 12px 16px; }
  h1 { font-size: 30px; }
  .session-grid { grid-template-columns: 1fr; }
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .form .intent-row > input { font-size: 18px; }
}