/* ===========================================================
   comp.dubvbox.com — shared design tokens + site shell
   Loaded by index.html and all three analysis pages.
   Each analysis page keeps its own layout CSS but maps its
   local variables onto the tokens defined here.
   =========================================================== */

:root{
  /* surfaces */
  --page:          #f8f9fa;
  --surface:       #ffffff;
  --surface-2:     #f2f4f6;
  --border:        #e3e6ea;
  --border-strong: #d2d7dd;

  /* text */
  --ink:   #15181c;
  --ink-2: #5a646e;
  --ink-3: #8b959d;

  /* Pair Networks — the one accent */
  --pair:        #2a6fd6;
  --pair-strong: #1f56ab;
  --pair-soft:   #7ea9e6;
  --pair-faint:  #cfe0f7;
  --pair-wash:   rgba(42,111,214,.07);

  /* competitors — deliberately muted */
  --comp:       #9aa5b1;
  --comp-soft:  #c3cad2;
  --comp-faint: #e4e8ec;
  --comp-wash:  rgba(154,165,177,.28);

  /* semantic */
  --pos:  #1f7a4d;
  --neg:  #b3261e;
  --flag: #b8760f;

  --radius:  12px;
  --radius-s: 8px;
  --maxw:    1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------
   Site bar — identical on every analysis page
   ----------------------------------------------------------- */

.site-bar{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-bar-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-home{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.site-home:hover{ color: var(--pair); }
.site-home .arrow{ color: var(--ink-3); font-size: 11px; }
.site-home:hover .arrow{ color: var(--pair); }

.site-tabs{
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-tabs a{
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.site-tabs a:hover{
  color: var(--ink);
  background: var(--surface-2);
}
.site-tabs a.is-current{
  color: var(--pair);
  background: var(--pair-wash);
  font-weight: 700;
}
.site-tabs a.is-current:hover{ background: var(--pair-wash); }

/* -----------------------------------------------------------
   Homepage
   ----------------------------------------------------------- */

.home-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px 28px 80px;
}

.home-head{ margin-bottom: 40px; }
.home-eyebrow{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
}
.home-head h1{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 10px 0 8px;
}
.home-head .sub{
  color: var(--ink-2);
  font-size: 15px;
  max-width: 68ch;
  margin: 0;
}

.home-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.home-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-card:hover{
  border-color: var(--pair-soft);
  box-shadow: 0 6px 20px rgba(21,24,28,.07);
  transform: translateY(-2px);
}

.home-card .agent{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
}
.home-card h2{
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 8px 0 10px;
}
.home-card p{
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.5;
}

.home-card .meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.home-card .meta span{
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

.home-card .go{
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--pair);
}

.home-note{
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 80ch;
  line-height: 1.6;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */

@media (max-width: 1000px){
  .home-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px){
  .home-wrap{ padding: 44px 18px 60px; }
  .home-head h1{ font-size: 27px; }
}

@media (max-width: 600px){
  .home-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .site-bar-inner{
    height: auto;
    padding: 10px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .site-tabs{ gap: 2px; }
  .site-tabs a{ padding: 5px 10px; font-size: 12.5px; }
}

@media print{
  .site-bar{ display: none; }
  body{ background: #fff; }
}