.jv-root, .jv-root * { box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--paper); }
.jv-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-6); }
.jv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); padding: var(--space-6); }

/* Wordmark: the ai is outlined Fraunces Black Italic (soft), so it needs no font; FOR and the ending are live Syne */
.jv-wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; color: var(--racing); }
.jv-ai { display: inline-block; vertical-align: -0.01em; overflow: visible; margin-left: -0.0145em; }
.jv-ai-dot { fill: var(--electric-pink); }
.jv-wordmark-for { font-family: var(--font-display); font-weight: 700; font-size: .5em; letter-spacing: .08em; text-transform: uppercase; margin-left: .28em; color: var(--magenta); }
.jv-wordmark.on-racing, .jv-wordmark.on-racing .jv-wordmark-for { color: #ffffff; }
.jv-wordmark.on-racing .jv-wordmark-for { color: var(--electric-pink); }
.jv-wordmark.mono .jv-wordmark-for { color: currentColor; }
.jv-wordmark.mono .jv-ai-dot { fill: currentColor; }
.jv-wordmark.mono.on-racing .jv-wordmark-for { color: #ffffff; }
[data-theme="dark"] .jv-wordmark:not(.on-racing) { color: var(--ink); }
[data-theme="dark"] .jv-wordmark:not(.mono) .jv-wordmark-for { color: var(--electric-pink); }
/* The ending (client or audience name) takes the ai color, never the FOR color, so FOR reads as the hinge:
   racing on paper, white on racing, ink in dark theme, one color in mono. Leya, 2026-10-12. */
.jv-wordmark-ending { color: var(--racing); }
.jv-wordmark.on-racing .jv-wordmark-ending { color: #ffffff; }
.jv-wordmark.mono .jv-wordmark-ending { color: inherit; }
[data-theme="dark"] .jv-wordmark:not(.on-racing):not(.mono) .jv-wordmark-ending { color: var(--ink); }
.jv-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--racing); color: #ffffff; padding-bottom: .1em; }
.jv-wordmark-mark.on-racing .jv-mark { background: #ffffff; color: var(--racing); }
.jv-wordmark-sm { font-size: 24px; } .jv-wordmark-md { font-size: 40px; } .jv-wordmark-lg { font-size: 72px; }

/* Button */
.jv-btn { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6); border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.jv-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jv-btn-primary { background: var(--action); color: var(--on-action); }
.jv-btn-primary:hover { background: var(--magenta-deep); color: var(--on-racing); }
.jv-btn-secondary { background: transparent; color: var(--ink); border-color: var(--viridian); }
.jv-btn-secondary:hover { background: var(--racing-tint); }
.jv-btn-spark { background: var(--electric-pink); color: #111a15; font-weight: 700; }
.jv-btn-spark:hover { background: #ff5aa3; }
.jv-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Tag */
.jv-tag { display: inline-flex; align-items: center; font-size: 13px; line-height: 18px; font-weight: 600; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }
.jv-tag-racing { background: var(--racing-tint); color: var(--ink); }
.jv-tag-magenta { background: var(--magenta); color: var(--on-racing); }
.jv-tag-viridian { background: var(--viridian); color: var(--on-viridian); }
.jv-tag-neutral { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.jv-tag-spark { background: var(--electric-pink); color: #111a15; font-weight: 700; }

/* Card */
.jv-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink); }
.jv-card-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.jv-card-title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.jv-card-body { font-size: 16px; line-height: 26px; margin: 0; color: var(--ink); }
.jv-card-foot { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.jv-card-feature { background: var(--racing); border-color: var(--racing); color: var(--on-racing); box-shadow: none; }
.jv-card-feature .jv-card-eyebrow, .jv-card-feature .jv-card-body, .jv-card-feature .jv-card-title { color: var(--on-racing); }
.jv-card-feature::before { content: ""; display: block; width: 40px; height: 8px; border-radius: var(--radius-pill); background: var(--electric-pink); }

/* Stat */
.jv-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border-radius: var(--radius-lg); }
.jv-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -0.02em; }
.jv-stat-label { font-size: 19px; line-height: 28px; max-width: 28ch; }
.jv-stat-source { font-size: 13px; line-height: 20px; }
.jv-stat-magenta { background: var(--magenta); color: var(--on-racing); }
.jv-stat-racing { background: var(--racing); color: var(--on-racing); }
.jv-stat-racing .jv-stat-value::after, .jv-stat-magenta .jv-stat-value::after { content: ""; display: block; width: 56px; height: 8px; margin-top: var(--space-3); border-radius: var(--radius-pill); background: var(--electric-pink); }
.jv-stat-magenta .jv-stat-value::after { background: var(--on-racing); }
.jv-stat-paper { background: transparent; color: var(--ink); padding-left: 0; }
.jv-stat-paper .jv-stat-value { color: var(--action); }
.jv-stat-paper .jv-stat-source { color: var(--ink-muted); }

/* PullQuote */
.jv-quote { margin: 0; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.jv-quote-mark { width: 48px; height: 12px; border-radius: var(--radius-pill); background: var(--action); }
.jv-quote-text { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.jv-quote-cite { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-style: normal; }
.jv-quote-racing { background: var(--racing); border-radius: var(--radius-lg); }
.jv-quote-racing .jv-quote-mark { background: var(--electric-pink); }
.jv-quote-racing .jv-quote-text, .jv-quote-racing .jv-quote-cite { color: var(--on-racing); }