/* Editorial evidence panel. Each pair has its own zero-based scale. */
.selly-results {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 32px clamp(32px,6vw,88px);
  margin-bottom: clamp(56px,7vw,104px);
  padding: clamp(26px,4vw,56px);
  border-radius: var(--panel-radius);
  background: var(--navy);
  color: var(--paper);
  --muted: #b3c1cd;
  --line: #f2f2f038;
}

.results-kicker {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}

.results-heading h2 {
  max-width: 16ch;
  font-size: clamp(30px,3.4vw,44px);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 22px;
}

.results-heading > p:not(.results-kicker):not(.results-period) {
  font-size: 15px;
  line-height: 1.65;
  color: #d1dbe2;
  max-width: 48ch;
}

.results-period {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.results-chart {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.results-metric {
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}

.results-metric:first-child {
  padding-top: 0;
  border: 0;
}

.results-metric:last-child { padding-bottom: 0; }

.results-metric h3 {
  font: 400 16px/1.4 var(--copy);
  letter-spacing: 0;
  word-spacing: normal;
  margin: 0;
  max-width: 23ch;
}

.results-metric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.results-growth {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.results-growth strong {
  display: block;
  color: var(--accent);
  font: 700 clamp(28px,2.8vw,38px)/1.1 var(--font);
  letter-spacing: -.025em;
  white-space: nowrap;
}

.results-growth > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 400 12px/1.4 var(--copy);
  letter-spacing: 0;
}

.results-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.results-value strong {
  color: var(--paper);
  font: 400 clamp(26px,2.5vw,34px)/1.1 var(--font);
  letter-spacing: -.025em;
}

.results-bar {
  width: var(--bar-width,100%);
  height: 8px;
  margin-top: 10px;
  background: #8c9cad;
  border-radius: 999px;
  transform-origin: left center;
}

.results-bar-current { background: var(--accent); }
.results-pair-previous { margin-top: 16px; }
.results-pair-previous .results-value > span:last-child { font-size: 16px; color: var(--paper); }

.results-google {
  grid-column: 1;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  align-self: end;
}

.results-google h3 {
  font: 400 18px/1.3 var(--font);
  letter-spacing: -.015em;
}

.results-google .results-period { margin-top: 10px; }
.results-google dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 0; }
.results-google dt { font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 23ch; }
.results-google dd { margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.results-google-total { display: block; color: var(--paper); font: 400 24px/1.2 var(--font); letter-spacing: -.02em; }
.results-google .results-growth { display: block; width: fit-content; margin-top: 12px; }
.results-google .results-growth strong { font-size: clamp(28px,2.5vw,34px); }

.results-method {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.results-method summary {
  display: list-item;
  width: fit-content;
  padding-block: 12px;
  font-size: 13px;
  color: var(--muted);
}

.results-method summary::marker { content: ""; }
.results-method summary::after { content: " +"; }
.results-method[open] summary::after { content: " −"; }
.results-method > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 8px; }
.results-method p { font-size: 12px; line-height: 1.7; color: var(--muted); }

@media (max-width:760px) {
  .selly-results { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .results-chart,.results-google,.results-method { grid-column: 1; grid-row: auto; }
  .results-chart { border-top: 1px solid var(--line); padding-top: 24px; }
  .results-method > div { grid-template-columns: 1fr; gap: 14px; }
  .results-google dl { gap: 16px; }
}

@media (max-width:480px) {
  .results-metric-heading { align-items: start; flex-direction: column; gap: 12px; }
  .results-google dl { grid-template-columns: minmax(0,1fr); gap: 24px; }
}

@media (forced-colors:active) {
  .results-bar { border: 3px solid CanvasText; }
  .results-bar-current { border-color: Highlight; }
}