/* Homepage prediction and detection presentations, scoped to the platform page. */
.tr main {
.pdx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .45);
  --line: rgba(174, 188, 239, .16); --chip: rgba(255, 255, 255, .08); --chip-ink: #c8d3f5; --code: #9fb0e0; --bar: #ff5a61; --ok: #3ecf8e; --scan: #8fb0ff;
  position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink);
  background: radial-gradient(60% 50% at 50% 0%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); }
.pdx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f5f7fc;
  --line: #e3e8f3; --chip: #eef2fa; --chip-ink: #3a4670; --code: #5d6a93; --bar: #e0343c; --ok: #13936a; --scan: #2f5fd0;
  background: linear-gradient(180deg, #fff, #f4f7fc); }
.pdx-in { width: var(--wide); margin-inline: auto; }
.pdx-head { text-align: center; margin-bottom: clamp(44px, 3.8vw, 64px); }
.pdx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--bar); }
.pdx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); }
.pdx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); }
.pdx-head > p:last-child { max-width: 780px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mut); }
.pdx-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 1.8vw, 30px); }
.pdx-p { display: flex; flex-direction: column; padding: clamp(22px, 1.8vw, 30px); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.pdx.lt .pdx-p { box-shadow: inset 0 0 0 1px var(--card-line), 0 24px 60px rgba(15, 28, 77, .08); }
.pdx-ph { display: flex; gap: 16px; align-items: flex-start; }
.pdx-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #ff5a61, #d0222b); }
.pdx-ic svg { width: 24px; height: 24px; }
.pdx-ph h3 { font-size: clamp(19px, 1.35vw, 23px); font-weight: 800; line-height: 1.25; color: var(--head); }
.pdx-ph p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mut); }
/* the week */
.pdx-wk { --lab: 124px; --tn: 0; position: relative; margin-top: 24px; padding: 14px 18px 16px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); }
.pdx-wk-top, .pdx-lane { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; }
.pdx-host { font-size: 12px; color: var(--mut); white-space: nowrap; }
.pdx-host code, .pdx-w code { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--code); }
.pdx-days { position: relative; height: 18px; }
.pdx-days i { position: absolute; top: 0; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); translate: 4px 0; }
.pdx-ln { font-size: 12px; font-weight: 800; color: var(--head); }
.pdx-sc .pdx-ln { font-weight: 600; color: var(--mut); }
.pdx-track { position: relative; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 13.793% 100%; }
.pdx-tr .pdx-track { height: 186px; margin-top: 8px; }
.pdx-sc .pdx-track { height: 46px; border-top: 1px dashed var(--line); }
.pdx-x { position: absolute; left: 0; right: 0; top: calc(var(--r) * 62px + 6px); height: 54px; --w: 0%; }
.pdx-bar { position: absolute; left: var(--a); width: var(--w); top: 22px; height: 8px; border-radius: 4px; background: var(--bar); box-shadow: 0 0 12px color-mix(in srgb, var(--bar) 45%, transparent); }
.pdx-x.done .pdx-bar { background: color-mix(in srgb, var(--bar) 55%, var(--mut)); box-shadow: none; }
.pdx-tag { position: absolute; left: var(--a); top: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; opacity: 0; translate: 0 4px; transition: opacity .35s, translate .35s; }
.pdx-x.on .pdx-tag { opacity: 1; translate: 0 0; }
.pdx-tag b { font: 700 12px "JetBrains Mono", Consolas, monospace; color: var(--head); }
.pdx-tag em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--bar); }
.pdx-tag small { font-size: 11.5px; color: var(--mut); }
.pdx-end { position: absolute; left: calc(var(--b) + 8px); top: 17px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ok); opacity: 0; transition: opacity .35s; }
.pdx-end svg { width: 14px; height: 14px; }
.pdx-x.done .pdx-end { opacity: 1; }
.pdx-x.open .pdx-end { left: auto; right: 12px; top: 34px; color: var(--bar); }
.pdx-x.open.on .pdx-end { opacity: 1; }
.pdx-scan { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--mut); opacity: .35; transition: opacity .35s, color .35s; white-space: nowrap; }
.pdx-scan:last-child { padding: 0 8px 0 0; translate: -100% 0; flex-direction: row-reverse; }
.pdx-scan i { position: absolute; left: 0; top: -200px; bottom: 6px; width: 0; border-left: 1.5px dashed var(--scan); opacity: .0; transition: opacity .35s; }
.pdx-scan:last-child i { left: auto; right: 0; }
.pdx-scan.on { opacity: 1; color: var(--scan); }
.pdx-scan.on i { opacity: .55; }
.pdx-cur { position: absolute; top: 34px; bottom: 12px; left: calc(18px + var(--lab) + (100% - 36px - var(--lab)) * var(--tn)); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--head); opacity: .5; pointer-events: none; }
.pdx-cur::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--head); }
.pdx.still .pdx-cur, .pdx-wk.reset .pdx-tag, .pdx-wk.reset .pdx-end { transition: none; }
.pdx.still .pdx-cur { display: none; }
.pdx-note { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; font-weight: 600; opacity: .45; transition: opacity .5s; }
.pdx-note.on { opacity: 1; }
.pdx-note span { display: inline-flex; align-items: center; gap: 8px; }
.pdx-note span::before { content: ""; width: 14px; height: 4px; border-radius: 2px; }
.pdx-note-a { color: var(--head); } .pdx-note-a::before { background: var(--bar); }
.pdx-note-b { color: var(--mut); } .pdx-note-b::before { background: var(--scan); }
/* identity activity */
.pdx-id { margin-top: 24px; padding: 12px 14px 8px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); }
.pdx-id-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.pdx-live { display: inline-flex; align-items: center; gap: 7px; }
.pdx-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; animation: pdx-live 2s ease-out infinite; }
@keyframes pdx-live { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); } 100% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); } }
.pdx.still .pdx-live i { animation: none; }
.pdx-rows { display: grid; align-content: start; overflow: hidden; overflow-anchor: none; }
.pdx-rw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1), opacity .55s; }
.pdx-rw.shut { grid-template-rows: 0fr; opacity: 0; }
.pdx-rw > .pdx-r { overflow: hidden; min-height: 0; }
.pdx-r { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 6px; padding: 10px 12px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background 1.2s, box-shadow 1.2s; }
.pdx.lt .pdx-r { background: #fff; }
.pdx-rw.shut > .pdx-r { margin-bottom: 0; padding-block: 0; }
.pdx-rw.fresh > .pdx-r { background: color-mix(in srgb, var(--bar) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 40%, transparent); }
.pdx-t { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--mut); }
.pdx-w { min-width: 0; }
.pdx-w b { display: block; font-size: 14px; font-weight: 700; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdx-w > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdx-k { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.k-new { --c: #5ea8ff; } .k-priv { --c: #ff6b72; } .k-beh { --c: #f2b634; } .k-weak { --c: #b28cff; } .k-svc { --c: #42d4d0; }
.pdx.lt .k-new { --c: #2f6fd8; } .pdx.lt .k-priv { --c: #d62c35; } .pdx.lt .k-beh { --c: #a86f00; } .pdx.lt .k-weak { --c: #7a4fd6; } .pdx.lt .k-svc { --c: #0f8f8b; }
/* what each half covers (the live site's five items, plus one) */
.pdx-f { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pdx-f li { padding-top: 14px; border-top: 2px solid var(--card-line); }
.pdx-f b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); }
.pdx-f span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--mut); }
@media (max-width: 1180px) { .pdx-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pdx-f { grid-template-columns: 1fr; } .pdx-wk { --lab: 84px; } .pdx-tag small { display: none; } }
/* ---- dash (default): numbers, 30-day heatmap, identity table, four cards ---- */
.pdd { --c0: rgba(255, 255, 255, .06); --c1: rgba(255, 90, 97, .3); --c2: rgba(255, 90, 97, .62); --c3: #ff4d57; --tile: rgba(255, 255, 255, .08); --kpi-ic: rgba(143, 176, 255, .14); }
.pdd.lt { --c0: #eceff6; --c1: #f8d2d5; --c2: #ee8990; --c3: #d9242d; --tile: #eef2fa; --kpi-ic: #eaf0fb; }
.pdd-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; }
.pdd .pdx-head { margin-bottom: clamp(36px, 3vw, 52px); }
.pdd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.3vw, 22px); margin-bottom: clamp(14px, 1.3vw, 22px); }
.pdd-kpi { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.pdd.lt .pdd-kpi, .pdd.lt .pdd-cards li { box-shadow: inset 0 0 0 1px var(--card-line), 0 14px 34px rgba(15, 28, 77, .06); }
.pdd-ki { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--scan); background: var(--kpi-ic); }
.pdd-ki.r { color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); }
.pdd-ki svg { width: 24px; height: 24px; }
.pdd-kpi b { display: block; font-size: clamp(26px, 2vw, 32px); font-weight: 900; line-height: 1.05; color: var(--head); font-variant-numeric: tabular-nums; }
.pdd-kpi div > span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink); }
.pdd-kpi small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); }
.pdd-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(14px, 1.3vw, 22px); }
.pdd-when { margin-left: auto; flex: none; align-self: center; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--mut); box-shadow: inset 0 0 0 1px var(--card-line); }
/* heatmap */
.pdd-hm { --app: 210px; --st: 124px; position: relative; margin-top: 20px; padding: 4px 16px 14px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); }
.pdd-hh, .pdd-r { display: grid; grid-template-columns: var(--app) 1fr var(--st); gap: 14px; align-items: center; }
.pdd-hh { padding: 12px 0 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pdd-ax { position: relative; height: 16px; }
.pdd-ax i { position: absolute; left: calc(var(--i) / var(--n) * 100%); top: 0; font-style: normal; white-space: nowrap; letter-spacing: .04em; }
.pdd-ax .pdd-today { left: calc((var(--i) + .5) / var(--n) * 100%); top: -3px; translate: -85% 0; padding: 2px 7px; border-radius: 5px; background: var(--head); letter-spacing: .04em; }
.pdd.lt .pdd-ax .pdd-today { color: #fff; }
.pdd:not(.lt) .pdd-ax .pdd-today { color: #0f1c4d; }
.pdd-hm::after { content: ""; position: absolute; top: 40px; bottom: 52px; left: calc(16px + var(--app) + 14px + (100% - 32px - var(--app) - var(--st) - 28px) * 29.5 / 30); width: 2px; margin-left: -1px; background: var(--head); opacity: .55; pointer-events: none; }
.pdd-r { padding: 13px 0; border-bottom: 1px solid var(--line); }
.pdd-app { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pdd-m { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--head); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.pdd-app b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--head); white-space: nowrap; }
.pdd-app em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--bar); }
.pdd-app small { display: block; margin-top: 2px; font: 500 11.5px "JetBrains Mono", Consolas, monospace; color: var(--mut); white-space: nowrap; }
.pdd-cells { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; }
.pdd-cells i { height: 28px; border-radius: 3px; display: grid; place-items: center; transition: opacity .3s calc(var(--i) * 45ms), transform .3s calc(var(--i) * 45ms); }
.pdd:not(.go) .pdd-cells i { opacity: 0; transform: scaleY(.4); }
.pdd .c0 { background: var(--c0); } .pdd .c1 { background: var(--c1); } .pdd .c2 { background: var(--c2); } .pdd .c3 { background: var(--c3); }
.pdd .fx { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--ok); }
.pdd .fx svg { width: 13px; height: 13px; stroke-width: 2.4; }
.pdd-st { font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: opacity .4s 1.5s; }
.pdd:not(.go) .pdd-st { opacity: 0; }
.pdd-st.ok { color: var(--ok); } .pdd-st.open { color: var(--bar); }
.pdd-lg { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; font-size: 12.5px; color: var(--mut); }
.pdd-lg span { display: inline-flex; align-items: center; gap: 7px; }
.pdd-lg i { width: 13px; height: 13px; border-radius: 3px; display: grid; place-items: center; }
.pdd-lg i svg { width: 10px; height: 10px; }
/* identity table */
.pdd-it { margin-top: 20px; padding: 0 12px 6px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); }
.pdd-ih, .pdd-ir { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pdd-ih { padding: 13px 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pdd-rows { display: grid; align-content: start; overflow: hidden; overflow-anchor: none; }
.pdd-rw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1), opacity .55s; }
.pdd-rw.shut { grid-template-rows: 0fr; opacity: 0; }
.pdd-rw > .pdd-ir { overflow: hidden; min-height: 0; }
.pdd-ir { padding: 11px 8px; border-bottom: 1px solid var(--line); transition: background 1.2s; }
.pdd-rw.shut > .pdd-ir { padding-block: 0; border-bottom-width: 0; }
.pdd-rw.fresh > .pdd-ir { background: color-mix(in srgb, var(--bar) 10%, transparent); }
.pdd-t { font: 600 12px "JetBrains Mono", Consolas, monospace; color: var(--mut); }
.pdd-e { min-width: 0; }
.pdd-e b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdd-e > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdd-e code { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--code); }
.pdd-k { padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
/* the four cards */
.pdd-cards { list-style: none; margin: clamp(14px, 1.3vw, 22px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.3vw, 22px); }
.pdd-cards li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.pdd-cards li > span { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); }
.pdd-cards svg { width: 24px; height: 24px; }
.pdd-cards b { display: block; font-size: 16px; font-weight: 800; color: var(--head); }
.pdd-cards small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--mut); }
@media (max-width: 1700px) { .pdd-ax i.o { display: none; } }
@media (max-width: 1360px) { .pdd-grid { grid-template-columns: 1fr; } .pdd-kpis, .pdd-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .pdd-kpis, .pdd-cards { grid-template-columns: 1fr; } .pdd-hm { --app: 120px; --st: 70px; } .pdd-app small, .pdd-m { display: none; } }
/* ---------- Neutralize Threats in Real Time (?engines=pair|flip|off) ----------
   Six engine cards and four outcomes, over the corridor picture (dark or light).
   It replaces the Yardstick, the proof strip and the old Neutralize section. */
