html, body, button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
body {
  color: #0a0e14;
  background-color: #fbfaf6;
  /* Big square grid (~64px) painted as a single linear-gradient pair so it tiles
     edge-to-edge without seams. Stays subtle so it reads as paper, not graph paper. */
  background-image:
    linear-gradient(to right,  rgba(10, 14, 20, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 14, 20, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
.font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em; }

.kpi-card { border: 1px solid #e6e1d8; background: #ffffff; padding: 1rem 1.25rem; border-radius: 6px; }
.kpi-card .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6b6256; font-weight: 600; }
.kpi-card .value { font-size: 1.75rem; line-height: 1.1; font-weight: 700; margin-top: 0.25rem; color: #0a0e14; letter-spacing: -0.02em; }
.kpi-card .delta { font-size: 0.75rem; margin-top: 0.5rem; font-weight: 500; }

.section-rule { border-top: 1px solid #e6e1d8; }

/* Date picker bar */
.daterange { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; background: #ffffff; border: 1px solid #e6e1d8; border-radius: 6px; }
.daterange input[type=date], .daterange select { font-size: 0.825rem; padding: 0.25rem 0.4rem; border: 1px solid #e6e1d8; border-radius: 4px; background: #ffffff; }
.daterange button { font-size: 0.825rem; padding: 0.3rem 0.75rem; background: #0a8f5b; color: #ffffff; border-radius: 4px; font-weight: 500; }
.daterange button:hover { background: #087148; }

.preset-pill { padding: 0.3rem 0.7rem; border: 1px solid #e6e1d8; background: #ffffff; color: #4a4339; font-size: 0.75rem; border-radius: 999px; font-weight: 500; }
.preset-pill.active { background: #0a8f5b; color: #ffffff; border-color: #0a8f5b; }
.preset-pill:hover:not(.active) { border-color: #0a8f5b; color: #0a8f5b; }

/* Top-nav dropdown (Google Ads → Overview / Search / YouTube). Pure CSS:
   menu is hidden by default, revealed on :hover or :focus-within of the parent. */
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* Add a small invisible bridge so the menu doesn't close when crossing the gap. */
.dropdown::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 6px;
}

/* Section tabs (within Google/Meta detail) */
.subnav { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid #e6e1d8; }
.subnav a { padding: 0.6rem 0.95rem; font-size: 0.825rem; color: #6b6256; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.subnav a:hover { color: #0a8f5b; }
.subnav a.active { color: #0a0e14; border-bottom-color: #0a8f5b; font-weight: 600; }

/* Funnel */
.funnel-step { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px dashed #e6e1d8; }
.funnel-bar { background: linear-gradient(90deg, #0a8f5b, #34c790); height: 38px; border-radius: 4px; display: flex; align-items: center; padding-left: 0.75rem; color: #ffffff; font-weight: 600; font-size: 0.875rem; }
.funnel-bar.muted { background: linear-gradient(90deg, #b9b3a5, #d6d1c4); color: #2a2620; }
.funnel-label { font-size: 0.875rem; color: #4a4339; font-weight: 500; }
.funnel-meta { font-size: 0.75rem; color: #6b6256; }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6256; padding: 0.55rem 0.5rem; border-bottom: 1px solid #e6e1d8; font-weight: 600; background: #fbfaf6; }
table.data-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid #f1ede4; font-size: 0.85rem; }
table.data-table tr:hover td { background: #fdfbf3; }
table.data-table td.num, table.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table td.muted { color: #9a9183; }

/* Tooltips — visual affordance via dotted underline + cursor; the popover itself
   is rendered by JS (see tooltip.js) at body level so it isn't clipped by any
   `overflow: hidden` or `overflow-x: auto` table container. */
[data-tt] {
  cursor: help;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
}

/* JS-rendered tooltip element, appended to body once on first hover. */
.js-tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 9999;
  background: #0a0e14;
  color: #fbfaf6;
  padding: 8px 11px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  max-width: 280px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}