/* Funding Map, case studies and strategy pages (ours). */
.narrow { max-width: 820px; }
.promise-card { color: var(--ink); border-top: 4px solid var(--gold); }
.promise-card h3 { font-size: 1.4rem; }
.examples { margin-top: 8px; color: var(--muted); }
.linkish { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin: 4px 4px 0 0; font: inherit; font-size: .82rem; cursor: pointer; color: var(--ink-2); }
.linkish:hover { border-color: var(--green); color: var(--green-2); }
details.quick { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
details.quick summary { cursor: pointer; font-weight: 600; color: var(--navy); }
details.quick[open] summary { margin-bottom: 12px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
#map-result { margin: 24px 0; }
.map-out .lead-in { font-size: 1.08rem; color: var(--ink-2); }
ol.steps { list-style: none; padding: 0; margin: 18px 0; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.step .n { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: grid; place-items: center; }
.step h3 { margin-bottom: 4px; }
.step p { margin-bottom: 6px; }
.sim-h { margin-top: 10px; }
/* example maps under the form: the engine's own output for two of the example situations */
.samples { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; align-items: start; }
@media (max-width: 900px) { .samples { grid-template-columns: 1fr; } }
.sample { border-top: 4px solid var(--gold); }
.sample-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sample-top .pill { margin: 0; }
.sample-q { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--bg-2); border-radius: 0 10px 10px 0; font-size: .92rem; color: var(--ink-2); }
.sample .lead-in { font-size: .98rem; color: var(--ink-2); }
.sample ol.steps { margin: 10px 0; }
.sample .step { padding: 12px 0; }
.sample .step h4 { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; color: var(--navy); }
/* story cards: a picture cover (emoji on the industry's colors), then the story */
.case { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.case .cover { position: relative; height: 112px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 18% 30%, rgba(255,255,255,.28) 0 22px, transparent 23px),
              radial-gradient(circle at 85% 75%, rgba(255,255,255,.18) 0 34px, transparent 35px), var(--cover, linear-gradient(135deg, #173d61, #0f2a44)); }
.case .cover .em { font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.case .badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.94); color: var(--navy); font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.case .cover-amt { position: absolute; right: 10px; bottom: 10px; background: rgba(15,42,68,.88); color: #fff; font-weight: 800; font-size: 1.05rem; padding: 4px 10px; border-radius: 10px; }
.case .cover-amt small { font-weight: 500; font-size: .7rem; opacity: .85; }
.case .body { padding: 16px 18px 18px; }
.case h3 { font-size: 1.04rem; margin-bottom: 6px; }
.case .who { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.case .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.case .facts span { font-size: .76rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; color: var(--ink-2); }
.case p.small { margin-bottom: 8px; }
.case details { margin: 0 0 8px; font-size: .875rem; }
.case details summary { cursor: pointer; color: var(--green-2); font-weight: 600; }
.case .pills { margin-top: 6px; }
.t-road { --cover: linear-gradient(135deg, #2b5876, #4e4376); }
.t-food { --cover: linear-gradient(135deg, #f2994a, #eb5757); }
.t-trade { --cover: linear-gradient(135deg, #f7b733, #e2711d); }
.t-health { --cover: linear-gradient(135deg, #43cea2, #185a9d); }
.t-beauty { --cover: linear-gradient(135deg, #ee9ca7, #b06ab3); }
.t-retail { --cover: linear-gradient(135deg, #56ab2f, #1e7a4f); }
.t-tech { --cover: linear-gradient(135deg, #4b6cb7, #182848); }
.t-farm { --cover: linear-gradient(135deg, #a8c66c, #4a7c3a); }
.t-pro { --cover: linear-gradient(135deg, #1e5799, #0f2a44); }
.t-money { --cover: linear-gradient(135deg, #148a4f, #0f4d6e); }
.cs-grid { align-items: start; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cs-stats span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .92rem; }
.cs-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.cs-tools input, .cs-tools select { width: auto; flex: 1 1 220px; padding: 9px 12px; }
.cs-count { font-size: .85rem; color: var(--muted); margin: 0 0 14px; }
.cs-more { text-align: center; padding: 26px 0 6px; }
.promise { background: #fdf6e6; border: 1px solid #f2d699; border-radius: 12px; padding: 14px 16px; margin: 18px 0 10px; }
#talk { margin-top: 8px; }
.timeline { counter-reset: t; list-style: none; padding: 0; }
.timeline li { counter-increment: t; position: relative; padding: 0 0 18px 52px; }
.timeline li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; display: grid; place-items: center; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare .card.bad { border-top: 4px solid #e5a29b; }
.compare .card.good { border-top: 4px solid var(--green); }
.compare .card.bad ul.check li::before { content: "✗"; color: var(--red); }
.filters { margin-bottom: 18px; }
.filters .linkish.on { background: var(--navy); color: #fff; border-color: var(--navy); }