.ntx { --head: #fff; --ink: #dce4ff; --mut: #a9b6df; --card: linear-gradient(180deg, rgba(22, 44, 110, .62), rgba(7, 20, 58, .72)); --card-line: rgba(143, 176, 255, .24);
  --item: #eef2ff; --item-d: #9fadd6; --wire: #27427f; --wire-lit: #ff5a61; --panel: rgba(6, 18, 52, .78); --panel-line: rgba(143, 176, 255, .26);
  --row: rgba(255, 255, 255, .04); --row-line: rgba(143, 176, 255, .14); --chip: rgba(255, 255, 255, .07); --chip-ink: #c8d3f5; --code: #93a3d3;
  position: relative; overflow: hidden; padding: clamp(80px, 7vw, 120px) 0 clamp(70px, 6vw, 104px); color: var(--ink);
  isolation: isolate; background: #01193c; box-shadow: inset 0 1px 0 rgba(143, 176, 255, .1); }
/* the corridor sits at the foot of the section, its top edge faded into the plain colour above */
.ntx::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, 1600px); aspect-ratio: 1916 / 821; translate: -50% 0; background: url("engines-bg-dark.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); }
.ntx.lt::before { background-image: linear-gradient(180deg, rgba(246, 249, 253, .5), rgba(246, 249, 253, .15)), url("engines-bg-light.webp"); }
.ntx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #4d5a82; --card: rgba(255, 255, 255, .9); --card-line: #d6e0f1;
  --item: #16204a; --item-d: #5c6789; --wire: #b7c7e3; --wire-lit: #e0343c; --panel: rgba(255, 255, 255, .94); --panel-line: #d6e0f1;
  --row: #f7f9fd; --row-line: #e3e9f4; --chip: #eef2fa; --chip-ink: #3a4670; --code: #66719a;
  background: linear-gradient(180deg, #e2edf8, #d4e6f5); box-shadow: inset 0 1px 0 #d0deee; }
/* paired with the Screens (same tone), the surface changes instead: the corridor, a cooler colour, a hairline */
.ntx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; position: relative; }
.ntx-head { text-align: center; margin-bottom: clamp(70px, 5.4vw, 92px); }
.ntx-kick { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--mut); }
.ntx-kick i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
.ntx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); }
.ntx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); }
.ntx-head > p:last-child { max-width: 780px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mut); }
/* the six engines */
.ntx-eng { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.1vw, 20px); }
.ntx-c { position: relative; padding: 50px clamp(14px, 1.1vw, 20px) 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line), inset 0 3px 0 var(--red);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ntx.lt .ntx-c { box-shadow: inset 0 0 0 1px var(--card-line), inset 0 3px 0 var(--red), 0 18px 40px rgba(15, 28, 77, .1); }
.ntx-hex { position: absolute; left: 50%; top: -34px; translate: -50% 0; width: 62px; height: 70px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #ff5a61, #d0222b); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ntx-c::before { content: ""; position: absolute; left: 50%; top: -38px; translate: -50% 0; width: 76px; height: 78px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 80, .38), transparent); pointer-events: none; opacity: .7; }
.ntx.lt .ntx-c::before { opacity: .35; }
.ntx-hex svg { width: 28px; height: 28px; }
.ntx-c h3 { font-size: clamp(15.5px, 1.05vw, 18px); font-weight: 800; line-height: 1.22; text-align: center; color: var(--head); text-wrap: balance; min-height: 2.44em; }
.ntx-cd { margin: 8px 0 16px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--mut); text-wrap: balance; min-height: 2.9em; }
.ntx-c ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--card-line); display: grid; gap: 4px; }
.ntx-c li { position: relative; padding: 6px 8px 6px 22px; }
.ntx-c li::before { content: ""; position: absolute; left: 7px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ntx-c li b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--item); }
.ntx-c li span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--item-d); }
/* the four outcomes */
.ntx-ben { list-style: none; margin: clamp(34px, 2.6vw, 46px) auto 0; padding: 34px 0 0; width: 100%; padding-inline: clamp(0px, 2vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--card-line); }
.ntx-ben li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; }
.ntx-ben li > span { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--head); box-shadow: inset 0 0 0 1px var(--card-line); }
.ntx-ben svg { width: 27px; height: 27px; }
.ntx-ben b { font-size: 15.5px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; color: var(--head); align-self: end; }
.ntx-ben small { margin-top: 2px; font-size: 16.5px; color: var(--mut); align-self: start; }
/* the section after a light Engines takes the dark tone (the Predict section, drawn navy) */
.sec.lav.ntx-dk { background: radial-gradient(70% 60% at 50% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #0f1c4d, #152560); }
.ntx-dk .hx { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .24); }
@media (max-width: 1360px) { .ntx-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; width: min(920px, 100%); } }
@media (max-width: 1180px) {
  .ntx-eng { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .ntx-ben { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ntx-eng { grid-template-columns: 1fr; }
  .ntx-c h3, .ntx-cd { min-height: 0; }
  .ntx-ben { grid-template-columns: 1fr; }
}

}

/* Narrow-screen adaptation: keep the same presentation, with a scrollable heatmap. */
.tr main {
  .pdx-p { min-width: 0; }
  .pdd-hm-scroll { overflow-x: auto; margin-top: 20px; border-radius: 12px; }
  .pdd-hm-scroll:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
  .pdd-hm-scroll .pdd-hm { margin-top: 0; }
  @media (max-width: 760px) {
    .pdx-ph { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .pdx-ph > div { min-width: 0; }
    .pdd-when { grid-column: 2; margin-left: 0; justify-self: start; }
    .pdd-hm-scroll .pdd-hm { min-width: 660px; --app: 180px; --st: 114px; }
    .pdd-hm-scroll .pdd-app small { display: block; }
    .pdd-ir { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; }
    .pdd-ir .pdd-k { grid-column: 2; justify-self: start; }
    .pdd-e b, .pdd-e > span { white-space: normal; overflow-wrap: anywhere; }
    .ntx-ben b { white-space: normal; }
  }
}