/* ============================================================
   landing/yar-polish.css — R2 Yar suite polish, page-specific
   styles only (yar.html, yar/features.html). Round 2 visual
   pass: new "What Yar is" value-prop cards on yar.html, and a
   small contrast fix on the feature-voting page's instructional
   copy. Every color/font/spacing value below is a var(--...)
   token already defined in styles.css / site-extend.css / yar.css.
   Those files are frozen; nothing here overrides their selectors,
   only adds new ones or narrows an existing color for contrast.
   ============================================================ */

/* ---------------------------------------------------------------
   yar.html "What Yar is" section: value-prop cards inside the
   shared .card-grid primitive (site-extend.css defines the grid
   itself; the card look lives here, same visual language as
   about.html's .value-card / .strategy-card).
   --------------------------------------------------------------- */
.yar-value-grid { margin-top: 8px; }

.yar-value-card {
  padding: 24px 24px 26px; background: var(--surface); border: 1px solid var(--hair);
  border-radius: 16px; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.yar-value-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(81,69,168,0.24); }
.yar-value-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.yar-value-card h3 {
  font-family: var(--f-display); font-size: 16.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; line-height: 1.3;
}
.yar-value-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .yar-value-card { transition: none !important; }
}

/* ---------------------------------------------------------------
   yar/features.html: quieter, higher-contrast instruction copy.
   --------------------------------------------------------------- */
.pack-tab-hint { color: var(--muted); }