/* Detection and Optimization: the run, the formulas, the radar, HCI and the
   three places answers get built. No backdrop-filter anywhere in here — every
   card in this file changes on hover, and DESIGN Sections 81 and 83 say glass
   and motion do not share an element. */

.engine-lead { color: #b7bdce; font-size: 16px; line-height: 1.8; max-width: 80ch; margin-bottom: 4px; }
.engine-aside { margin-top: 22px; padding: 16px 20px; background: #0f2231; border-left: 2px solid #2d5a70; border-radius: 0 10px 10px 0; color: #aebacd; font-size: 13.5px; line-height: 1.8; }
.engine-aside b { color: #dbe3ef; }

.run-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #2a3c51; }
.run-notes b { display: block; font: 500 14.5px 'Space Grotesk', sans-serif; color: #dbe3ef; margin-bottom: 7px; }
.run-notes span { display: block; color: #aebacd; font-size: 13px; line-height: 1.8; }

/* --- Formulas ----------------------------------------------------------- */
.formula-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
.formula-card { padding: 18px 20px 20px; background: #111d2b; border: 1px solid #263749; border-radius: 14px; }
.formula-head { display: flex; align-items: baseline; gap: 10px; }
.formula-head b { font: 500 20px 'Space Grotesk', sans-serif; color: #6dddff; }
.formula-head span { font-size: 12.5px; color: #93a3b8; letter-spacing: .02em; }
.formula-plain { color: #dbe3ef; font-size: 14px; line-height: 1.6; margin: 10px 0 14px; }
.formula-legend { color: #8c9bb0; font-size: 12px; line-height: 1.7; margin: 11px 0 0; }
.formula-legend i { font-style: italic; color: #a9b7c8; }

/* --- Four numbers into one score ---------------------------------------- */
.score-pipeline { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; margin-top: 28px; padding-top: 26px; border-top: 1px solid #2a3c51; align-items: start; }
.pipeline-copy h3 { font: 500 19px/1.4 'Space Grotesk', sans-serif; color: #e2e4f6; }
.pipeline-copy > p { color: #aebacd; font-size: 14px; line-height: 1.8; margin-top: 10px; }
.pipeline-note { color: #8c9bb0; font-size: 12.5px; line-height: 1.75; margin-top: 14px; }
.pipeline-figure { margin: 0; padding: 18px; background: #111d2b; border: 1px solid #263749; border-radius: 14px; }
.pipeline-figure svg { width: 100%; height: auto; display: block; }
.pipeline-figure figcaption { color: #93a3b8; font-size: 12.5px; line-height: 1.75; margin-top: 14px; }

/* --- Radar -------------------------------------------------------------- */
.radar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; align-items: stretch; }
.radar-card { margin: 0; padding: 22px 26px 22px; background: #111d2b; border: 1px solid #263749; border-radius: 16px; display: flex; flex-direction: column; }
.radar-card svg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.radar-card figcaption { color: #93a3b8; font-size: 13px; line-height: 1.75; margin-top: auto; padding-top: 16px; border-top: 1px solid #22344a; }
.radar-card figcaption b { color: #dbe3ef; font-weight: 600; }
.radar-read { padding: 18px 20px 20px; background: #0f2231; border: 1px solid #2d5a70; border-radius: 14px; }
.radar-read h3 { font: 500 18px/1.4 'Space Grotesk', sans-serif; color: #e2e4f6; }
.radar-read p { color: #aebacd; font-size: 13px; line-height: 1.8; margin-top: 10px; }
.radar-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 12px; color: #9aa8bc; }
.radar-legend .key { width: 18px; height: 0; border-top: 2px solid #6dddff; display: inline-block; }
.radar-legend .key-rival { border-top: 2px dashed #c9a227; }
.radar-strategy b { color: #6dddff; font-weight: 600; }
.radar-caution { color: #7f8fa3; font-size: 11.5px; border-top: 1px solid #22344a; padding-top: 12px; }

/* --- Three battlegrounds ------------------------------------------------ */
.battleground-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.battleground { padding: 18px 20px 20px; background: #111d2b; border: 1px solid #263749; border-radius: 14px; }
.bg-tag { display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7f8fa3; border: 1px solid #33485e; border-radius: 999px; padding: 3px 9px; }
.battleground b { display: block; font: 500 14.5px/1.5 'Space Grotesk', sans-serif; color: #e2e4f6; margin: 12px 0 8px; }
.battleground p { color: #9aa8bc; font-size: 12.5px; line-height: 1.75; margin: 0; }
.battleground em { color: #e2e4f6; font-style: italic; }
.battleground-closed { background: #221a2b; border-color: #4a3a5c; }
.battleground-closed .bg-tag { color: #c4a0e0; border-color: #5d4772; }
.battleground-note { margin-top: 22px; padding: 18px 20px; background: #0f2231; border-left: 2px solid #2d5a70; border-radius: 0 12px 12px 0; }
.battleground-note p { color: #aebacd; font-size: 13.5px; line-height: 1.85; margin: 0 0 12px; }
.battleground-note p:last-child { margin-bottom: 0; }
.battleground-note b { color: #dbe3ef; }

.engine-steps-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- Narrow ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .score-pipeline, .hci-layers, .battleground-row { grid-template-columns: 1fr; }
  .engine-steps-wide { grid-template-columns: repeat(2, 1fr); }
  .radar-card svg { max-width: 360px; margin: auto; }
}
@media (max-width: 720px) {
  .formula-grid, .run-notes, .hci-note { grid-template-columns: 1fr; }
  .engine-steps-wide { grid-template-columns: 1fr; }
}

/* --- HCI: four layers, twelve checks ----------------------------------- */
.hci-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.hci-brace { position: relative; height: 30px; border: 1px solid #2d5a70; border-bottom: 0; border-radius: 10px 10px 0 0; }
.hci-brace span { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 0 12px; background: #0a0e1a;
                  font-size: 12px; color: #9fd8ea; white-space: nowrap; }
.hb-understand { grid-column: 1 / 3; }
.hb-quote { grid-column: 3 / 5; border-color: #4a4327; }
.hb-quote span { color: #d9c88f; }
.hci-layer { grid-row: 2; padding: 20px 20px 22px; background: #111d2b; border: 1px solid #263749; border-top: 2px solid #6dddff;
             border-radius: 14px; transition: border-color .25s ease, transform .25s ease; }
.hci-layer:hover { transform: translateY(-3px); }
.hci-layer.hl-quote { border-top-color: #c9a227; }
.hl-n { font: 500 11px 'Space Grotesk', sans-serif; color: #6dddff; letter-spacing: .12em; }
.hl-quote .hl-n { color: #d9c88f; }
.hci-layer b { display: block; font: 500 18px 'Space Grotesk', sans-serif; color: #e2e4f6; margin: 8px 0 6px; letter-spacing: -.01em; }
.hci-layer > p { color: #aebacd; font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; min-height: 3.2em; }
.hci-layer ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #22344a; display: grid; gap: 8px; }
.hci-layer li { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: #93a3b8; line-height: 1.45; }
.hci-layer li i { font-style: normal; flex: none; min-width: 40px; font: 500 10.5px 'Space Grotesk', sans-serif; color: #6dddff;
                  background: #0e3446; border: 1px solid #2d5a70; border-radius: 5px; padding: 2px 5px; text-align: center; }
.hl-quote li i { color: #d9c88f; background: #211e13; border-color: #4a4327; }
.hci-oneline { color: #8c9bb0; font-size: 13.5px; line-height: 1.75; margin-top: 22px; max-width: 72ch; }
@media (max-width: 1080px) {
  .hci-map { grid-template-columns: 1fr 1fr; }
  .hci-brace { display: none; }
  .hci-layer { grid-row: auto; }
}
@media (max-width: 640px) { .hci-map { grid-template-columns: 1fr; } .hci-layer > p { min-height: 0; } }

/* --- Three rooms -------------------------------------------------------- */
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #22344a; }
.bg-chips span { font-size: 11.5px; color: #9aa8bc; background: #16263a; border: 1px solid #2b3f55; border-radius: 999px; padding: 4px 10px; }
.battleground-closed .bg-chips span { background: #2a2136; border-color: #4a3a5c; color: #c4a0e0; }


.lead-punch { color: #dbe3ef !important; font-size: 16.5px !important; line-height: 1.6 !important; padding-left: 18px; border-left: 2px solid #6dddff; margin-top: 18px; }
.family-note { color: #8c9bb0; font-size: 13.5px; line-height: 1.75; margin-top: 22px; max-width: 72ch; }

/* --- Product family chain ----------------------------------------------- */
.family-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.family-step { padding: 18px 18px 20px; background: #111d2b; border: 1px solid #263749; border-radius: 14px; transition: border-color .25s ease, transform .25s ease; }
.family-step:hover { border-color: #3f5c78; transform: translateY(-3px); }
.family-kicker { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7f8fa3; margin-bottom: 10px; }
.family-step b { display: block; font: 500 15px 'Space Grotesk', sans-serif; color: #e2e4f6; margin-bottom: 8px; }
.family-step p { color: #93a3b8; font-size: 12.5px; line-height: 1.7; margin: 0; }
.family-current { background: #0f2231; border-color: #6dddff; }
.family-current .family-kicker { color: #6dddff; }
.family-current b { color: #6dddff; }
.family-base { background: #16202e; }

@media (max-width: 1080px) {
  .family-chain { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .family-chain { grid-template-columns: 1fr; }
}

/* --- One Axis run: the run map. One question set, six models, n rounds, one
   archive, left to right on one rail. The three connector columns hold SVGs
   drawn to the body row's fixed 296px height, so the curves land on the
   pills at every width down to the stacked layout. Nothing blurs. */
/* the map needs more width than the text around it */
.engine-page #run { max-width: 1340px; }
.engine-page #run > h2, .engine-page #run > .engine-lead, .engine-page #run > .run-sum, .engine-page #run > .run-notes { max-width: 1056px; margin-left: auto; margin-right: auto; }
.run-map { margin: 26px 0 0; padding: 22px 26px 26px; background: #0b1622; border: 1px solid #22344a; border-radius: 18px; }
.rm-cap { margin: 0 0 6px !important; max-width: none !important; text-align: center; color: #8fa3b8 !important; font-size: 13.5px !important; letter-spacing: .02em; }
.rm-grid { display: grid; list-style: none; margin: 0; padding: 0;
           grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 64px minmax(0, 1fr) 32px minmax(0, 1.35fr) 36px minmax(0, 1.25fr);
           grid-template-rows: 46px auto auto auto; column-gap: 0; }
.rm-step, .rm-gap { display: contents; }

/* the rail: a line that fills left to right, five stops, an arrowhead */
.rm-rail { grid-row: 1; grid-column: 1 / -1; position: relative; align-self: center; height: 3px; margin: 0 6px 0 3%; border-radius: 2px; background: #1c2c3f; }
.rm-rail::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #9fe6ff, #3a8fb7 55%, #1f5d7a);
                   transform-origin: left; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.22, .61, .36, 1) .1s; }
.rm-rail::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left: 11px solid #1f5d7a; border-right: 0; }
.run-map.is-in .rm-rail::before, html:not(.has-motion) .rm-rail::before { transform: scaleX(1); }
.rm-dot { grid-row: 1; align-self: center; justify-self: center; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
          width: 36px; height: 36px; border-radius: 50%; background: #0e2b3d; border: 2px solid #2d5a70; color: #e8fbff; font: 600 15px 'Space Grotesk', sans-serif;
          transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease; }
.rm-step.is-in .rm-dot, html:not(.has-motion) .rm-dot { border-color: #6dddff; background: #0e3446; box-shadow: 0 0 0 5px rgba(109, 221, 255, .08); }

.rm-label { grid-row: 2; margin: 12px 4px 18px !important; max-width: none !important; text-align: center; line-height: 1.35 !important; }
.rm-kicker { display: block; color: #e2e4f6; font: 600 12px/1.35 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rm-kicker em { font-style: normal; margin-left: 6px; color: #6dddff; letter-spacing: .04em; }
.rm-sub { display: block; margin-top: 3px; color: #8fa3b8; font-size: 12.5px; }
.rm-body { grid-row: 3; position: relative; height: 296px; min-width: 0; }
.rm-foot { grid-row: 4; margin: 14px 4px 0 !important; max-width: none !important; text-align: center; color: #8fa3b8 !important; font-size: 12px !important; line-height: 1.6 !important; }
.rm-sel { color: #e9c46a; font-weight: 600; }
.rm-good { color: #6dddff; font-weight: 600; font-size: 13px; }

.rm-s1 > * { grid-column: 1; } .rm-s2 > * { grid-column: 2; } .rm-s3 > * { grid-column: 4; } .rm-s4 > * { grid-column: 6; } .rm-s5 > * { grid-column: 8; }
.rm-g1 > * { grid-column: 3; } .rm-g2 > * { grid-column: 5; } .rm-g3 > * { grid-column: 7; }
.rm-gap > svg { grid-row: 3; align-self: start; overflow: visible; }

/* 1 -- the grid, and the wedge from the chosen cell */
.rm-matrix { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.rm-cells { position: relative; z-index: 1; display: grid; grid-template-columns: 26px repeat(5, 28px); grid-auto-rows: 28px; gap: 4px; }
.rm-cells > span { border-radius: 5px; }
.rm-corner { background: none; }
.rm-e, .rm-p { display: flex; align-items: center; justify-content: center; font: 600 10.5px 'Space Grotesk', sans-serif; color: #e8fbff; }
.rm-e { background: #1f5d6e; } .rm-p { background: #1b3553; }
.rm-cell { background: rgba(22, 38, 58, .82); border: 1px solid #22344a; }
.rm-cell.is-on { background: rgba(233, 196, 106, .18); border: 2px solid #e9c46a; box-shadow: 0 0 0 3px rgba(233, 196, 106, .12); }
.rm-wedge { position: absolute; z-index: 0; top: calc(50% - 94px); height: 188px; left: calc(50% - 21px); width: calc(50% + 42px); overflow: visible; }
.rm-wedge polygon { fill: rgba(233, 196, 106, .13); }

/* 2 -- the question set */
.rm-qs { height: 100%; padding-top: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.rm-q { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 14px; background: #111d2b; border: 1px solid #2b3f55; border-radius: 12px; }
.rm-q b { font: 700 17px 'Space Grotesk', sans-serif; color: #e2e4f6; }
.rm-q strong { display: block; color: #9fe6ff; font: 600 12.5px 'Space Grotesk', sans-serif; }
.rm-q small { display: block; color: #8fa3b8; font-size: 11.5px; }

/* connectors */
.rm-link path { fill: none; stroke: #3a8fb7; stroke-width: 1.6; }
.rm-lanes path { stroke: #3d5a72; }
.rm-link circle { fill: #6dddff; }

/* 3 -- the six models */
.rm-models { padding-top: 28px; display: grid; gap: 8px; }
.rm-model { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: #111d2b; border: 1px solid #2b3f55; border-left-width: 3px; border-radius: 10px;
            color: #e2e4f6; font: 600 13px 'Space Grotesk', sans-serif; }
.rm-model img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.rm-intl { border-left-color: #6dddff; } .rm-cn { border-left-color: #d9c88f; }
.rm-mono { filter: invert(1); }

/* 4 -- the rounds, inside one dashed frame */
.rm-rounds { height: calc(100% + 8px); padding: 0 10px; border: 1.5px dashed #2d5a70; border-radius: 14px; display: grid; grid-template-rows: 28px repeat(6, 38px); row-gap: 8px; align-content: start; }
.rm-rounds-h { margin: 0 !important; max-width: none !important; align-self: center; text-align: center; color: #6dddff !important; font: 600 11.5px 'Space Grotesk', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
.rm-round { display: grid; grid-template-columns: 1fr 1fr 18px 1fr; gap: 6px; align-items: center; }
.rm-round span { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 7px; background: #10262f; border: 1px solid #245264;
                 color: #bfe9f5; font: 500 11.5px 'Space Grotesk', sans-serif; white-space: nowrap; }
.rm-round i { font-style: normal; text-align: center; color: #6f8399; letter-spacing: .1em; }

/* 5 -- the library */
.rm-lib { position: relative; top: 50%; transform: translateY(-50%); background: #0f1b29; border: 1px solid #2b3f55; border-radius: 12px; overflow: hidden; }
.rm-lib-h { margin: 0 !important; max-width: none !important; padding: 9px 12px; background: #1b3553; color: #e8fbff !important; font: 700 11.5px 'Space Grotesk', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.rm-lib-cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.5fr; gap: 6px; padding: 8px 12px 6px; border-bottom: 1px solid #22344a; }
.rm-lib-cols span { color: #8fa3b8; font: 600 10.5px 'Space Grotesk', sans-serif; }
.rm-lib-g { display: grid; grid-template-columns: 1fr 3.8fr; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #1c2c3f; }
.rm-lib-g:last-child { border-bottom: 0; }
.rm-lib-g > b { color: #e2e4f6; font: 700 12.5px 'Space Grotesk', sans-serif; }
.rm-lib-g > div { display: grid; gap: 3px; }
.rm-lib-r { display: grid; grid-template-columns: 1fr 1.3fr 1.5fr; gap: 6px; align-items: center; height: 18px; }
.rm-lib-r img { width: 13px; height: 13px; object-fit: contain; }
.rm-lib-r em { font-style: normal; color: #aebacd; font-size: 10.5px; white-space: nowrap; }
.rm-lib-r i { display: block; height: 4px; border-radius: 2px; background: #2d4a63; }

/* stacked: one step under another, connectors and rail give way */
@media (max-width: 1180px) {
  .rm-kicker { white-space: normal; }
}
@media (max-width: 1080px) {
  .run-map { padding: 18px; }
  .rm-grid { display: block; }
  .rm-step { display: block; padding: 18px 0; border-top: 1px solid #1c2c3f; }
  .rm-step:first-of-type { border-top: 0; }
  .rm-gap, .rm-rail, .rm-wedge { display: none; }
  .rm-dot { float: left; margin-right: 12px; }
  .rm-label { text-align: left; margin: 0 0 14px !important; min-height: 36px; }
  .rm-body { height: auto; }
  .rm-qs, .rm-models { padding-top: 0; }
  .rm-models { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .rm-rounds { height: auto; grid-template-rows: auto; padding: 10px; }
  .rm-lib { top: auto; transform: none; max-width: 420px; }
  .rm-matrix { justify-content: flex-start; }
  .rm-foot { text-align: left; }
}
@media (max-width: 480px) {
  .rm-cells { grid-template-columns: 24px repeat(5, 24px); grid-auto-rows: 24px; }
  .rm-round { grid-template-columns: 1fr 1fr 14px 1fr; }
}

.run-sum { color: #aebacd; font-size: 14px; line-height: 1.8; margin: 22px 0 0; max-width: 84ch; }
.run-sum b { color: #dbe3ef; }

/* --- What each measurement looks like, instead of what it is written as --- */
.formula-viz { margin: 4px 0 2px; padding: 13px 14px; background: #0b1622; border: 1px solid #22344a; border-radius: 9px; }
.fv-read { display: block; font-size: 11.5px; color: #6dddff; letter-spacing: .01em; margin-top: 11px; }

.fv-dots { display: flex; gap: 6px; }
.fv-dots i { display: block; width: 100%; max-width: 18px; height: 10px; border-radius: 3px; background: #1c2c3f; }
.fv-dots i.on { background: #6dddff; }

.fv-lines { display: grid; gap: 4px; }
.fv-lines i { display: block; height: 4px; border-radius: 2px; background: #1c2c3f; }
.fv-lines i:nth-child(2n) { width: 82%; }
.fv-lines i:last-child { width: 46%; }
.fv-lines i.on { background: #6dddff; }

.fv-ladder { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.fv-ladder i { display: block; flex: 1; border-radius: 2px 2px 0 0; background: #1c2c3f; height: 40%; }
.fv-ladder i:nth-child(1) { height: 100%; } .fv-ladder i:nth-child(2) { height: 92%; }
.fv-ladder i:nth-child(3) { height: 84%; } .fv-ladder i:nth-child(4) { height: 76%; }
.fv-ladder i:nth-child(5) { height: 68%; } .fv-ladder i:nth-child(6) { height: 60%; }
.fv-ladder i:nth-child(7) { height: 52%; } .fv-ladder i:nth-child(8) { height: 44%; }
.fv-ladder i:nth-child(9) { height: 36%; } .fv-ladder i:nth-child(10) { height: 28%; }
.fv-ladder i.on { background: #6dddff; }

.fv-split { height: 10px; border-radius: 5px; background: #1c2c3f; overflow: hidden; }
.fv-split i { display: block; height: 100%; width: var(--w, 0%); background: #6dddff; border-radius: 5px; }

/* --- The weights, as weights ------------------------------------------- */
.score-weights { display: grid; gap: 9px; margin: 18px 0 0; }
.score-weights > div { display: grid; grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.score-weights span { font: 500 12px 'Space Grotesk', sans-serif; color: #93a3b8; }
.score-weights i { display: block; height: 8px; border-radius: 4px; background: #16263a; position: relative; }
.score-weights i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 4px; background: #6dddff;
                          transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22, .61, .36, 1) .15s; }
.pipeline-copy.is-in .score-weights i::after, .score-pipeline.is-in .score-weights i::after { transform: scaleX(1); }
.score-weights b { font-size: 10.5px; color: #6f8399; font-weight: 400; text-align: right; }

/* --- The curve ---------------------------------------------------------- */
.pipeline-figure .ax { stroke: #2b3f55; stroke-width: 1; }
.pipeline-figure .ax-dash { stroke: #33485e; stroke-width: 1; stroke-dasharray: 3 4; }
.pipeline-figure .curve { fill: none; stroke: #6dddff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pipeline-figure .knot { fill: #6dddff; }
.pipeline-figure .lead { fill: none; stroke: #3f5c78; stroke-width: 1; }
.pipeline-figure .lb { font-family: 'Space Grotesk', sans-serif; font-size: 9px; fill: #8fc9dd; }
.pipeline-figure .lb.dim { fill: #6f8399; font-size: 8.5px; }


/* --- Source intelligence: two tracks, two economies ---------------------- */
.source-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.source-chart { margin: 0; padding: 20px 22px 22px; background: #111d2b; border: 1px solid #263749; border-radius: 16px; }
.source-chart figcaption { font: 500 13px 'Space Grotesk', sans-serif; color: #dbe3ef; margin-bottom: 16px; }
.src-bars { display: grid; gap: 10px; }
.src-bars > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.src-bars span { font-size: 12px; color: #93a3b8; line-height: 1.35; }
.src-bars i { display: block; height: 9px; border-radius: 5px; background: #16263a; position: relative; }
.src-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 5px; background: #3f5c78;
                     transform: scaleX(0); transform-origin: left; transition: transform .85s cubic-bezier(.22, .61, .36, 1) var(--d, .1s); }
.source-chart.is-in .src-bars i::after { transform: scaleX(1); }
.src-bars b { font: 500 12.5px 'Space Grotesk', sans-serif; color: #8c9bb0; text-align: right; }
.src-bars .src-you i { background: #2a1c22; }
.src-bars .src-you span, .src-bars .src-you b { color: #d08c73; }
.src-bars .src-you-in i::after { background: #d08c73; }
.source-note { color: #aebacd; font-size: 14px; line-height: 1.85; margin: 22px 0 0; max-width: 88ch; }
.source-note b { color: #dbe3ef; }

.reverse { margin-top: 30px; padding-top: 26px; border-top: 1px solid #2a3c51; }
.reverse h3 { font: 500 19px/1.4 'Space Grotesk', sans-serif; color: #e2e4f6; }
.reverse-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 20px 0 0; padding: 0; }
.reverse-steps li { padding: 16px 18px 18px; background: #111d2b; border: 1px solid #263749; border-radius: 13px; transition: border-color .25s ease; }
.reverse-steps li:hover { border-color: #3f5c78; }
.reverse-steps span { font: 500 10.5px 'Space Grotesk', sans-serif; color: #6dddff; letter-spacing: .12em; }
.reverse-steps b { display: block; font: 500 14.5px 'Space Grotesk', sans-serif; color: #e2e4f6; margin: 9px 0 8px; }
.reverse-steps p { color: #93a3b8; font-size: 12.5px; line-height: 1.7; margin: 0; }
.reverse-note { color: #aebacd; font-size: 13.5px; line-height: 1.85; margin: 20px 0 0; max-width: 84ch;
                padding-left: 18px; border-left: 2px solid #2d5a70; }
.reverse-note b { color: #dbe3ef; }
.reverse-note em { color: #e2e4f6; font-style: italic; }

/* --- The two columns of the promise ------------------------------------- */
.pledge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.pledge { padding: 22px 24px 24px; background: #111d2b; border: 1px solid #263749; border-radius: 16px; }
.pledge-tag { display: inline-block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
              border: 1px solid #33485e; border-radius: 999px; padding: 4px 11px; color: #7f8fa3; margin-bottom: 18px; }
.pledge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pledge li { padding-left: 20px; position: relative; }
.pledge li::before { position: absolute; left: 0; top: 1px; font: 500 13px 'Space Grotesk', sans-serif; }
.pledge b { display: block; font: 500 14.5px/1.4 'Space Grotesk', sans-serif; color: #e2e4f6; margin-bottom: 6px; }
.pledge span { display: block; color: #93a3b8; font-size: 13px; line-height: 1.75; }
.pledge-yes { background: #0f2231; border-color: #2d5a70; }
.pledge-yes .pledge-tag { color: #6dddff; border-color: #2f6d86; }
.pledge-yes li::before { content: '\2713'; color: #6dddff; }
.pledge-no li::before { content: '\2715'; color: #b0757f; }
.pledge-no b { color: #dbe3ef; }
.pledge-foot { color: #aebacd; font-size: 14px; line-height: 1.85; margin: 24px 0 0; max-width: 88ch; }

@media (max-width: 1080px) {
  .source-split, .pledge-row { grid-template-columns: 1fr; }
  .reverse-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reverse-steps { grid-template-columns: 1fr; }
  .src-bars > div { grid-template-columns: 120px minmax(0, 1fr) 30px; gap: 8px; }
}

/* The archive table and the two source charts lose their meaning below a
   certain width; they get their own minimum and a sideways scroll. */
@media (max-width: 560px) {
  .ar-lib { min-width: 240px; }
  .src-bars > div { grid-template-columns: 100px minmax(0, 1fr) 28px; }
  .src-bars span { font-size: 11px; }
}

/* --- E moves: the Insights engine and the environment over time --------- */
.et-figure { margin: 26px 0 0; padding: 20px 22px 16px; background: #111d2b; border: 1px solid #263749; border-radius: 16px; }
.et-chart { display: block; width: 100%; height: auto; }
.et-chart text { font-family: 'Space Grotesk', sans-serif; }
.et-key { fill: #16263a; stroke: #2b3f55; }
.et-key-e { fill: #221e13; stroke: #4a4327; }
.et-key-vs { fill: #0e3446; stroke: #2d5a70; }
.et-keyt { fill: #dbe3ef; font-size: 12px; font-weight: 500; }
.et-sub { font-size: 8px; }
.et-note { fill: #6f8399; font-size: 10.5px; }
.et-p { stroke: #8c9bb0; stroke-width: 2; }
.et-ebase { stroke: #4a4327; stroke-width: 1.4; stroke-dasharray: 4 5; }
.et-axis { stroke: #22344a; stroke-width: 1; }
.et-wk { fill: #56687d; font-size: 9.5px; }
.et-guide { stroke: #3a4a5e; stroke-width: 1; stroke-dasharray: 3 4; }
.et-ev circle { fill: #221e13; stroke: #c9a227; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.et-ev text { fill: #d9c88f; font-size: 10.5px; }
.et-ev.ev-sent circle { stroke: #c4a0e0; fill: #221a2b; }
.et-ev.ev-sent text { fill: #c4a0e0; }
.et-ev.ev-ind circle { stroke: #d08c73; fill: #2a1c1a; }
.et-ev.ev-ind text { fill: #d08c73; }
.et-vs { fill: none; stroke: #6dddff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.et-dots circle { fill: #0b1622; stroke: #6dddff; stroke-width: 1.4; }
.et-dots circle.hot { fill: #6dddff; }
.et-val { fill: #6dddff; font-size: 11px; font-weight: 500; }
.et-figure figcaption { color: #7f8fa3; font-size: 12px; line-height: 1.7; margin-top: 10px; }

/* It arrives in order: the constant, then the signals, then the score. */
.has-motion .et-vs { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1) .5s; }
.et-figure.is-in .et-vs { stroke-dashoffset: 0; }
.has-motion .et-ev, .has-motion .et-dots, .has-motion .et-val { opacity: 0; transition: opacity .45s ease-out; }
.et-figure.is-in .et-ev { opacity: 1; transition-delay: calc(.35s + var(--i, 0) * .35s); }
.et-figure.is-in .et-dots, .et-figure.is-in .et-val { opacity: 1; transition-delay: 1.6s; }
.et-figure.is-in .et-ev circle { animation: etPulse 2.8s ease-in-out 2.2s infinite; }
@keyframes etPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .et-figure.is-in .et-ev circle { animation: none; } }

.et-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.et-card { padding: 18px 20px 20px; background: #111d2b; border: 1px solid #263749; border-top: 2px solid #c9a227; border-radius: 14px; display: flex; flex-direction: column; }
.et-card.ev-sent { border-top-color: #c4a0e0; }
.et-card.ev-ind { border-top-color: #d08c73; }
.et-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #d9c88f; }
.et-card.ev-sent .et-tag { color: #c4a0e0; }
.et-card.ev-ind .et-tag { color: #d08c73; }
.et-signal { color: #dbe3ef; font: 500 14.5px/1.45 'Space Grotesk', sans-serif; margin: 10px 0 12px; }
.et-ask { color: #aebacd; font-size: 13px; line-height: 1.65; margin: 0 0 14px; padding: 10px 12px; background: #0b1622; border: 1px solid #22344a; border-radius: 9px; }
.et-move { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding-top: 12px; border-top: 1px solid #22344a; }
.et-move b { font: 600 17px 'Space Grotesk', sans-serif; color: #d08c73; white-space: nowrap; }
.et-move.et-up b { color: #6dddff; }
.et-move span { color: #93a3b8; font-size: 12.5px; line-height: 1.6; }

.et-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #2a3c51; }
.et-step { padding: 15px 17px 17px; background: #111d2b; border: 1px solid #263749; border-radius: 13px; position: relative; }
.et-step span { font: 500 10.5px 'Space Grotesk', sans-serif; color: #6dddff; letter-spacing: .12em; }
.et-step b { display: block; font: 500 14.5px 'Space Grotesk', sans-serif; color: #e2e4f6; margin: 8px 0 7px; }
.et-step p { color: #93a3b8; font-size: 12.5px; line-height: 1.7; margin: 0; }
.et-step:not(:last-child)::after { content: '\2192'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: #3f5c78; font-size: 13px; z-index: 1; }
.et-step-out { background: #0f2231; border-color: #2d5a70; }
.et-foot { color: #aebacd; font-size: 14px; line-height: 1.8; margin: 20px 0 0; max-width: 88ch; }
.et-foot b { color: #dbe3ef; }

@media (max-width: 1080px) {
  .et-cards { grid-template-columns: 1fr; }
  .et-loop { grid-template-columns: repeat(2, 1fr); }
  .et-step:nth-child(2)::after { display: none; }
}
@media (max-width: 720px) {
  .et-figure { overflow-x: auto; }
  .et-chart { min-width: 620px; }
  .et-loop { grid-template-columns: 1fr; }
  .et-step::after { display: none; }
}

/* The reading of the radar sits under both charts, as text rather than a card. */
.ra-step { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6dddff; margin-bottom: 6px; }
.radar-after { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; margin-top: 30px; }
.ra-lead h3 { font: 500 20px/1.35 'Space Grotesk', sans-serif; color: #e2e4f6; }
.ra-lead p { color: #aebacd; font-size: 14px; line-height: 1.8; margin-top: 8px; }
.ra-plays { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ra-plays li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #22344a; }
.ra-plays li:first-child { border-top: 1px solid #22344a; }
.ra-plays b { font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ra-plays span { color: #aebacd; font-size: 14px; line-height: 1.6; }
.ra-attack b { color: #e0574f; }
.ra-defend b { color: #6dddff; }
.ra-monitor b { color: #7f8fa3; }
.engine-section > p.radar-caution { margin-top: 18px; border-top: 0; padding-top: 0; font-size: 12px; line-height: 1.7; color: #7f8fa3; }
@media (max-width: 900px) { .radar-row, .radar-after { grid-template-columns: 1fr; gap: 20px; } }
/* The page's own paragraph size would otherwise win here and push the lists out of line. */
.engine-section .hci-layer > p { font-size: 14px; line-height: 1.55; min-height: 4.65em; }
.engine-section p.hci-oneline { font-size: 13.5px; }
@media (max-width: 640px) { .engine-section .hci-layer > p { min-height: 0; } }
/* the n stays lowercase inside the uppercase labels, as in the deck */
.rm-n { font-style: italic; text-transform: none; letter-spacing: 0; }

/* pg:start -- how personas are built (detection-engine.html#personas).
   Material in, the agent in the middle, tags out, personas at the end. The
   loop is flow dashes, a turning ring and tags arriving: things move and
   fade, nothing blurs (DESIGN §83). Without motion it is the finished state. */
.engine-page #personas { max-width: 1340px; }
.engine-page #personas > h2, .engine-page #personas > .engine-lead { max-width: 1056px; margin-left: auto; margin-right: auto; }
.pg-map { display: grid; grid-template-columns: minmax(0, 1fr) 52px 176px 52px minmax(0, 1.45fr) 44px minmax(0, 1.15fr); align-items: center;
          margin: 26px 0 0; padding: 26px 26px 24px; background: #0b1622; border: 1px solid #22344a; border-radius: 18px; }
.pg-col { min-width: 0; }
.pg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px !important; max-width: none !important;
        color: #e2e4f6 !important; font: 600 12px 'Space Grotesk', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }

/* 1 -- the material */
.pg-in ul { list-style: none; margin: 0; padding: 0 14px 0 0; display: grid; gap: 7px; position: relative; }
.pg-in ul::after { content: ''; position: absolute; right: 0; top: 18px; bottom: 18px; width: 10px; border: 1.5px solid #2d5a70; border-left: 0; border-radius: 0 10px 10px 0; }
.pg-in li { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: #111d2b; border: 1px solid #2b3f55; border-radius: 10px;
            color: #d5dbea; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-in li .material-symbols-outlined { flex: none; font-size: 18px; color: #6dddff; }
.pg-lock { display: flex; align-items: center; gap: 6px; margin: 10px 0 0 !important; max-width: none !important; color: #8fa3b8 !important; font-size: 11.5px !important; line-height: 1.4 !important; }
.pg-lock .material-symbols-outlined { font-size: 15px; color: #e9c46a; }

/* connectors: dashes flowing left to right */
.pg-link svg { display: block; width: 100%; height: 12px; overflow: visible; }
.pg-flow { fill: none; stroke: #3a8fb7; stroke-width: 1.8; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.pg-head { fill: none; stroke: #6dddff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html.has-motion .pg-map.is-in .pg-flow { animation: pgFlow 1s linear infinite; }
@keyframes pgFlow { to { stroke-dashoffset: -11; } }

/* 2 -- the agent */
.pg-agent { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pg-core { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
           background: radial-gradient(circle at 50% 45%, #13354a, #0c1f2d 70%); border: 1px solid #2d5a70; }
.pg-core img { position: relative; z-index: 1; width: 34px; height: auto; }
.pg-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1.5px dashed rgba(109, 221, 255, .55); }
.pg-pulse { position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(109, 221, 255, .35); }
html.has-motion .pg-map.is-in .pg-ring { animation: pgTurn 14s linear infinite; }
html.has-motion .pg-map.is-in .pg-pulse { animation: pgPulse 2.4s ease-out infinite; }
@keyframes pgTurn { to { transform: rotate(360deg); } }
@keyframes pgPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.22); opacity: 0; } }
.pg-agent-n { margin: 14px 0 6px !important; max-width: none !important; color: #e8fbff !important; font: 600 13px 'Space Grotesk', sans-serif !important; }
.pg-ops { display: flex; gap: 4px; margin: 0 !important; max-width: none !important; }
.pg-ops span { padding: 2px 8px; border-radius: 999px; border: 1px solid #2b3f55; color: #8fa3b8; font-size: 11px; line-height: 1.5; }
html.has-motion .pg-map.is-in .pg-ops span { animation: pgOp 3.6s linear infinite; }
html.has-motion .pg-map.is-in .pg-ops span:nth-child(2) { animation-delay: 1.2s; }
html.has-motion .pg-map.is-in .pg-ops span:nth-child(3) { animation-delay: 2.4s; }
@keyframes pgOp { 0%, 30% { color: #06121c; background: #6dddff; border-color: #6dddff; } 34%, 100% { color: #8fa3b8; background: transparent; border-color: #2b3f55; } }

/* 3 -- the tags */
.pg-tags-b { display: flex; align-items: stretch; gap: 10px; }
.pg-dims { flex: 1; min-width: 0; }
/* the brace: two curled ends, two straight runs that stretch with the rows, and a tip pointing back at the agent */
.pg-brace { flex: none; display: flex; flex-direction: column; align-items: center; width: 22px; padding: 4px 0; }
.pg-brace svg { display: block; width: 22px; height: 12px; flex: none; overflow: visible; }
.pg-brace svg.pg-tip { height: 24px; }
.pg-brace path { fill: none; stroke: #3a8fb7; stroke-width: 2; stroke-linecap: round; }
.pg-brace .pg-tip path { stroke: #6dddff; }
.pg-brace i { flex: 1; width: 0; border-left: 2px solid #3a8fb7; }
html.has-motion .pg-map .pg-brace { opacity: 0; transform: translateX(-6px); }
html.has-motion .pg-map.is-in .pg-brace { animation: pgIn .5s ease .3s forwards; }
.pg-key { display: inline-flex; align-items: center; gap: 5px; color: #8fa3b8; font: 500 11px 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
.pg-key i { width: 11px; height: 11px; border-radius: 4px; border: 1.5px solid #3f7f99; background: #10262f; margin-left: 6px; }
.pg-key i.is-latent { border-style: dashed; background: transparent; }
.pg-dim { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid #1c2c3f; }
.pg-dim:first-child { border-top: 0; }
.pg-dim-l { display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; color: #aebacd; font-size: 12px; font-weight: 600; }
.pg-dim-l i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.pg-dim > div { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-tag { padding: 3px 9px; border-radius: 999px; border: 1.5px solid #2d5a70; background: #10262f; color: #d9f3fb; font-size: 11.5px; line-height: 1.45; white-space: nowrap;
          transition: border-color .3s ease, color .3s ease; }
.pg-tag.is-latent { border-style: dashed; border-color: #4a6278; background: transparent; color: #aebacd; }
html.has-motion .pg-map .pg-tag { opacity: 0; transform: translateY(4px); }
html.has-motion .pg-map.is-in .pg-tag { animation: pgIn .4s ease forwards; animation-delay: calc(.5s + var(--i) * .11s); }
html.has-motion .pg-map.is-in .pg-tag.is-pick { animation: pgIn .4s ease forwards, pgPick 4.8s ease-in-out 2.4s infinite; animation-delay: calc(.5s + var(--i) * .11s), 2.4s; }
@keyframes pgIn { to { opacity: 1; transform: none; } }
@keyframes pgPick { 0%, 12%, 88%, 100% { border-color: inherit; } 25%, 75% { border-color: #6dddff; color: #fff; } }

/* 4 -- the personas */
.pg-p1 { padding: 12px 14px; background: linear-gradient(150deg, rgba(109, 221, 255, .12), rgba(109, 221, 255, .03)); border: 1px solid rgba(109, 221, 255, .38); border-radius: 12px; }
.pg-p1 b, .pg-pn b { color: #6dddff; font: 700 11.5px 'Space Grotesk', sans-serif; }
.pg-p1 strong { display: block; margin: 2px 0 8px; color: #fff; font: 600 13.5px/1.35 'Space Grotesk', sans-serif; }
.pg-p1-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pg-p1-tags span { padding: 1px 7px; border-radius: 6px; background: #10262f; border: 1px solid #245264; color: #bfe9f5; font-size: 10.5px; white-space: nowrap; }
.pg-fit { display: block; height: 5px; border-radius: 3px; background: #1c2c3f; overflow: hidden; }
.pg-fit i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 3px; background: linear-gradient(90deg, #3a8fb7, #6dddff); transform-origin: left; }
.pg-p1 small { display: block; margin-top: 5px; color: #9fe6ff; font-size: 11.5px; font-weight: 600; }
.pg-pn { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 7px; padding: 8px 12px; background: #111d2b; border: 1px solid #2b3f55; border-radius: 10px; font-size: 12.5px; color: #d5dbea; }
.pg-pn em { font-style: normal; font-weight: 600; color: #9fe6ff; font-size: 12px; }
html.has-motion .pg-map .pg-p1, html.has-motion .pg-map .pg-pn { opacity: 0; transform: translateY(6px); }
html.has-motion .pg-map.is-in .pg-p1 { animation: pgIn .5s ease 2.1s forwards; }
html.has-motion .pg-map.is-in .pg-pn { animation: pgIn .5s ease 2.4s forwards; }
html.has-motion .pg-map.is-in .pg-pn + .pg-pn { animation-delay: 2.6s; }
html.has-motion .pg-map .pg-fit i { transform: scaleX(0); }
html.has-motion .pg-map.is-in .pg-fit i { animation: pgFill 1s ease 2.5s forwards; }
@keyframes pgFill { to { transform: scaleX(1); } }

/* the four steps, under the map */
.pg-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; }
.pg-steps li { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #0e1a27; border: 1px solid #1c2c3f; color: #aebacd; font-size: 13px; }
.pg-steps b { color: #6dddff; font: 600 12px 'Space Grotesk', sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .pg-map *, .pg-map *::before { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1279px) {
  .pg-map { grid-template-columns: minmax(0, 1.1fr) 34px 140px 34px minmax(0, 1.3fr) 30px minmax(0, 1.1fr); padding: 22px 20px; }
  .pg-core { width: 112px; height: 112px; }
  .pg-in li { white-space: normal; height: auto; min-height: 38px; padding: 7px 10px; font-size: 12.5px; line-height: 1.3; }
  .pg-dim { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .pg-map { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 6px; padding: 20px; }
  .pg-link { justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 2px 0; }
  .pg-link svg { display: none; }
  .pg-brace { display: none; }
  .pg-link::before { content: ''; height: 20px; border-left: 2px dashed #3a8fb7; }
  .pg-link::after { content: ''; border: 6px solid transparent; border-top: 8px solid #6dddff; border-bottom: 0; }
  .pg-agent { padding: 6px 0; }
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pg-dim { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .pg-steps { grid-template-columns: minmax(0, 1fr); }
}
/* pg:end */