/* ============================================================
   SCOUT RECON — product components (landing v2 + dashboard demo)
   Layered on tokens.css + site.css. Theme-driven; Recon defaults light.
   The "Inside the platform" peek band is always dark by design.
   ============================================================ */

/* ---- Nav: For-agencies pill badge ---- */
.recon-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent-text);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px;
}

/* ============================================================
   LANDING V2 — "Inside the platform" interactive feature band
   ============================================================ */
.peek { background: #0B0B0B; color: #F5F5F7;
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.peek-inner { max-width: 1160px; margin: 0 auto; padding: 104px 24px; }
.peek-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.peek-head .eyebrow { color: #5FB8F2; }
.peek-head h2 { font-size: clamp(30px, 4.4vw, 40px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; margin: 0 0 18px; }
.peek-head p { font-size: 18px; line-height: 1.6; color: #B5B5B8; margin: 0 auto; max-width: 580px; }

.peek-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; }
.peek-tabs { display: flex; flex-direction: column; gap: 12px; }
.peek-tab { cursor: pointer; border-radius: 14px; padding: 18px 22px; text-align: left;
  width: 100%; background: #161616; border: 1px solid rgba(255,255,255,.08);
  transition: border-color .25s ease, background .25s ease; color: inherit; font: inherit; }
.peek-tab:hover { background: #1A1A1A; border-color: rgba(255,255,255,.16); }
.peek-tab .tlabel { display: flex; align-items: center; gap: 10px; }
.peek-tab .tdot { width: 9px; height: 9px; border-radius: 50%; flex: none; transition: box-shadow .25s ease; }
.peek-tab .tname { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: #86868B; }
.peek-tab h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 0;
  color: #B5B5B8; transition: color .25s ease; }
.peek-tab p { font-size: 14.5px; line-height: 1.55; color: #B5B5B8; margin: 9px 0 0; display: none; }
.peek-tab[aria-selected="true"] h3 { color: #F5F5F7; }
.peek-tab[aria-selected="true"] p { display: block; }
.peek-tab[aria-selected="true"] .tname { color: var(--tc, #5FB8F2); }
.peek-tab[aria-selected="true"] { background: var(--tbg, rgba(14,143,230,.09));
  border-color: var(--tbc, rgba(14,143,230,.5)); }
.peek-tab[aria-selected="true"] .tdot { box-shadow: 0 0 0 4px var(--tbg, rgba(14,143,230,.18)); }

.peek-window { position: relative; }
.peek-window .glow { position: absolute; inset: -30px; pointer-events: none;
  background: radial-gradient(ellipse 68% 68% at 55% 36%, rgba(14,143,230,.30), transparent 72%); }
.peek-frame { position: relative; border-radius: 16px; overflow: hidden; background: #0B0B0B;
  border: 1px solid rgba(95,184,242,.22); box-shadow: 0 40px 90px -28px rgba(0,0,0,.9); }
.peek-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #161616;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.peek-bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.peek-bar .crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; }
.peek-screens { position: relative; min-height: 408px; background: #0B0B0B; }
.peek-screen { position: absolute; inset: 0; padding: 26px 28px; opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.peek-screen[aria-hidden="false"] { opacity: 1; transform: none; position: relative; pointer-events: auto; }

/* dark mini-panels inside the peek window */
.pk-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #F5F5F7; margin: 0 0 2px; }
.pk-sub { font-size: 12.5px; color: #86868B; margin: 0 0 18px; }
.pk-note { font-size: 11.5px; color: #86868B; margin: 16px 0 0; line-height: 1.45; }
.pk-row { display: grid; gap: 10px 8px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); padding-top: 11px; margin-top: 11px; }
.pk-head { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: #86868B; border: 0; padding: 0; margin: 0; }
.pk-attr { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.pk-cell { font-size: 13.5px; color: #B5B5B8; text-align: right; }
.pk-ch { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: #F5F5F7; }
.pk-sq { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.pk-cell.hot { color: #5FB8F2; font-weight: 600; }
.pk-eng { margin-bottom: 16px; }
.pk-eng .pk-eline { display: flex; justify-content: space-between; font-size: 13px; color: #F5F5F7; margin-bottom: 7px; }
.pk-eng .pk-eline b { color: #B5B5B8; font-weight: 600; }
.pk-track { height: 8px; border-radius: 980px; background: #1E1E1E; overflow: hidden; }
.pk-fill { height: 8px; border-radius: 980px; }
.pk-list { display: flex; flex-direction: column; }
.pk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #F5F5F7; }
.pk-chip { font-size: 11px; font-weight: 600; color: #fff; border-radius: 980px; padding: 3px 10px; white-space: nowrap; }
.pk-calls { grid-template-columns: 1.2fr 1fr 1.1fr .6fr; }
.pk-matters { grid-template-columns: 1.7fr 1fr .9fr; }
.pk-mono { font-family: var(--font-mono); font-size: 12.5px; color: #B5B5B8; }

@media (max-width: 860px) {
  .peek-grid { grid-template-columns: 1fr; gap: 24px; }
  .peek-inner { padding: 72px 24px; }
}

/* ============================================================
   PRODUCT DASHBOARD DEMO (site/recon/dashboard.html)
   Theme-aware via data-theme on <html>.
   ============================================================ */
.dash-app { display: flex; min-height: 100vh; width: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); }
.dash-side { width: 236px; flex: none; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.dash-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 26px; }
.dash-brand .bolt { width: 22px; height: 22px; background: var(--accent); clip-path: var(--bolt); display: inline-block; }
.dash-brand span.wm { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-navlabel { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--text-3); padding: 26px 10px 10px; }
.dash-navitem { display: flex; align-items: center; padding: 11px 14px; border-radius: var(--r-control);
  font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; border: 0; background: transparent;
  width: 100%; text-align: left; font-family: inherit; }
.dash-navitem:hover { color: var(--text); }
.dash-navitem[aria-current="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dash-side .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.dash-side .foot span { font-size: 12.5px; color: var(--text-3); }

.dash-main { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg); }
.dash-wrap { max-width: 1060px; margin: 0 auto; padding: 36px 40px 72px; }
.dash-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 28px; }
.dash-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.dash-h1 { font-size: 33px; font-weight: 600; letter-spacing: -.03em; color: var(--text); margin: 0 0 8px; }
.dash-sub { font-size: 15.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.dash-pill { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-2);
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 8px 16px; cursor: default; }

.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; box-shadow: var(--shadow-sm); }
.dash-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 0 0 2px; }
.dash-card .csub { font-size: 12.5px; color: var(--text-3); margin: 0 0 20px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.dash-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.dash-kpi .kl { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.dash-kpi .kl .kdot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.dash-kpi .kl span { font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--text-2); }
.dash-kpi .kv { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dash-kpi .kv b { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.dash-kpi .kv em { font-size: 12.5px; font-weight: 600; font-style: normal; }
.dash-kpi svg { width: 100%; height: 26px; margin-top: 14px; display: block; overflow: visible; }
.dash-kpi .kcap { font-size: 11.5px; color: var(--text-3); margin: 10px 0 0; line-height: 1.4; }

.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-grid-ov { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.dash-screen { display: none; }
.dash-screen.active { display: block; }

.dash-table { display: grid; align-items: center; }
.dash-th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3); }
.dash-td { font-size: 14px; color: var(--text-2); border-top: 1px solid var(--line); padding: 12px 0; }
.dash-td.r { text-align: right; }
.dash-td.c { text-align: center; }
.dash-td.name { font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 9px; }
.dash-td.hot { font-weight: 600; color: var(--accent-text); }
.dash-td.mono { font-family: var(--font-mono); font-size: 13px; }
.dash-sq { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dash-tag { font-size: 11.5px; font-weight: 600; color: #fff; border-radius: 980px; padding: 3px 10px; white-space: nowrap; }
.dash-note { font-size: 11.5px; color: var(--text-3); margin: 18px 0 0; line-height: 1.45; }

.dash-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 172px; padding: 0 4px; }
.dash-barcol { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.dash-bar { width: 36px; display: flex; flex-direction: column-reverse; }
.dash-bar > div:first-child { border-radius: 0 0 3px 3px; }
.dash-bar > div:last-child { border-radius: 3px 3px 0 0; }
.dash-barcol span { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.dash-legend { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.dash-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.dash-legend i { width: 9px; height: 9px; border-radius: 2px; }
.dash-mixbar { display: flex; width: 100%; height: 14px; border-radius: 980px; overflow: hidden; margin-bottom: 22px; }
.dash-mixrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); margin-bottom: 11px; }
.dash-mixrow b { margin-left: auto; font-weight: 600; color: var(--text-2); }
.dash-eng { margin-bottom: 18px; }
.dash-eng .el { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); margin-bottom: 7px; }
.dash-eng .el b { color: var(--text-2); font-weight: 600; }
.dash-track { height: 8px; border-radius: 980px; background: var(--surface-2); overflow: hidden; }
.dash-fill { height: 8px; border-radius: 980px; }
.dash-line { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.dash-set { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dash-kv { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.dash-kv .k { font-size: 13.5px; color: var(--text-2); }
.dash-kv .v { font-size: 14px; font-weight: 500; color: var(--text); }
.dash-badge { font-size: 11.5px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 980px; padding: 3px 11px; }
.dash-badge.ghost { color: var(--accent-text); background: var(--surface-2); border: 1px solid var(--line); }
.dash-sw { width: 40px; height: 24px; border-radius: 980px; flex: none; cursor: pointer; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); transition: background .18s ease; }
.dash-sw .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .18s ease; }
.dash-sw[aria-checked="true"] { background: var(--accent); }
.dash-sw[aria-checked="true"] .knob { left: 18px; }
.dash-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); }
.dash-toggle .tt { font-size: 14px; font-weight: 500; color: var(--text); }
.dash-toggle .td { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.dash-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--surface-2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); }

@media (max-width: 900px) {
  .dash-side { display: none; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-grid-2, .dash-grid-ov, .dash-set { grid-template-columns: 1fr; }
  .dash-wrap { padding: 28px 20px 64px; }
}