/* Draft case-page styling, layered on style.css. Only the -v2 preview pages load it. */
:root { --serif: "Newsreader", Georgia, "Times New Roman", serif; --red: #c0503c; }
body.v2case { --accent: #1b2a44; }
body.v2case.c-pinnacol { --accent: #1f3a6e; }
body.v2case.c-pyx { --accent: #1f8a7c; }
body.v2case.c-tokens { --accent: #a86a06; }
body.v2case.c-curb { --accent: #b4452f; }
body.v2case.c-curb .band { background: #1b2a44; }
body.v2case.c-inspireme { --accent: #6a46b8; }
body.v2case.c-nala { --accent: #a8456a; }
body.v2case.c-trellance { --accent: #2f5f8a; }
body.v2case.c-silverspeck { --accent: #7a6248; }

.v2case h1, .v2case h2, .v2case h3, .v2case .statement, .v2case .result .lead,
.v2case .oc-head h3, .v2case .oc-stat b, .v2case .stat b { font-family: var(--serif); }
.v2case h1 { font-weight: 400; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; }
.v2case h2 { font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.12; }
.v2case h3 { font-weight: 500; letter-spacing: -0.01em; }

.v2case .masthead .wordmark { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.v2case .masthead nav a:hover { color: var(--red); }
.v2case a { color: var(--accent); }

/* hero: text left, the case drawing right, numbers across */
.v2case .hero:has(> .v2-art) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 48px; align-items: start; padding-top: 64px; }
.v2case .hero:has(> .v2-art) > * { grid-column: 1; }
.v2case .hero > .v2-art { grid-column: 2; grid-row: 1 / span 3; align-self: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.v2case .hero > .v2-art svg { width: 100%; height: auto; display: block; }
.v2case .hero > .stat-row, .v2case .hero > .hero-strip { grid-column: 1 / -1; }
.v2case .hero .eyebrow { color: var(--red); }
.v2case .hero h1 { max-width: none !important; }

.v2case .stat-row { max-width: none !important; gap: 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 44px; }
.v2case .stat { border-top: 0; padding: 22px 22px 24px 0; }
.v2case .stat + .stat { padding-left: 22px; border-left: 1px solid var(--line); }
.v2case .stat b { font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 10px; }

.v2case .eyebrow, .v2case .module .kicker { color: var(--red); }
.v2case .band { background: var(--accent); }
.v2case .band .statement { font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.15; }
.v2case .band .eyebrow { color: rgba(255,255,255,.65); }

.v2case .rail a { color: var(--ink-soft); }
.v2case .rail a[aria-current], .v2case .rail a.on, .v2case .rail a:hover { color: var(--accent); border-color: var(--accent); }
.v2case .toc-row a b { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }

.v2case .frame .box { border-radius: 18px; }
.v2case .result { background: var(--accent); }
.v2case .result .lead { font-weight: 400; font-size: 1.7rem; line-height: 1.2; }
.v2case .outcomes { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.v2case .outcomes .eyebrow { color: var(--red); }
.v2case .oc-stat b { color: var(--accent); font-weight: 400; font-size: 2.8rem; }
.v2case .oc-stat span, .v2case .outcomes p { color: var(--ink-soft); }
.v2case .outcomes .oc { background: var(--paper); border-color: var(--line); color: var(--ink); }
.v2case .outcomes .oc b { color: var(--ink); }
.v2case .outcomes .oc .n { color: var(--accent); }
.v2case .oc-more { color: var(--ink); border-color: var(--line); }

@media (max-width: 860px) {
  .v2case .hero:has(> .v2-art) { grid-template-columns: 1fr; }
  .v2case .hero > .v2-art { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .v2case .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}