/* Worked example: one hypothetical engagement, traced from the system's context to the retest. */
.sector-case { --case-bg: #0a0d12; padding: clamp(56px, 7vw, 96px) 6vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(28px, 5vw, 72px); border-bottom: 1px solid #303946; max-width: 1500px; margin: 0 auto; box-sizing: border-box; }
.sector-case h2 { margin: 0; font-size: 30px; letter-spacing: -.03em; font-weight: 500; }
@media (max-width: 900px) { .sector-case { grid-template-columns: minmax(0, 1fr); } }
.ss-case-aside { margin: 14px 0 0; max-width: 18em; font-size: 14px; line-height: 1.55; color: var(--sy-gray-dim, #8a8a93); }
.case { margin: 0; }
.case-kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sy-gray-dim, #8a8a93); }
.case-kicker span { color: var(--sy-white, #fcfcfe); }
.case-title { margin: 10px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; font-weight: 500; color: var(--sy-white, #fcfcfe); max-width: 30em; }

.case-context { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sy-line, #232327); border-bottom: 1px solid var(--sy-line, #232327); }
.case-context div { padding: 16px 20px 16px 0; }
.case-context div + div { padding-left: 20px; border-left: 1px solid var(--sy-line, #232327); }
.case-context dt { font-size: 12px; letter-spacing: .08em; color: var(--sy-gray-dim, #8a8a93); }
.case-context dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--sy-white, #fcfcfe); }

/* The trace: a thin rail with one node per step. */
.case-trace { list-style: none; margin: 30px 0 0; padding: 0; position: relative; }
.case-trace::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--sy-line-strong, #38383e); }
.case-step { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 20px; padding: 0 0 22px 30px; }
.case-step:last-child { padding-bottom: 0; }
.case-step::before { content: ''; position: absolute; left: 1px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--case-bg, var(--sy-black, #0a0a0b)); border: 1px solid #6a6a72; box-sizing: border-box; }
.case-who { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sy-gray-dim, #8a8a93); padding-top: 3px; }
.case-what { font-size: 15px; line-height: 1.55; color: var(--sy-gray, #a3a3ab); }
.case-what q { quotes: '\201C' '\201D'; color: var(--sy-white, #fcfcfe); }
.case-what code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: var(--sy-white, #fcfcfe); background: rgba(252, 252, 254, .05); padding: 2px 6px; border-radius: 3px; overflow-wrap: anywhere; }
.case-what small { display: block; margin-top: 4px; font-size: 13px; color: var(--sy-gray-dim, #8a8a93); }
.case-step.is-fail::before { background: #e5484d; border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .16); }
.case-step.is-fail .case-who { color: #f2777a; }
.case-step.is-fail code { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .75); background: rgba(229, 72, 77, .08); }
.case-flag { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #f59a9c; }

/* What happened next: finding, owner, fix, retest, decision. */
.case-out { margin: 32px 0 0; border-top: 1px solid var(--sy-line, #232327); }
.case-out > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 20px; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--sy-line, #232327); }
.case-out dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sy-gray-dim, #8a8a93); padding-top: 3px; }
.case-out dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sy-white, #fcfcfe); }

/* Retest: one mark per run. Red means the failure happened; blue means the system held. */
.case-runs { display: grid; gap: 12px; margin-top: 2px; }
.case-run { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; }
.case-run-label { font-size: 13px; color: var(--sy-gray-dim, #8a8a93); min-width: 4.5em; }
.case-marks { display: grid; grid-template-columns: repeat(20, 9px); gap: 4px; }
.case-marks i { width: 9px; height: 9px; background: #4d6bff; box-sizing: border-box; }
.case-marks i.hit { background: #e5484d; }
.case-run-note { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--sy-gray, #a3a3ab); }
.case-run-note b { font-weight: 500; color: var(--sy-white, #fcfcfe); }

.case figcaption { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--sy-gray-dim, #8a8a93); }

@media (max-width: 860px) {
  .case-context { grid-template-columns: minmax(0, 1fr); }
  .case-context div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--sy-line, #232327); }
  .case-step, .case-out > div { grid-template-columns: minmax(0, 1fr); }
  .case-out > div { padding-left: 0; }
}
@media (max-width: 420px) {
  .case-marks { grid-template-columns: repeat(20, 8px); gap: 3px; }
  .case-marks i { width: 8px; height: 8px; }
}

/* Steps arrive one at a time as the example scrolls into view. Without script or with reduced motion, all is shown. */
@media (prefers-reduced-motion: no-preference) {
  .case.is-armed .case-step, .case.is-armed .case-out > div { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--sy-ease, ease), transform .7s var(--sy-ease, ease); transition-delay: calc(var(--i, 0) * 260ms); }
  .case.is-armed .case-marks i { opacity: 0; transition: opacity .3s ease; transition-delay: calc(var(--d, 0) * 18ms + var(--i, 0) * 260ms); }
  .case.is-armed.is-in .case-step, .case.is-armed.is-in .case-out > div { opacity: 1; transform: none; }
  .case.is-armed.is-in .case-marks i { opacity: 1; }
}

.case-legend { margin: 4px 0 0; font-size: 13px; color: var(--sy-gray-dim, #8a8a93); }
.case-legend i { display: inline-block; width: 9px; height: 9px; margin: 0 6px 0 0; vertical-align: -1px; background: #4d6bff; }
.case-legend i.hit { background: #e5484d; }
.case-legend i.hit ~ i { margin-left: 14px; }

/* Sector pages: one line drawing in the intro, and related services at the end. */
.sector-fig { margin: 0 0 26px; }
.sector-fig svg { width: clamp(150px, 15vw, 210px); height: auto; display: block; overflow: visible; }
.sf-l { fill: none; stroke: rgba(252, 252, 254, .82); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sf-soft { fill: none; stroke: rgba(252, 252, 254, .26); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sf-dash { stroke-dasharray: 2 4; }
.sf-arc { fill: none; stroke: #4d6bff; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .7; }
.sf-dot { fill: #4d6bff; }
@media (prefers-reduced-motion: no-preference) {
  .sector-fig .sf-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sf-draw 2.2s cubic-bezier(.45, 0, .2, 1) .2s forwards; }
  .sector-fig .sf-soft, .sector-fig .sf-dot { opacity: 0; animation: sf-fade 1s ease 1.6s forwards; }
  .sector-fig .sf-arc { opacity: 0; animation: sf-pulse 3.6s ease-in-out 2s infinite; }
  .sector-fig .sf-arc1 { animation-delay: 2.4s; }
  .sector-fig .sf-arc2 { animation-delay: 2.8s; }
  @keyframes sf-draw { to { stroke-dashoffset: 0; } }
  @keyframes sf-fade { to { opacity: 1; } }
  @keyframes sf-pulse { 0%, 100% { opacity: 0; } 30%, 50% { opacity: .75; } }
}
.sector-related { padding: 55px 6vw 70px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; border-bottom: 1px solid #303946; }
.sector-related h2 { font-size: 30px; letter-spacing: -.03em; font-weight: 500; }
.sector-related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #303946; }
.sector-related li { border-bottom: 1px solid #303946; }
.sector-related a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16px; color: #dfe5ec; text-decoration: none; }
.sector-related a::after { content: '\2192'; color: #8292a5; }
.sector-related a:hover { color: #fff; }
.sector-related a:hover::after { color: #6b8aff; }
@media (max-width: 600px) { .sector-related { grid-template-columns: 1fr; gap: 18px; padding: 38px 6vw 46px; } }

/* Crescendo theater maps: one per page, where the exercise fits the sector. */
.sector-exercise { padding: clamp(56px, 7vw, 96px) 6vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(28px, 5vw, 72px); border-bottom: 1px solid #303946; max-width: 1500px; margin: 0 auto; box-sizing: border-box; align-items: start; }
.sector-exercise h2 { margin: 0; font-size: 30px; letter-spacing: -.03em; font-weight: 500; }
.sector-exercise .sx-kind { margin: 8px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sy-gray-dim, #8a8a93); }
.sector-exercise .sx-copy p:not(.sx-kind) { margin: 18px 0 0; font-size: 15px; line-height: 1.65; color: #aeb8c5; max-width: 30em; }
.sector-exercise .sx-copy a { display: inline-block; margin-top: 20px; font-size: 14px; color: #dfe5ec; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(252, 252, 254, .35); }
.sx-map { margin: 0; }
.sx-map img { display: block; width: 100%; height: auto; border: 1px solid #252d38; background: #020407; }
.sx-map figcaption { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--sy-gray-dim, #8a8a93); }
.sx-map figcaption b { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #dfe5ec; margin-right: 8px; }
.sx-key { display: inline-flex; gap: 14px; margin-left: 4px; }
.sx-key i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; }
.sx-key .r { background: #ff3547; } .sx-key .b { background: #2f7dff; }
@media (max-width: 900px) { .sector-exercise { grid-template-columns: minmax(0, 1fr); } }
.ex-figure { margin: 26px 0 0; }
.ex-figure img { display: block; width: 100%; height: auto; border: 1px solid #252d38; }
.ex-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.55; color: #8a8a93; }