/* ============================================================
   Lighthouse — narrative sections: "What's broken" (Problem) and
   "What we built" (Solution), plus the How-it-works diagram (3 variants).
   Reuses the site panel/pill/Rajdhani language.
   ============================================================ */

.band { padding: var(--section-y) 0; position: relative; }
.band .seclabel { margin-bottom: 40px; }
.band .big { font-family: var(--rajd); font-weight: 600; text-transform: uppercase; letter-spacing: 0; line-height: 1.0; color: var(--text-primary); }
.band .big .ac { color: var(--marigold); }
.band .lead { margin-top: var(--dek-gap); max-width: 56ch; font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-dek); line-height: 1.6; color: var(--text-secondary); } /* D154: was borrowing the HERO lead clamp - the biggest dek on the site at 21.6px */
.band .lead em, .band .sub em { color: var(--text-secondary); font-style: normal; }

/* ============================================================
   PROBLEM — "What's broken"
   ============================================================ */
.problem { background: radial-gradient(ellipse 60% 70% at 22% 8%, rgba(136,156,231,0.05), transparent 60%); }
.problem .big { font-size: clamp(28px, 3vw, 40px); max-width: 17ch; }
.fail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; }
.fail-in { padding: 34px 36px 36px; position: relative; }
.fail-in::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 5px); }
.fail-in > * { position: relative; }
.fail .ftag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--periwinkle); margin-bottom: 24px; }
.fail .fviz { height: 120px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 26px; }
.fail .fviz svg { overflow: visible; }
.fail h3 { font-family: var(--rajd); font-weight: 600; text-transform: uppercase; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.04; color: var(--text-primary); margin-bottom: 14px; }
.fail p { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 44ch; }
.problem .bridge { margin-top: 44px; max-width: 40ch; font-family: var(--rajd); font-weight: 500; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.3; color: var(--text-secondary); }
.problem .bridge .ac { color: var(--marigold); }

/* failure-mode SVG motifs — V12 production pass: card-scale 340x110 near-1:1,
   1.5-2px strokes, axes lifted to text-tertiary, labels >=11px rendered at mobile.
   The crossed-circle X glyph + its infinite fvBlink are retired (announce-then-relax:
   nothing blinks forever); Problem B's verdict is now a stroke-only chip in the
   dossier-chip idiom, periwinkle per the problem-band no-red rule. */
.fviz .axis { stroke: var(--text-tertiary); stroke-width: 1.5; }
.fviz .axis-dash { stroke: var(--text-tertiary); stroke-width: 1.5; stroke-dasharray: 3 5; }
.fviz .node-on { fill: var(--marigold); }
.fviz .node-off { fill: none; stroke: var(--text-tertiary); stroke-width: 2; } /* D161: non-text contrast - this node IS the claim ('Now' unknown) */
.fviz .tk { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--text-tertiary); }
.fviz .doc-real { fill: var(--surface); stroke: var(--text-dim); stroke-width: 1.5; }
.fviz .doc-forge { fill: none; stroke: var(--periwinkle); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fviz .doc-line { stroke: var(--text-dim); stroke-width: 1.5; }
.fviz .stamp { fill: none; stroke: var(--marigold); stroke-width: 1.75; }
.fviz .stamp-check { stroke: var(--marigold); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fviz .vchip { fill: none; stroke: var(--periwinkle); stroke-width: 1.5; }
.fviz .vchip-lab { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--periwinkle); }

/* ============================================================
   SOLUTION — "What we built"
   ============================================================ */
.solution .sol-top { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 56px; align-items: start; }
.solution .big { font-size: clamp(28px, 3vw, 40px); max-width: 16ch; }
.solution .sub { margin-top: 28px; max-width: 52ch; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.solution .inputs-panel .ip-foot { color: var(--marigold); }

/* audit: the retired how-it-works suite (.sol-how / .sol-diagram / .howflow /
   .glyph-* / .howsteps / .howconv, incl. solFade/solPop/solDraw keyframes) had
   zero consumers on Home — removed. The current solution band is the enrichment
   web (enrichment.js / enrichment.css). */

@media (max-width: 860px) {
  /* D154: the .band override is retired - --section-y's clamp floor already
     yields 96px here, and this was the site's only 860px vertical breakpoint */
  .fail-grid { grid-template-columns: 1fr; }
}