/* Goal picture strip — spec 2026-10-03-goal-picture-benefits-design.md §8. Byte-identical EN/CN. */
.goal-vision-strip { margin: 0 0 1.25rem; }
.goal-vision-strip h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.gv-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; }
.gv-card { position: relative; min-height: 220px; border-radius: 16px; overflow: hidden; scroll-snap-align: start;
  background: linear-gradient(135deg, #1e2a4a, #3b2f5c); color: #fff; }
.gv-bg, .gv-shade { position: absolute; inset: 0; }
.gv-bg img { width: 100%; height: 100%; object-fit: cover; }
.gv-shade { background: linear-gradient(to top, rgba(8, 12, 24, .88) 0%, rgba(8, 12, 24, .55) 55%, rgba(8, 12, 24, .15) 100%); }
.gv-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  min-height: 220px; padding: 1rem 1.1rem; }
.gv-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.gv-lead { margin: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.gv-lines { margin: 0; padding-left: 1.1rem; font-size: .98rem; line-height: 1.4; }
.gv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; }
.gv-note { font-size: .8rem; opacity: .9; }
.gv-btn { border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: #fff;
  border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; }
.gv-btn--primary { background: #fff; color: #14182b; border-color: #fff; }
.gv-btn--icon { padding: .25rem .6rem; }
.gv-editor { display: flex; flex-direction: column; gap: .4rem; }
.gv-input { border-radius: 10px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(10, 14, 28, .6);
  color: #fff; padding: .45rem .6rem; font-size: .95rem; }
.gv-error { font-size: .8rem; color: #ffd6d6; }
@media (max-width: 640px) { .gv-track { grid-auto-columns: 85%; } }
/* Cozy mode (keyed on <html data-ux-mode="cozy"> by ux-mode.js — Dev Rule #43): the theme recolours text to
   dark ink and enlarges buttons with !important. The card keeps its own dark shade, so contrast rides on the
   shade, not on the page — every override below matches the theme's !important (live check 2026-10-03). */
[data-ux-mode="cozy"] .gv-card,
[data-ux-mode="cozy"] .gv-card .gv-title,
[data-ux-mode="cozy"] .gv-card .gv-lead,
[data-ux-mode="cozy"] .gv-card .gv-lines li,
[data-ux-mode="cozy"] .gv-card .gv-note { color: #fff !important; }
[data-ux-mode="cozy"] .gv-card .gv-shade {
  background: linear-gradient(to top, rgba(8, 12, 24, .88) 0%, rgba(8, 12, 24, .55) 55%, rgba(8, 12, 24, .15) 100%) !important;
  opacity: 1 !important; }
[data-ux-mode="cozy"] .gv-card .gv-bg img { opacity: 1 !important; filter: none !important; }
[data-ux-mode="cozy"] .gv-card .gv-btn { font-size: .85rem !important; padding: .3rem .8rem !important;
  min-height: 0 !important; box-shadow: none !important; color: #fff !important;
  background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .55) !important; }
[data-ux-mode="cozy"] .gv-card .gv-btn--primary { background: #fff !important; color: #14182b !important; border-color: #fff !important; }
[data-ux-mode="cozy"] .gv-card .gv-input { color: #fff !important; background: rgba(10, 14, 28, .6) !important; }