/* Strategy v5 (v3/strategy5.js and the features view): Product strategy, Business strategy, the strategy map. Colors
   are the :root tokens in app.css. */
.ps { display: grid; gap: 16px; }
.ps-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.ps-i, .bs-i { border: 1px solid var(--line); border-radius: var(--rs, 8px); padding: 10px 12px; overflow-wrap: anywhere; min-width: 0; }
.ps-h { margin-bottom: 6px; }
.ps-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; }
.ps-dl dt { color: var(--mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ps-dl dd { margin: 0; }
.psp + .psp { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.psp .s4h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px 12px; font-size: 13px; }
.bs-f { display: grid; gap: 2px; min-width: 0; }
.bs-l { color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.smap-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.smap-l > li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.smap-n, .smap-c { display: grid; gap: 2px; align-content: start; min-width: 0; }
.smap-go { display: inline-flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .smap-l > li { grid-template-columns: minmax(0, 1fr); } }
/* Features & enhancements and the release timeline (v3/features.js). */
.fe-f { flex-wrap: wrap; }
.fe-deps { margin-top: 6px; overflow-wrap: anywhere; }
.fe-chart { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--rs, 8px); background: var(--panel2); }
.fe-chart svg { display: block; }
.fe-grid { stroke: var(--line); stroke-width: 1; }
.fe-ax { fill: var(--mute); font: 600 11px 'Instrument Sans', sans-serif; }
.fe-lane { fill: var(--ink); font: 700 12.5px 'Instrument Sans', sans-serif; }
.fe-lbl { fill: var(--ink2); font: 12px 'Instrument Sans', sans-serif; }
.fe-today { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fe-todayl { fill: var(--bad); }
.fe-wait { stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 2 3; }
.fe-go { fill: var(--gold2); }
.fe-bar, .fe-key i { fill: var(--mute); background: var(--mute); }
.fe-s-building .fe-bar, .fe-key.fe-s-building i { fill: var(--warn); background: var(--warn); }
.fe-s-review .fe-bar, .fe-key.fe-s-review i { fill: var(--info); background: var(--info); }
.fe-s-staging .fe-bar, .fe-key.fe-s-staging i { fill: var(--gold); background: var(--gold); }
.fe-s-production .fe-bar, .fe-key.fe-s-production i { fill: var(--good); background: var(--good); }
.fe-key { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.fe-key i { width: 10px; height: 8px; border-radius: 2px; display: inline-block; }
.fe-legend { margin-top: 8px; }
.fe-nodate, .fe-rel { margin: 0; padding-left: 18px; display: grid; gap: 8px; overflow-wrap: anywhere; }
/* Features sections (List, Release timeline, Marketing & sales programs, Funnel by brand) wrap on phones. */
.s4tabs[data-fe="secs"] { flex-wrap: wrap; }
/* Features → Funnel by brand (v3/programs.js, Growth Programs 10-29): four stage columns, stacked on phones. */
.gp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gp-st { border: 1px solid var(--line); border-radius: var(--rs, 8px); padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
.gp-st h4 { margin: 0 0 4px; font-size: 13px; }
.gp-st p { margin: 0 0 6px; }
.gp-k, .gp-p { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; }
.gp-p li { padding-top: 4px; border-top: 1px solid var(--line); }
.gp-x { margin-top: 10px; overflow-wrap: anywhere; }
.gp-acc { margin-top: 3px; }
@media (max-width: 900px) { .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gp-grid { grid-template-columns: minmax(0, 1fr); } }
/* Features → Growth engine (v3/growth-engine.js, 10-29): one card per brand, seven cells in a row on a wide screen,
   wrapping to two and then one column; the summary line wraps on phones. */
.ge-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin-bottom: 6px; }
.ge-asof { overflow-wrap: anywhere; }
.ge-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ge-c { border: 1px solid var(--line); border-radius: var(--rs, 8px); padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
.ge-c h4 { margin: 0 0 6px; font-size: 12px; color: var(--ink2); }
.ge-n { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; }
.ge-n li { display: flex; flex-wrap: wrap; gap: 2px 6px; justify-content: space-between; }
.ge-k { color: var(--ink2); }
.ge-l { margin-top: 6px; }
.ge-fs + .ge-fs { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ge-fh { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.ge-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; overflow-wrap: anywhere; }
@media (max-width: 1400px) { .ge-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ge-row { grid-template-columns: minmax(0, 1fr); } }