/* "At a glance" box at the top of a guide (post.html, compare_methods.glance_for).
   Same palette as the beginner path, continue-reading card and rate widget.
   Immutable one-year cache on /css: ship any edit under a new file name. */
.glance {
  --gl-accent: #2b6cb0;
  --gl-ink-muted: #595959;
  --gl-line: #dbe3ee;
  --gl-surface: #f7f9fc;
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 4px solid var(--gl-accent);
  border-radius: 0 6px 6px 0;
  background: var(--gl-surface);
}

.glance__title {
  margin: 0 0 10px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gl-ink-muted);
}

.glance__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.glance__fact dt { margin: 0 0 2px; font-size: 0.85em; font-weight: 600; color: var(--gl-ink-muted); }
.glance__fact dd { margin: 0; }
.glance__fact strong { display: block; font-size: 1.1em; line-height: 1.35; }
.glance__quote { display: block; margin-top: 4px; font-size: 0.85em; font-style: italic; line-height: 1.45; color: var(--gl-ink-muted); }

.glance__more { margin: 14px 0 0; }
.glance__more a { font-weight: 600; color: var(--gl-accent); text-decoration: underline; }
.glance__more a:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .glance { padding: 16px; }
  .glance__facts { grid-template-columns: 1fr; }
}