/* Focused diagrams for individual idea pages */
.idea-diagram { margin: 40px 0 0; padding: 28px 30px 24px; border: 1px solid #e7d8ba; border-radius: 10px; background: #fbf5e8; }
.idea-diagram figcaption { margin-bottom: 22px; }
.idea-diagram .diagram-kicker { margin: 0 0 7px; color: #fb5a00; font-size: 11px; font-weight: 850; letter-spacing: 2px; text-transform: uppercase; }
.idea-diagram h2 { margin: 0; color: #092a49; font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif; font-size: clamp(24px,3vw,32px); line-height: 1.05; text-transform: uppercase; }
.idea-diagram .diagram-intro { margin: 9px 0 0; color: #465b6e; font-size: 14px; line-height: 1.5; }
.diagram-steps { display: grid; grid-template-columns: repeat(var(--diagram-columns,4),minmax(0,1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: diagram-step; }
.diagram-steps li { position: relative; min-height: 148px; padding: 16px 14px 14px; border: 1px solid #e7d8ba; border-radius: 8px; background: #fffaf0; }
.diagram-flow .diagram-steps li:not(:last-child)::after { position: absolute; z-index: 1; top: 31px; right: -14px; width: 13px; height: 2px; background: #04a1a5; content: ""; }
.diagram-flow .diagram-steps li:not(:last-child)::before { position: absolute; z-index: 2; top: 27px; right: -14px; width: 8px; height: 8px; border-top: 2px solid #04a1a5; border-right: 2px solid #04a1a5; content: ""; transform: rotate(45deg); }
.diagram-step-number { display: grid; width: 32px; height: 32px; margin-bottom: 11px; place-items: center; border-radius: 50%; background: var(--step-colour,#04a1a5); color: #fff; font-size: 11px; font-weight: 850; }
.diagram-steps strong { display: block; margin: 0 0 5px; color: #092a49; font-size: 12px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; }
.diagram-steps p { margin: 0; color: #465b6e; font-size: 12px; line-height: 1.45; }
.diagram-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid #e7d8ba; color: #465b6e; font-size: 13px; line-height: 1.5; }
.diagram-note strong { color: #092a49; }
@media (max-width: 900px) {
  .diagram-steps { grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); }
  .diagram-flow .diagram-steps li:not(:last-child)::after,.diagram-flow .diagram-steps li:not(:last-child)::before { display: none; }
}
@media (max-width: 650px) {
  .idea-diagram { margin-top: 30px; padding: 22px 18px 19px; }
  .idea-diagram figcaption { margin-bottom: 17px; }
  .diagram-steps { grid-template-columns: 1fr; gap: 9px; }
  .diagram-flow .diagram-steps li:not(:last-child)::after,.diagram-flow .diagram-steps li:not(:last-child)::before { display: block; }
  .diagram-flow .diagram-steps li:not(:last-child)::after { top: auto; right: auto; bottom: -10px; left: 28px; width: 2px; height: 11px; }
  .diagram-flow .diagram-steps li:not(:last-child)::before { top: auto; right: auto; bottom: -10px; left: 24px; transform: rotate(135deg); }
  .diagram-steps li { display: grid; min-height: 0; grid-template-columns: 36px 1fr; column-gap: 10px; padding: 12px; }
  .diagram-step-number { grid-row: span 2; margin: 0; }
  .diagram-steps strong { align-self: end; margin-bottom: 2px; }
  .diagram-steps p { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .idea-diagram *, .idea-diagram *::before, .idea-diagram *::after { transition: none !important; } }