/* ===== Results (comparison-first) ===== */
.results { position: relative; min-height: calc(100vh - 64px); padding: 32px 32px 80px; }
.results__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; margin-bottom: 32px;
}
.results__head-center { text-align: center; }
.results__title { font-size: 48px; margin: 12px 0 4px; letter-spacing: -0.02em; font-weight: 600; }
.results__sub { color: var(--ink-dim); margin: 0; font-size: 14px; }
.results__share { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.results__share-url { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }

/* Editor's pick callout */
.results__pick {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; gap: 48px;
  max-width: 1280px; margin: 0 auto 24px;
  padding: 32px 36px;
  border: 1px solid var(--lime);
  background: linear-gradient(120deg, rgba(198, 255, 61, 0.06), rgba(0, 240, 255, 0.04));
  box-shadow: 0 0 36px rgba(198, 255, 61, 0.18);
  overflow: hidden;
}
.results__pick-rays { position: absolute; inset: 0; pointer-events: none; }
.results__pick-rays > div {
  position: absolute; left: 50%; top: 50%;
  width: 200%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(198, 255, 61, 0.15), transparent);
  transform-origin: 0 0;
  animation: rays 18s linear infinite;
}
.results__pick-rays > div:nth-child(2) { transform: rotate(45deg); animation-duration: 22s; }
.results__pick-rays > div:nth-child(3) { transform: rotate(90deg); animation-duration: 26s; }
.results__pick-rays > div:nth-child(4) { transform: rotate(135deg); animation-duration: 20s; }
.results__pick-eyebrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; position: relative; }
.results__pick-name { font-size: 56px; margin: 0; letter-spacing: -0.02em; font-weight: 600; line-height: 1; position: relative; }
.results__pick-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); margin-top: 6px; position: relative; }
.results__pick-take { font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 540px; margin: 16px 0 22px; position: relative; }
.results__pick-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }

/* Compare bar */
.compare-bar {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto 18px;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.compare-bar.is-on {
  border-style: solid; border-color: var(--magenta);
  background: rgba(255, 43, 214, 0.04);
  color: var(--magenta);
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.2);
}
.compare-bar__label { flex: 1; }
.compare-bar__go { padding: 8px 16px; font-size: 11px; }
.compare-bar__clear {
  background: transparent; border: 0;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
  text-decoration: underline; cursor: pointer;
}

/* Ranked rows */
.results__ranked {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.results__ranked-head {
  display: grid;
  grid-template-columns: 70px 1.4fr 1.5fr 1fr 1fr 180px;
  gap: 16px;
  padding: 8px 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.row {
  --row-color: #00f0ff;
  display: grid;
  grid-template-columns: 70px 1.4fr 1.5fr 1fr 1fr 180px;
  gap: 16px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--row-color);
  background: rgba(3, 6, 13, 0.55);
  transition: all 0.2s ease;
  position: relative;
  animation: rowIn 0.5s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.row:hover {
  border-color: var(--row-color);
  box-shadow: 0 0 24px color-mix(in oklab, var(--row-color) 22%, transparent);
}
.row.is-selected {
  border-color: var(--magenta);
  box-shadow: 0 0 24px rgba(255, 43, 214, 0.35);
}
.row__rank { display: flex; flex-direction: column; gap: 2px; }
.row__rank-num { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--row-color); text-shadow: 0 0 10px var(--row-color); }
.row__rank-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--lime); }
.row__tool { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.row__glyph { font-size: 32px; font-family: var(--font-mono); width: 44px; text-align: center; }
.row__name { font-size: 18px; font-weight: 600; }
.row__tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.row__flags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.row__bestfor { font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.row__price { display: flex; flex-direction: column; gap: 2px; }
.row__price-val { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--lime); }
.row__price-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); }
.row__fit { display: flex; flex-direction: column; gap: 4px; }
.row__fit-bar { height: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); position: relative; }
.row__fit-fill { height: 100%; background: linear-gradient(to right, var(--cyan), var(--magenta)); box-shadow: 0 0 8px var(--cyan); transition: width 0.7s ease; }
.row__fit-num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--cyan); }
.row__actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.row__select {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--ink-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 16px;
  transition: all 0.18s ease;
}
.row__select:hover { border-color: var(--magenta); color: var(--magenta); }
.row__select.is-on { background: var(--magenta); color: #03060d; border-color: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
.row__open {
  padding: 8px 12px;
  background: transparent; border: 1px solid var(--row-color);
  color: var(--row-color); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  transition: all 0.18s ease;
}
.row__open:hover { background: var(--row-color); color: #03060d; box-shadow: 0 0 12px var(--row-color); }

/* Pros/cons inline detail */
.row__detail {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr 1.2fr;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.row__poscon {
  background: rgba(0,0,0,0.3);
  padding: 12px 14px;
  border-left: 2px solid var(--line);
}
.row__poscon--pros { border-left-color: var(--lime); }
.row__poscon--cons { border-left-color: var(--red); }
.row__poscon-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-faint); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.row__poscon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.row__poscon li { font-size: 12.5px; color: var(--ink); padding-left: 14px; position: relative; line-height: 1.4; }
.row__poscon--pros li::before { content: '+'; position: absolute; left: 0; color: var(--lime); font-family: var(--font-mono); }
.row__poscon--cons li::before { content: '−'; position: absolute; left: 0; color: var(--red); font-family: var(--font-mono); }
.dot--pro { color: var(--lime); font-family: var(--font-mono); font-weight: 700; }
.dot--con { color: var(--red); font-family: var(--font-mono); font-weight: 700; }

.row__verdict {
  background: rgba(0, 240, 255, 0.04);
  padding: 12px 14px;
  border-left: 2px solid var(--cyan);
}
.row__verdict-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--cyan); margin-bottom: 8px;
}
.row__verdict p { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.row__verdict b { color: var(--cyan); }

.results__footer {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 32px auto 0;
  padding: 24px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: rgba(3, 6, 13, 0.5);
}
.results__footer-q { font-size: 16px; color: var(--ink); }
.results__footer-actions { display: flex; gap: 10px; }

/* Profile pricing list */
.profile__pricing { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.profile__pricing-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.profile__pricing-row .lbl { color: var(--ink-faint); letter-spacing: 0.1em; }
.profile__pricing-row .val { color: var(--ink); }

/* Head-to-head pros/cons block */
.compare__poscon {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.compare__poscon-col {
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
  padding: 14px;
}
.compare__poscon-head {
  font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 10px;
}
.compare__poscon-block { margin-bottom: 12px; }
.compare__poscon-block:last-child { margin-bottom: 0; }
.compare__poscon-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-faint); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.compare__poscon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.compare__poscon li { font-size: 12px; color: var(--ink); padding-left: 12px; position: relative; line-height: 1.4; }
.compare__poscon li::before { content: '·'; position: absolute; left: 2px; color: var(--ink-faint); }

/* Responsive narrow */
@media (max-width: 1100px) {
  .results__ranked-head, .row {
    grid-template-columns: 50px 1fr 1fr 100px 80px 100px;
  }
  .row__bestfor { display: none; }
  .row__detail { grid-template-columns: 1fr; }
}