Spaces:

Asmitha-28
/

ptis

Running

App Files Files Community

Asmitha-28 commited on Jul 7

Commit

ee0642e

verified ·

1 Parent(s): 4aae0d9

Add interactive PTIS walkthrough

Browse files

Files changed (3) hide show

clear.css +1725 -1446
clear.js +395 -272
index.html +144 -101

clear.css CHANGED Viewed

@@ -1,1446 +1,1725 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap");
-:root {
-  color-scheme: light;
-  --bg: #f8fbff;
-  --panel: #ffffff;
-  --ink: #0f172a;
-  --muted: #3f4d63;
-  --soft: #eef5ff;
-  --line: #d8e5f5;
-  --line-strong: #c8d8ee;
-  --blue: #185cf5;
-  --blue-2: #2d7bff;
-  --green: #19b65a;
-  --violet: #6d35ff;
-  --shadow: 0 24px 70px rgba(22, 65, 148, .14);
-  --shadow-soft: 0 14px 34px rgba(22, 65, 148, .09);
-}
-* { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-body {
-  margin: 0;
-  background:
-    radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .06), transparent 34%),
-    radial-gradient(circle at 78% 18%, rgba(45, 123, 255, .045), transparent 30%),
-    var(--bg);
-  color: var(--ink);
-  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  letter-spacing: 0;
-}
-a { color: inherit; text-decoration: none; }
-svg { display: block; }
-.topbar {
-  min-height: 88px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 18px clamp(28px, 4vw, 54px);
-  border-bottom: 1px solid var(--line);
-  background: rgba(248, 251, 255, .88);
-  backdrop-filter: blur(16px);
-}
-.brand {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 77px;
-  min-height: 48px;
-  padding: 10px 13px;
-  border: 1px solid var(--line-strong);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, .74);
-  color: var(--blue);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1;
-}
-nav {
-  display: flex;
-  align-items: center;
-  gap: clamp(18px, 2.6vw, 44px);
-  font-weight: 850;
-}
-nav a {
-  color: #111b31;
-  font-size: 16px;
-  white-space: nowrap;
-}
-.dashboard-link {
-  min-height: 48px;
-  display: inline-flex;
-  align-items: center;
-  gap: 11px;
-  padding: 0 22px;
-  border-radius: 9px;
-  background: var(--blue);
-  color: #ffffff;
-  box-shadow: 0 12px 28px rgba(24, 92, 245, .24);
-}
-.dashboard-link svg {
-  width: 18px;
-  height: 18px;
-  stroke: currentColor;
-  stroke-width: 2.4;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-main {
-  width: 100%;
-  margin: 0;
-  padding: 28px clamp(20px, 3vw, 54px) 56px;
-}
-.hero {
-  display: grid;
-  grid-template-columns: minmax(430px, .68fr) minmax(620px, 1.05fr);
-  gap: clamp(44px, 5vw, 74px);
-  align-items: center;
-  min-height: 770px;
-}
-.hero-copy {
-  max-width: 560px;
-}
-.eyebrow {
-  position: relative;
-  margin: 0 0 28px;
-  color: var(--blue);
-  font-size: 14px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
-.hero-copy > .eyebrow::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -12px;
-  width: 184px;
-  height: 1px;
-  background: linear-gradient(90deg, var(--blue) 0 34px, #cfddf0 34px 100%);
-}
-h1, h2, h3, p { margin-top: 0; }
-h1 {
-  margin: 0 0 24px;
-  max-width: 560px;
-  color: var(--ink);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: clamp(52px, 4.65vw, 72px);
-  line-height: 1.08;
-  font-weight: 900;
-  letter-spacing: 0;
-}
-.accent-text { color: var(--blue); }
-.lead {
-  max-width: 610px;
-  margin: 0 0 40px;
-  color: var(--muted);
-  font-size: clamp(17px, 1.25vw, 20px);
-  line-height: 1.45;
-  font-weight: 550;
-}
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px;
-  margin-bottom: 36px;
-}
-.primary-action,
-.secondary-action {
-  min-height: 60px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 0 28px;
-  border-radius: 999px;
-  font-size: 16px;
-  font-weight: 900;
-}
-.primary-action {
-  background: linear-gradient(135deg, #0d55ff, #2d7bff);
-  color: #ffffff;
-  box-shadow: 0 18px 36px rgba(24, 92, 245, .27);
-}
-.secondary-action {
-  border: 1px solid var(--line-strong);
-  background: rgba(255, 255, 255, .72);
-  color: #111827;
-}
-.primary-action svg,
-.secondary-action svg {
-  width: 21px;
-  height: 21px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.4;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.primary-action svg { fill: currentColor; stroke: none; }
-.proof-ribbon {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 14px;
-}
-.proof-ribbon span {
-  min-height: 50px;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 17px;
-  border: 1px solid var(--line-strong);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, .66);
-  color: #243247;
-  font-size: 14px;
-  font-weight: 750;
-  box-shadow: var(--shadow-soft);
-}
-.proof-ribbon svg {
-  width: 24px;
-  height: 24px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.proof-ribbon span:nth-child(1) svg { color: var(--green); }
-.proof-ribbon span:nth-child(2) svg { color: var(--blue); }
-.proof-ribbon span:nth-child(3) svg { color: var(--violet); }
-.route-stage {
-  min-width: 0;
-  padding: 28px 14px 14px;
-  border: 1px solid var(--line-strong);
-  border-radius: 20px;
-  background: rgba(255, 255, 255, .58);
-  box-shadow: var(--shadow);
-}
-.route-card-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 0 18px 22px;
-}
-.route-card-head h2 {
-  margin: 0 0 12px;
-  color: var(--ink);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: 25px;
-  line-height: 1.05;
-  font-weight: 900;
-}
-.route-path {
-  display: flex;
-  align-items: center;
-  gap: 17px;
-  color: #111827;
-  font-size: 16px;
-}
-.route-path strong { font-weight: 900; }
-.solid-dot {
-  width: 13px;
-  height: 13px;
-  border-radius: 999px;
-  background: #0f172a;
-}
-.ring-dot {
-  width: 17px;
-  height: 17px;
-  border: 4px solid var(--blue);
-  border-radius: 999px;
-  background: #ffffff;
-}
-.arrow {
-  color: #64748b;
-  font-size: 24px;
-  font-weight: 800;
-}
-.distance-pill {
-  flex: 0 0 auto;
-  min-height: 40px;
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  padding: 0 15px;
-  border: 1px solid #b9cdf2;
-  border-radius: 999px;
-  background: #f2f7ff;
-  color: var(--blue);
-  font-size: 15px;
-  font-weight: 900;
-  white-space: nowrap;
-}
-.distance-pill svg {
-  width: 19px;
-  height: 19px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.3;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.map-frame {
-  position: relative;
-  height: 635px;
-  overflow: hidden;
-  border: 1px solid var(--line-strong);
-  border-radius: 14px;
-  background: #eef5fb;
-}
-.map,
-.fallback-map {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.map {
-  z-index: 1;
-  opacity: 0;
-  transition: opacity .2s ease;
-}
-.map-ready .map { opacity: 1; }
-.fallback-map {
-  z-index: 0;
-  background:
-    linear-gradient(rgba(24, 92, 245, .045) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(24, 92, 245, .04) 1px, transparent 1px),
-    #eef5fb;
-  background-size: 48px 48px;
-}
-.map-ready .fallback-map { display: none; }
-.fallback-route-shadow {
-  fill: none;
-  stroke: rgba(15, 23, 42, .18);
-  stroke-width: 13;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.fallback-route-line {
-  fill: none;
-  stroke: var(--blue);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.fallback-node {
-  fill: #0f172a;
-  stroke: #ffffff;
-  stroke-width: 5;
-}
-.fallback-node.active,
-.fallback-node.target { fill: var(--blue); }
-.fallback-label {
-  fill: #111827;
-  paint-order: stroke;
-  stroke: #ffffff;
-  stroke-width: 5px;
-  font-size: 13px;
-  font-weight: 900;
-}
-.decision-card {
-  position: absolute;
-  left: 18px;
-  bottom: 18px;
-  z-index: 4;
-  width: 318px;
-  padding: 17px 18px 16px;
-  border: 1px solid var(--line);
-  border-radius: 15px;
-  background: rgba(255, 255, 255, .94);
-  box-shadow: 0 18px 42px rgba(22, 65, 148, .14);
-  backdrop-filter: blur(10px);
-}
-.decision-card span {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
-.belief-line {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  min-width: 0;
-}
-.belief-line strong {
-  color: var(--blue);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: 38px;
-  line-height: .95;
-  font-weight: 900;
-}
-.belief-line b {
-  min-width: 0;
-  color: var(--ink);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: 27px;
-  line-height: 1;
-  font-weight: 900;
-}
-.belief-track {
-  height: 9px;
-  margin: 10px 0 11px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: #e5eaf2;
-}
-.belief-track i {
-  display: block;
-  width: 0;
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #185cf5, #2d7bff);
-}
-.decision-card p {
-  margin: 0;
-  color: #344258;
-  font-size: 12.5px;
-  line-height: 1.42;
-  font-weight: 550;
-}
-.maplibregl-ctrl-attrib {
-  color: #0f172a;
-  font-size: 11px;
-}
-.maplibregl-ctrl-bottom-right {
-  right: 11px;
-  bottom: 9px;
-}
-.metric-strip {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0;
-  margin: 0 0 64px;
-  padding: 25px 34px;
-  border: 1px solid var(--line-strong);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, .72);
-  box-shadow: var(--shadow-soft);
-}
-.metric-strip article {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  min-width: 0;
-  padding: 0 30px;
-  border-right: 1px solid var(--line);
-}
-.metric-strip article:first-child { padding-left: 0; }
-.metric-strip article:last-child { border-right: 0; padding-right: 0; }
-.metric-icon {
-  flex: 0 0 auto;
-  width: 64px;
-  height: 64px;
-  display: grid;
-  place-items: center;
-  border: 1px solid #bdd0f4;
-  border-radius: 16px;
-  background: #eef5ff;
-  color: var(--blue);
-}
-.metric-icon svg {
-  width: 34px;
-  height: 34px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.3;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.metric-icon.check {
-  background: var(--blue);
-  color: #ffffff;
-}
-.metric-strip span {
-  display: block;
-  margin-bottom: 7px;
-  color: #43516a;
-  font-size: 13px;
-  font-weight: 750;
-}
-.metric-strip strong {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--ink);
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1;
-}
-.metric-strip p {
-  margin: 0;
-  color: #344258;
-  font-size: 13px;
-}
-.section {
-  padding: 48px 0;
-  border-top: 1px solid var(--line);
-}
-.section-title {
-  max-width: 760px;
-  margin-bottom: 18px;
-}
-.section-title.compact { max-width: 720px; }
-.section-title h2,
-.boundary-card h2 {
-  margin: 0;
-  color: var(--ink);
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: clamp(28px, 3vw, 42px);
-  line-height: 1.08;
-  font-weight: 900;
-}
-.decision-flow,
-.proof-grid,
-.boundary-columns {
-  display: grid;
-  gap: 14px;
-}
-.decision-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.proof-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-.boundary-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
-.decision-flow article,
-.proof-grid article,
-.boundary-columns article,
-.boundary-card {
-  border: 1px solid var(--line-strong);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, .72);
-  box-shadow: var(--shadow-soft);
-}
-.decision-flow article { min-height: 172px; padding: 20px; }
-.proof-grid article { min-height: 148px; padding: 17px; }
-.boundary-card { padding: 28px; }
-.boundary-columns article { padding: 18px; box-shadow: none; }
-.decision-flow article > span {
-  width: 36px;
-  height: 36px;
-  display: grid;
-  place-items: center;
-  margin-bottom: 18px;
-  border-radius: 999px;
-  background: #eef5ff;
-  color: var(--blue);
-  font-weight: 900;
-}
-.decision-flow h3,
-.boundary-columns h3 {
-  margin: 0 0 8px;
-  color: var(--ink);
-  font-size: 19px;
-  font-weight: 900;
-}
-.decision-flow p,
-.boundary-columns p,
-.proof-grid p {
-  margin: 0;
-  color: #4b5b72;
-  line-height: 1.48;
-}
-.proof-grid span {
-  display: block;
-  min-height: 30px;
-  color: #4b5b72;
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
-.proof-grid strong {
-  display: block;
-  margin: 11px 0 9px;
-  color: var(--blue);
-  font-size: clamp(23px, 2.1vw, 34px);
-  line-height: .98;
-  font-weight: 900;
-  overflow-wrap: anywhere;
-}
-.proof-grid p { font-size: 13px; }
-.boundary-card .eyebrow { color: var(--blue); }
-.boundary-columns article:first-child h3 { color: #0f9f59; }
-.boundary-columns article:last-child h3 { color: #b7791f; }
-@media (max-width: 1260px) {
-  .hero { grid-template-columns: 1fr; min-height: auto; }
-  .hero-copy { max-width: 820px; }
-  h1 { max-width: 840px; }
-  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
-  .metric-strip article:nth-child(2) { border-right: 0; }
-  .metric-strip article:nth-child(3) { padding-left: 0; }
-}
-@media (max-width: 1100px) {
-  h1 {
-    max-width: 100%;
-    font-size: clamp(36px, 5.5vw, 46px);
-  }
-  .lead { font-size: 16px; }
-  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-@media (max-width: 820px) {
-  .topbar { align-items: flex-start; flex-direction: column; padding: 16px; }
-  nav { gap: 10px; flex-wrap: wrap; }
-  nav a { font-size: 13px; }
-  .dashboard-link { min-height: 42px; padding: 0 14px; }
-  main { padding: 18px 12px 42px; }
-  .hero { gap: 28px; }
-  h1 { font-size: clamp(34px, 9vw, 44px); }
-  .lead { font-size: 16px; }
-  .hero-actions { gap: 10px; }
-  .primary-action,
-  .secondary-action { width: 100%; min-height: 52px; }
-  .route-card-head { flex-direction: column; }
-  .map-frame { height: 520px; }
-  .decision-card { left: 10px; right: 10px; bottom: 10px; width: auto; }
-  .belief-line strong { font-size: 36px; }
-  .belief-line b { font-size: 25px; }
-  .metric-strip,
-  .decision-flow,
-  .proof-grid,
-  .boundary-columns { grid-template-columns: 1fr; }
-  .metric-strip article { border-right: 0; padding: 0; }
-}
-/* Exact clean flow and proof card polish */
-.decision-section {
-  position: relative;
-  padding-top: 52px;
-  padding-bottom: 52px;
-}
-.decision-section::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 1px;
-  background: var(--line);
-}
-.decision-section .section-title {
-  max-width: 560px;
-  margin-bottom: 18px;
-}
-.flow-card {
-  position: relative;
-  min-height: 186px;
-  padding: 25px 26px 24px;
-  overflow: hidden;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, .84);
-}
-.flow-card::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 4px;
-  background: var(--blue);
-}
-.flow-card.eliminate::before { background: #10aaa1; }
-.flow-card.gate::before { background: #20ad54; }
-.step-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 18px;
-}
-.step-number {
-  width: 36px;
-  height: 36px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #185cf5, #2d7bff);
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 900;
-  box-shadow: 0 12px 24px rgba(24, 92, 245, .2);
-}
-.eliminate .step-number { background: linear-gradient(135deg, #089b95, #17beb5); box-shadow: 0 12px 24px rgba(16, 170, 161, .18); }
-.gate .step-number { background: linear-gradient(135deg, #16a34a, #23c365); box-shadow: 0 12px 24px rgba(32, 173, 84, .18); }
-.flow-icon {
-  width: 62px;
-  height: 62px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: #ecf3ff;
-  color: var(--blue);
-}
-.eliminate .flow-icon { background: #e8f8f7; color: #0f9f98; }
-.gate .flow-icon { background: #eaf8ef; color: #16a34a; }
-.flow-icon svg {
-  width: 31px;
-  height: 31px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.flow-card h3 {
-  margin-bottom: 9px;
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: 22px;
-  line-height: 1.05;
-}
-.flow-card p {
-  max-width: 340px;
-  color: #3f4d63;
-  font-size: 14.5px;
-  line-height: 1.45;
-}
-.proof-section {
-  padding-top: 42px;
-}
-.proof-card {
-  position: relative;
-  overflow: hidden;
-  min-height: 176px;
-  padding: 20px 16px 18px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, .86);
-}
-.proof-card::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto;
-  height: 4px;
-  background: var(--blue);
-}
-.proof-card::after {
-  content: "";
-  position: absolute;
-  right: -34px;
-  bottom: -42px;
-  width: 190px;
-  height: 120px;
-  opacity: .45;
-  background:
-    radial-gradient(circle at center, currentColor 1px, transparent 1.6px);
-  background-size: 10px 10px;
-  transform: rotate(-10deg);
-}
-.proof-card.suite { color: var(--blue); }
-.proof-card.stress { color: #0891b2; }
-.proof-card.events { color: #10aaa1; }
-.proof-card.safety { color: #20ad54; }
-.proof-card.cctv { color: #2d7bff; }
-.proof-card.official { color: #df6f00; }
-.proof-card.stress::before { background: #0891b2; }
-.proof-card.events::before { background: #10aaa1; }
-.proof-card.safety::before { background: #20ad54; }
-.proof-card.cctv::before { background: #2d7bff; }
-.proof-card.official::before { background: #df6f00; }
-.proof-card > span {
-  position: relative;
-  z-index: 1;
-  max-width: calc(100% - 58px);
-  color: #46556e;
-}
-.proof-card > i {
-  position: absolute;
-  right: 14px;
-  top: 17px;
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: color-mix(in srgb, currentColor 12%, white);
-  color: currentColor;
-  font-style: normal;
-}
-.proof-card > i svg {
-  width: 28px;
-  height: 28px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.proof-card.stress > i svg path:first-child,
-.proof-card .primary-action svg { fill: currentColor; }
-.proof-card strong {
-  position: relative;
-  z-index: 1;
-  margin-top: 24px;
-  color: currentColor;
-  font-family: "Inter Tight", "Inter", sans-serif;
-  font-size: clamp(24px, 2.1vw, 34px);
-  letter-spacing: 0;
-}
-.proof-card p {
-  position: relative;
-  z-index: 1;
-  max-width: 170px;
-  color: #43516a;
-  font-size: 12.5px;
-  line-height: 1.35;
-}
-.proof-card.cctv strong,
-.proof-card.official strong {
-  font-size: clamp(22px, 1.75vw, 30px);
-}
-@media (max-width: 1100px) {
-  h1 {
-    max-width: 100%;
-    font-size: clamp(36px, 5.5vw, 46px);
-  }
-  .lead { font-size: 16px; }
-  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-@media (max-width: 820px) {
-  .flow-card { min-height: 210px; padding: 28px; }
-  .flow-icon { width: 64px; height: 64px; }
-  .proof-card { min-height: 190px; }
-}
-/* Compact scale correction */
-@media (min-width: 1261px) {
-  .topbar {
-    min-height: 76px;
-    padding-top: 14px;
-    padding-bottom: 14px;
-  }
-  main {
-    padding-top: 18px;
-  }
-  .hero {
-    grid-template-columns: minmax(390px, .62fr) minmax(620px, 1fr);
-    gap: clamp(26px, 3.1vw, 46px);
-    min-height: 650px;
-    align-items: center;
-  }
-  .hero-copy {
-    max-width: 560px;
-  }
-  .eyebrow {
-    margin-bottom: 22px;
-    font-size: 13px;
-  }
-  .hero-copy > .eyebrow::after {
-    bottom: -10px;
-    width: 142px;
-  }
-  h1 {
-    max-width: 560px;
-    margin-bottom: 18px;
-    font-size: clamp(40px, 3.35vw, 56px);
-    line-height: 1.07;
-  }
-  .lead {
-    max-width: 540px;
-    margin-bottom: 18px;
-    font-size: clamp(15px, 1.02vw, 18px);
-    line-height: 1.5;
-  }
-  .hero-actions {
-    gap: 12px;
-    margin-bottom: 18px;
-  }
-  .primary-action,
-  .secondary-action {
-    min-height: 50px;
-    padding: 0 22px;
-    gap: 9px;
-    font-size: 14px;
-  }
-  .primary-action svg,
-  .secondary-action svg {
-    width: 18px;
-    height: 18px;
-  }
-  .proof-ribbon {
-    gap: 9px;
-  }
-  .proof-ribbon span {
-    min-height: 40px;
-    padding: 0 13px;
-    gap: 8px;
-    font-size: 12px;
-  }
-  .proof-ribbon svg {
-    width: 20px;
-    height: 20px;
-  }
-  .route-stage {
-    padding: 22px 12px 12px;
-    border-radius: 17px;
-  }
-  .route-card-head {
-    padding: 0 14px 16px;
-  }
-  .route-card-head h2 {
-    margin-bottom: 9px;
-    font-size: 22px;
-  }
-  .route-path {
-    gap: 12px;
-    font-size: 16px;
-  }
-  .distance-pill {
-    min-height: 34px;
-    padding: 0 12px;
-    font-size: 13px;
-  }
-  .map-frame {
-    height: clamp(430px, 48vh, 540px);
-  }
-  .decision-card {
-    width: 300px;
-    padding: 15px 16px 14px;
-  }
-  .decision-card span {
-    margin-bottom: 8px;
-    font-size: 11px;
-  }
-  .belief-line strong {
-    font-size: 36px;
-  }
-  .belief-line b {
-    font-size: 25px;
-  }
-  .belief-track {
-    height: 11px;
-    margin: 11px 0 12px;
-  }
-  .decision-card p {
-    font-size: 13px;
-    line-height: 1.42;
-  }
-  .metric-strip {
-    margin-bottom: 48px;
-    padding: 20px 26px;
-  }
-  .metric-strip article {
-    gap: 14px;
-    padding: 0 22px;
-  }
-  .metric-icon {
-    width: 54px;
-    height: 54px;
-    border-radius: 14px;
-  }
-  .metric-icon svg {
-    width: 28px;
-    height: 28px;
-  }
-  .metric-strip strong {
-    font-size: 21px;
-  }
-}
-@media (min-width: 1540px) {
-  .hero {
-    min-height: 660px;
-  }
-  h1 {
-    font-size: 56px;
-  }
-  .map-frame {
-    height: 535px;
-  }
-}
-/* Final visual polish: compact evidence cards and navy-teal presentation */
-:root {
-  --bg: #f7fbff;
-  --ink: #071739;
-  --muted: #18365f;
-  --soft: #eef8fb;
-  --line: #d7e6f2;
-  --line-strong: #c3d8ea;
-  --blue: #0875b8;
-  --blue-2: #13c8bd;
-  --green: #12b76a;
-  --violet: #6d4cff;
-  --shadow: 0 22px 62px rgba(6, 70, 122, .13);
-  --shadow-soft: 0 12px 30px rgba(6, 70, 122, .08);
-}
-body {
-  background:
-    radial-gradient(circle at 16% 18%, rgba(8, 117, 184, .055), transparent 34%),
-    radial-gradient(circle at 74% 24%, rgba(19, 200, 189, .055), transparent 30%),
-    var(--bg);
-}
-.brand {
-  color: #06346f;
-}
-.dashboard-link,
-.primary-action {
-  background: linear-gradient(135deg, #0867b6 0%, #0c8db7 48%, #12c8bc 100%);
-  box-shadow: 0 14px 34px rgba(8, 117, 184, .24);
-}
-.accent-text {
-  color: transparent;
-  background: linear-gradient(90deg, #0b6ec7 0%, #12c8bc 92%);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-.secondary-action:hover,
-.primary-action:hover,
-.dashboard-link:hover {
-  transform: translateY(-1px);
-}
-.route-stage {
-  padding: 18px 12px 12px;
-  border-radius: 16px;
-}
-.route-card-head {
-  gap: 12px;
-  padding: 0 12px 13px;
-}
-.route-card-head h2 {
-  margin-bottom: 8px;
-  font-size: 19px;
-  line-height: 1.05;
-}
-.route-path {
-  gap: 10px;
-  font-size: 14px;
-}
-.solid-dot {
-  width: 10px;
-  height: 10px;
-}
-.ring-dot {
-  width: 14px;
-  height: 14px;
-  border-width: 3px;
-  border-color: var(--blue-2);
-}
-.arrow {
-  font-size: 19px;
-}
-.distance-pill {
-  min-height: 32px;
-  padding: 0 11px;
-  color: var(--blue);
-  font-size: 12.5px;
-}
-.distance-pill svg {
-  width: 16px;
-  height: 16px;
-}
-.map-frame {
-  border-radius: 13px;
-}
-.fallback-route-line {
-  stroke: var(--blue-2);
-}
-.fallback-node.active,
-.fallback-node.target {
-  fill: var(--blue-2);
-}
-.decision-card span {
-  color: #078b9f;
-}
-.belief-line strong {
-  color: #0898aa;
-}
-.belief-track i {
-  background: linear-gradient(90deg, #0875b8, #13c8bd);
-}
-.metric-strip {
-  margin-bottom: 38px;
-  padding: 18px 24px;
-}
-.metric-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--blue);
-}
-.metric-icon svg {
-  width: 25px;
-  height: 25px;
-}
-.metric-icon.check {
-  background: linear-gradient(135deg, #0875b8, #13c8bd);
-}
-.metric-strip strong {
-  font-size: 20px;
-}
-.section {
-  padding: 36px 0;
-}
-.section-title {
-  margin-bottom: 16px;
-}
-.section-title h2,
-.boundary-card h2 {
-  font-size: clamp(25px, 2.25vw, 34px);
-}
-.decision-section {
-  padding-top: 36px;
-  padding-bottom: 38px;
-}
-.decision-flow,
-.proof-grid,
-.boundary-columns {
-  gap: 12px;
-}
-.flow-card {
-  min-height: 148px;
-  padding: 18px;
-  border-radius: 12px;
-}
-.flow-card::before,
-.proof-card::before {
-  height: 3px;
-}
-.flow-card::before,
-.proof-card.suite::before,
-.proof-card.cctv::before {
-  background: #0875b8;
-}
-.flow-card.eliminate::before,
-.proof-card.stress::before,
-.proof-card.events::before {
-  background: #0798a9;
-}
-.flow-card.gate::before,
-.proof-card.safety::before {
-  background: #12a95a;
-}
-.proof-card.official::before {
-  background: #d36a00;
-}
-.step-row {
-  margin-bottom: 12px;
-}
-.step-number {
-  width: 30px;
-  height: 30px;
-  font-size: 13px;
-  background: linear-gradient(135deg, #0875b8, #13c8bd);
-  box-shadow: 0 10px 18px rgba(8, 117, 184, .18);
-}
-.eliminate .step-number {
-  background: linear-gradient(135deg, #078f9f, #13c8bd);
-}
-.gate .step-number {
-  background: linear-gradient(135deg, #0f9f53, #22c66d);
-}
-.flow-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--blue);
-}
-.flow-icon svg {
-  width: 25px;
-  height: 25px;
-}
-.flow-card h3 {
-  margin-bottom: 7px;
-  font-size: 18px;
-}
-.flow-card p {
-  font-size: 12.5px;
-  line-height: 1.42;
-}
-.proof-section {
-  padding-top: 34px;
-}
-.proof-card {
-  min-height: 142px;
-  padding: 15px 13px 14px;
-  border-radius: 11px;
-}
-.proof-card::after {
-  right: -46px;
-  bottom: -52px;
-  width: 170px;
-  height: 104px;
-  opacity: .32;
-  background-size: 9px 9px;
-}
-.proof-card.suite,
-.proof-card.cctv {
-  color: #0875b8;
-}
-.proof-card.stress,
-.proof-card.events {
-  color: #0798a9;
-}
-.proof-card.safety {
-  color: #12a95a;
-}
-.proof-card.official {
-  color: #d36a00;
-}
-.proof-card > span {
-  max-width: calc(100% - 44px);
-  min-height: 22px;
-  font-size: 9.5px;
-  line-height: 1.15;
-}
-.proof-card > i {
-  top: 13px;
-  right: 12px;
-  width: 34px;
-  height: 34px;
-}
-.proof-card > i svg {
-  width: 19px;
-  height: 19px;
-}
-.proof-card strong {
-  margin-top: 18px;
-  margin-bottom: 6px;
-  font-size: clamp(20px, 1.55vw, 28px);
-  line-height: 1;
-}
-.proof-card.cctv strong,
-.proof-card.official strong {
-  font-size: clamp(17px, 1.18vw, 22px);
-}
-.proof-card p {
-  max-width: 150px;
-  font-size: 11px;
-  line-height: 1.3;
-}
-.boundary-card {
-  padding: 22px;
-}
-@media (min-width: 1261px) {
-  .route-stage {
-    padding: 17px 11px 11px;
-  }
-  .route-card-head h2 {
-    font-size: 18px;
-  }
-  .map-frame {
-    height: clamp(410px, 45vh, 500px);
-  }
-  .decision-card {
-    width: 282px;
-  }
-  .belief-line strong {
-    font-size: 32px;
-  }
-  .belief-line b {
-    font-size: 23px;
-  }
-}
-@media (max-width: 1100px) {
-  .flow-card {
-    min-height: 150px;
-  }
-  .proof-card {
-    min-height: 140px;
-  }
-}
-@media (max-width: 820px) {
-  .route-card-head h2 {
-    font-size: 18px;
-  }
-  .route-path {
-    font-size: 13px;
-  }
-  .flow-card {
-    min-height: 142px;
-    padding: 16px;
-  }
-  .flow-icon {
-    width: 44px;
-    height: 44px;
-  }
-  .proof-card {
-    min-height: 132px;
-  }
-}
-/* Final proof-card shrink pass */
-.proof-section {
-  padding-top: 22px;
-}
-.proof-section .section-title.compact {
-  max-width: 560px;
-  margin-bottom: 12px;
-}
-.proof-section .eyebrow {
-  margin-bottom: 18px;
-  font-size: 11px;
-}
-.proof-section .section-title h2 {
-  max-width: 560px;
-  font-size: clamp(22px, 1.8vw, 30px);
-  line-height: 1.07;
-}
-.proof-grid {
-  gap: 10px;
-}
-.proof-card {
-  min-height: 118px;
-  padding: 12px 11px 11px;
-  border-radius: 10px;
-}
-.proof-card::before {
-  height: 3px;
-}
-.proof-card::after {
-  right: -52px;
-  bottom: -54px;
-  width: 136px;
-  height: 82px;
-  opacity: .26;
-  background-size: 8px 8px;
-}
-.proof-card > span {
-  min-height: 16px;
-  max-width: calc(100% - 34px);
-  font-size: 8.5px;
-  line-height: 1.1;
-}
-.proof-card > i {
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-}
-.proof-card > i svg {
-  width: 15px;
-  height: 15px;
-}
-.proof-card strong {
-  margin-top: 12px;
-  margin-bottom: 4px;
-  font-size: clamp(16px, 1.25vw, 23px);
-  line-height: 1;
-}
-.proof-card.cctv strong,
-.proof-card.official strong {
-  font-size: clamp(13px, .92vw, 17px);
-  white-space: nowrap;
-  overflow-wrap: normal;
-  word-break: normal;
-}
-.proof-card p {
-  max-width: 128px;
-  font-size: 9.5px;
-  line-height: 1.25;
-}
-@media (min-width: 1261px) {
-  .proof-card {
-    min-height: 112px;
-  }
-}
-@media (max-width: 1100px) {
-  .proof-card {
-    min-height: 124px;
-  }
-  .proof-card.cctv strong,
-  .proof-card.official strong {
-    font-size: 15px;
-  }
-}
-@media (max-width: 820px) {
-  .proof-section .section-title h2 {
-    font-size: clamp(24px, 7vw, 32px);
-  }
-  .proof-card {
-    min-height: 112px;
-  }
-}

+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap");
+:root {
+  color-scheme: light;
+  --bg: #f8fbff;
+  --panel: #ffffff;
+  --ink: #0f172a;
+  --muted: #3f4d63;
+  --soft: #eef5ff;
+  --line: #d8e5f5;
+  --line-strong: #c8d8ee;
+  --blue: #185cf5;
+  --blue-2: #2d7bff;
+  --green: #19b65a;
+  --violet: #6d35ff;
+  --shadow: 0 24px 70px rgba(22, 65, 148, .14);
+  --shadow-soft: 0 14px 34px rgba(22, 65, 148, .09);
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .06), transparent 34%),
+    radial-gradient(circle at 78% 18%, rgba(45, 123, 255, .045), transparent 30%),
+    var(--bg);
+  color: var(--ink);
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  letter-spacing: 0;
+}
+a { color: inherit; text-decoration: none; }
+svg { display: block; }
+.topbar {
+  min-height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px clamp(28px, 4vw, 54px);
+  border-bottom: 1px solid var(--line);
+  background: rgba(248, 251, 255, .88);
+  backdrop-filter: blur(16px);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 77px;
+  min-height: 48px;
+  padding: 10px 13px;
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .74);
+  color: var(--blue);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+}
+nav {
+  display: flex;
+  align-items: center;
+  gap: clamp(18px, 2.6vw, 44px);
+  font-weight: 850;
+}
+nav a {
+  color: #111b31;
+  font-size: 16px;
+  white-space: nowrap;
+}
+.dashboard-link {
+  min-height: 48px;
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  padding: 0 22px;
+  border-radius: 9px;
+  background: var(--blue);
+  color: #ffffff;
+  box-shadow: 0 12px 28px rgba(24, 92, 245, .24);
+}
+.dashboard-link svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+main {
+  width: 100%;
+  margin: 0;
+  padding: 28px clamp(20px, 3vw, 54px) 56px;
+}
+.hero {
+  display: grid;
+  grid-template-columns: minmax(430px, .68fr) minmax(620px, 1.05fr);
+  gap: clamp(44px, 5vw, 74px);
+  align-items: center;
+  min-height: 770px;
+}
+.hero-copy {
+  max-width: 560px;
+}
+.eyebrow {
+  position: relative;
+  margin: 0 0 28px;
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.hero-copy > .eyebrow::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+  width: 184px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--blue) 0 34px, #cfddf0 34px 100%);
+}
+h1, h2, h3, p { margin-top: 0; }
+h1 {
+  margin: 0 0 24px;
+  max-width: 560px;
+  color: var(--ink);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: clamp(52px, 4.65vw, 72px);
+  line-height: 1.08;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+.accent-text { color: var(--blue); }
+.lead {
+  max-width: 610px;
+  margin: 0 0 40px;
+  color: var(--muted);
+  font-size: clamp(17px, 1.25vw, 20px);
+  line-height: 1.45;
+  font-weight: 550;
+}
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  margin-bottom: 36px;
+}
+.primary-action,
+.secondary-action {
+  min-height: 60px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 28px;
+  border-radius: 999px;
+  font-size: 16px;
+  font-weight: 900;
+}
+.primary-action {
+  background: linear-gradient(135deg, #0d55ff, #2d7bff);
+  color: #ffffff;
+  box-shadow: 0 18px 36px rgba(24, 92, 245, .27);
+}
+.secondary-action {
+  border: 1px solid var(--line-strong);
+  background: rgba(255, 255, 255, .72);
+  color: #111827;
+}
+.primary-action svg,
+.secondary-action svg {
+  width: 21px;
+  height: 21px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.primary-action svg { fill: currentColor; stroke: none; }
+.proof-ribbon {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+.proof-ribbon span {
+  min-height: 50px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 17px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .66);
+  color: #243247;
+  font-size: 14px;
+  font-weight: 750;
+  box-shadow: var(--shadow-soft);
+}
+.proof-ribbon svg {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.proof-ribbon span:nth-child(1) svg { color: var(--green); }
+.proof-ribbon span:nth-child(2) svg { color: var(--blue); }
+.proof-ribbon span:nth-child(3) svg { color: var(--violet); }
+.route-stage {
+  min-width: 0;
+  padding: 28px 14px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, .58);
+  box-shadow: var(--shadow);
+}
+.route-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 0 18px 22px;
+}
+.route-card-head h2 {
+  margin: 0 0 12px;
+  color: var(--ink);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 25px;
+  line-height: 1.05;
+  font-weight: 900;
+}
+.route-path {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+  color: #111827;
+  font-size: 16px;
+}
+.route-path strong { font-weight: 900; }
+.solid-dot {
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  background: #0f172a;
+}
+.ring-dot {
+  width: 17px;
+  height: 17px;
+  border: 4px solid var(--blue);
+  border-radius: 999px;
+  background: #ffffff;
+}
+.arrow {
+  color: #64748b;
+  font-size: 24px;
+  font-weight: 800;
+}
+.distance-pill {
+  flex: 0 0 auto;
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  padding: 0 15px;
+  border: 1px solid #b9cdf2;
+  border-radius: 999px;
+  background: #f2f7ff;
+  color: var(--blue);
+  font-size: 15px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+.distance-pill svg {
+  width: 19px;
+  height: 19px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.map-frame {
+  position: relative;
+  height: 635px;
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: 14px;
+  background: #eef5fb;
+}
+.map,
+.fallback-map {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.map {
+  z-index: 1;
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+.map-ready .map { opacity: 1; }
+.fallback-map {
+  z-index: 0;
+  background:
+    linear-gradient(rgba(24, 92, 245, .045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(24, 92, 245, .04) 1px, transparent 1px),
+    #eef5fb;
+  background-size: 48px 48px;
+}
+.map-ready .fallback-map { display: none; }
+.fallback-route-shadow {
+  fill: none;
+  stroke: rgba(15, 23, 42, .18);
+  stroke-width: 13;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.fallback-route-line {
+  fill: none;
+  stroke: var(--blue);
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.fallback-node {
+  fill: #0f172a;
+  stroke: #ffffff;
+  stroke-width: 5;
+}
+.fallback-node.active,
+.fallback-node.target { fill: var(--blue); }
+.fallback-label {
+  fill: #111827;
+  paint-order: stroke;
+  stroke: #ffffff;
+  stroke-width: 5px;
+  font-size: 13px;
+  font-weight: 900;
+}
+.decision-card {
+  position: absolute;
+  left: 18px;
+  bottom: 18px;
+  z-index: 4;
+  width: 318px;
+  padding: 17px 18px 16px;
+  border: 1px solid var(--line);
+  border-radius: 15px;
+  background: rgba(255, 255, 255, .94);
+  box-shadow: 0 18px 42px rgba(22, 65, 148, .14);
+  backdrop-filter: blur(10px);
+}
+.decision-card span {
+  display: block;
+  margin-bottom: 7px;
+  color: var(--blue);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.belief-line {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+.belief-line strong {
+  color: var(--blue);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 38px;
+  line-height: .95;
+  font-weight: 900;
+}
+.belief-line b {
+  min-width: 0;
+  color: var(--ink);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 27px;
+  line-height: 1;
+  font-weight: 900;
+}
+.belief-track {
+  height: 9px;
+  margin: 10px 0 11px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e5eaf2;
+}
+.belief-track i {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #185cf5, #2d7bff);
+}
+.decision-card p {
+  margin: 0;
+  color: #344258;
+  font-size: 12.5px;
+  line-height: 1.42;
+  font-weight: 550;
+}
+.maplibregl-ctrl-attrib {
+  color: #0f172a;
+  font-size: 11px;
+}
+.maplibregl-ctrl-bottom-right {
+  right: 11px;
+  bottom: 9px;
+}
+.metric-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0;
+  margin: 0 0 64px;
+  padding: 25px 34px;
+  border: 1px solid var(--line-strong);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, .72);
+  box-shadow: var(--shadow-soft);
+}
+.metric-strip article {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  min-width: 0;
+  padding: 0 30px;
+  border-right: 1px solid var(--line);
+}
+.metric-strip article:first-child { padding-left: 0; }
+.metric-strip article:last-child { border-right: 0; padding-right: 0; }
+.metric-icon {
+  flex: 0 0 auto;
+  width: 64px;
+  height: 64px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #bdd0f4;
+  border-radius: 16px;
+  background: #eef5ff;
+  color: var(--blue);
+}
+.metric-icon svg {
+  width: 34px;
+  height: 34px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.metric-icon.check {
+  background: var(--blue);
+  color: #ffffff;
+}
+.metric-strip span {
+  display: block;
+  margin-bottom: 7px;
+  color: #43516a;
+  font-size: 13px;
+  font-weight: 750;
+}
+.metric-strip strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--ink);
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+}
+.metric-strip p {
+  margin: 0;
+  color: #344258;
+  font-size: 13px;
+}
+.section {
+  padding: 48px 0;
+  border-top: 1px solid var(--line);
+}
+.section-title {
+  max-width: 760px;
+  margin-bottom: 18px;
+}
+.section-title.compact { max-width: 720px; }
+.section-title h2,
+.boundary-card h2 {
+  margin: 0;
+  color: var(--ink);
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: clamp(28px, 3vw, 42px);
+  line-height: 1.08;
+  font-weight: 900;
+}
+.decision-flow,
+.proof-grid,
+.boundary-columns {
+  display: grid;
+  gap: 14px;
+}
+.decision-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.proof-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.boundary-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
+.decision-flow article,
+.proof-grid article,
+.boundary-columns article,
+.boundary-card {
+  border: 1px solid var(--line-strong);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, .72);
+  box-shadow: var(--shadow-soft);
+}
+.decision-flow article { min-height: 172px; padding: 20px; }
+.proof-grid article { min-height: 148px; padding: 17px; }
+.boundary-card { padding: 28px; }
+.boundary-columns article { padding: 18px; box-shadow: none; }
+.decision-flow article > span {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 18px;
+  border-radius: 999px;
+  background: #eef5ff;
+  color: var(--blue);
+  font-weight: 900;
+}
+.decision-flow h3,
+.boundary-columns h3 {
+  margin: 0 0 8px;
+  color: var(--ink);
+  font-size: 19px;
+  font-weight: 900;
+}
+.decision-flow p,
+.boundary-columns p,
+.proof-grid p {
+  margin: 0;
+  color: #4b5b72;
+  line-height: 1.48;
+}
+.proof-grid span {
+  display: block;
+  min-height: 30px;
+  color: #4b5b72;
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.proof-grid strong {
+  display: block;
+  margin: 11px 0 9px;
+  color: var(--blue);
+  font-size: clamp(23px, 2.1vw, 34px);
+  line-height: .98;
+  font-weight: 900;
+  overflow-wrap: anywhere;
+}
+.proof-grid p { font-size: 13px; }
+.boundary-card .eyebrow { color: var(--blue); }
+.boundary-columns article:first-child h3 { color: #0f9f59; }
+.boundary-columns article:last-child h3 { color: #b7791f; }
+@media (max-width: 1260px) {
+  .hero { grid-template-columns: 1fr; min-height: auto; }
+  .hero-copy { max-width: 820px; }
+  h1 { max-width: 840px; }
+  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
+  .metric-strip article:nth-child(2) { border-right: 0; }
+  .metric-strip article:nth-child(3) { padding-left: 0; }
+}
+@media (max-width: 1100px) {
+  h1 {
+    max-width: 100%;
+    font-size: clamp(36px, 5.5vw, 46px);
+  }
+  .lead { font-size: 16px; }
+  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 820px) {
+  .topbar { align-items: flex-start; flex-direction: column; padding: 16px; }
+  nav { gap: 10px; flex-wrap: wrap; }
+  nav a { font-size: 13px; }
+  .dashboard-link { min-height: 42px; padding: 0 14px; }
+  main { padding: 18px 12px 42px; }
+  .hero { gap: 28px; }
+  h1 { font-size: clamp(34px, 9vw, 44px); }
+  .lead { font-size: 16px; }
+  .hero-actions { gap: 10px; }
+  .primary-action,
+  .secondary-action { width: 100%; min-height: 52px; }
+  .route-card-head { flex-direction: column; }
+  .map-frame { height: 520px; }
+  .decision-card { left: 10px; right: 10px; bottom: 10px; width: auto; }
+  .belief-line strong { font-size: 36px; }
+  .belief-line b { font-size: 25px; }
+  .metric-strip,
+  .decision-flow,
+  .proof-grid,
+  .boundary-columns { grid-template-columns: 1fr; }
+  .metric-strip article { border-right: 0; padding: 0; }
+}
+/* Exact clean flow and proof card polish */
+.decision-section {
+  position: relative;
+  padding-top: 52px;
+  padding-bottom: 52px;
+}
+.decision-section::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: var(--line);
+}
+.decision-section .section-title {
+  max-width: 560px;
+  margin-bottom: 18px;
+}
+.flow-card {
+  position: relative;
+  min-height: 186px;
+  padding: 25px 26px 24px;
+  overflow: hidden;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, .84);
+}
+.flow-card::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 4px;
+  background: var(--blue);
+}
+.flow-card.eliminate::before { background: #10aaa1; }
+.flow-card.gate::before { background: #20ad54; }
+.step-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+.step-number {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #185cf5, #2d7bff);
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 900;
+  box-shadow: 0 12px 24px rgba(24, 92, 245, .2);
+}
+.eliminate .step-number { background: linear-gradient(135deg, #089b95, #17beb5); box-shadow: 0 12px 24px rgba(16, 170, 161, .18); }
+.gate .step-number { background: linear-gradient(135deg, #16a34a, #23c365); box-shadow: 0 12px 24px rgba(32, 173, 84, .18); }
+.flow-icon {
+  width: 62px;
+  height: 62px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #ecf3ff;
+  color: var(--blue);
+}
+.eliminate .flow-icon { background: #e8f8f7; color: #0f9f98; }
+.gate .flow-icon { background: #eaf8ef; color: #16a34a; }
+.flow-icon svg {
+  width: 31px;
+  height: 31px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.flow-card h3 {
+  margin-bottom: 9px;
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 22px;
+  line-height: 1.05;
+}
+.flow-card p {
+  max-width: 340px;
+  color: #3f4d63;
+  font-size: 14.5px;
+  line-height: 1.45;
+}
+.proof-section {
+  padding-top: 42px;
+}
+.proof-card {
+  position: relative;
+  overflow: hidden;
+  min-height: 176px;
+  padding: 20px 16px 18px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, .86);
+}
+.proof-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 4px;
+  background: var(--blue);
+}
+.proof-card::after {
+  content: "";
+  position: absolute;
+  right: -34px;
+  bottom: -42px;
+  width: 190px;
+  height: 120px;
+  opacity: .45;
+  background:
+    radial-gradient(circle at center, currentColor 1px, transparent 1.6px);
+  background-size: 10px 10px;
+  transform: rotate(-10deg);
+}
+.proof-card.suite { color: var(--blue); }
+.proof-card.stress { color: #0891b2; }
+.proof-card.events { color: #10aaa1; }
+.proof-card.safety { color: #20ad54; }
+.proof-card.cctv { color: #2d7bff; }
+.proof-card.official { color: #df6f00; }
+.proof-card.stress::before { background: #0891b2; }
+.proof-card.events::before { background: #10aaa1; }
+.proof-card.safety::before { background: #20ad54; }
+.proof-card.cctv::before { background: #2d7bff; }
+.proof-card.official::before { background: #df6f00; }
+.proof-card > span {
+  position: relative;
+  z-index: 1;
+  max-width: calc(100% - 58px);
+  color: #46556e;
+}
+.proof-card > i {
+  position: absolute;
+  right: 14px;
+  top: 17px;
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 12%, white);
+  color: currentColor;
+  font-style: normal;
+}
+.proof-card > i svg {
+  width: 28px;
+  height: 28px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.proof-card.stress > i svg path:first-child,
+.proof-card .primary-action svg { fill: currentColor; }
+.proof-card strong {
+  position: relative;
+  z-index: 1;
+  margin-top: 24px;
+  color: currentColor;
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: clamp(24px, 2.1vw, 34px);
+  letter-spacing: 0;
+}
+.proof-card p {
+  position: relative;
+  z-index: 1;
+  max-width: 170px;
+  color: #43516a;
+  font-size: 12.5px;
+  line-height: 1.35;
+}
+.proof-card.cctv strong,
+.proof-card.official strong {
+  font-size: clamp(22px, 1.75vw, 30px);
+}
+@media (max-width: 1100px) {
+  h1 {
+    max-width: 100%;
+    font-size: clamp(36px, 5.5vw, 46px);
+  }
+  .lead { font-size: 16px; }
+  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 820px) {
+  .flow-card { min-height: 210px; padding: 28px; }
+  .flow-icon { width: 64px; height: 64px; }
+  .proof-card { min-height: 190px; }
+}
+/* Compact scale correction */
+@media (min-width: 1261px) {
+  .topbar {
+    min-height: 76px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+  main {
+    padding-top: 18px;
+  }
+  .hero {
+    grid-template-columns: minmax(390px, .62fr) minmax(620px, 1fr);
+    gap: clamp(26px, 3.1vw, 46px);
+    min-height: 650px;
+    align-items: center;
+  }
+  .hero-copy {
+    max-width: 560px;
+  }
+  .eyebrow {
+    margin-bottom: 22px;
+    font-size: 13px;
+  }
+  .hero-copy > .eyebrow::after {
+    bottom: -10px;
+    width: 142px;
+  }
+  h1 {
+    max-width: 560px;
+    margin-bottom: 18px;
+    font-size: clamp(40px, 3.35vw, 56px);
+    line-height: 1.07;
+  }
+  .lead {
+    max-width: 540px;
+    margin-bottom: 18px;
+    font-size: clamp(15px, 1.02vw, 18px);
+    line-height: 1.5;
+  }
+  .hero-actions {
+    gap: 12px;
+    margin-bottom: 18px;
+  }
+  .primary-action,
+  .secondary-action {
+    min-height: 50px;
+    padding: 0 22px;
+    gap: 9px;
+    font-size: 14px;
+  }
+  .primary-action svg,
+  .secondary-action svg {
+    width: 18px;
+    height: 18px;
+  }
+  .proof-ribbon {
+    gap: 9px;
+  }
+  .proof-ribbon span {
+    min-height: 40px;
+    padding: 0 13px;
+    gap: 8px;
+    font-size: 12px;
+  }
+  .proof-ribbon svg {
+    width: 20px;
+    height: 20px;
+  }
+  .route-stage {
+    padding: 22px 12px 12px;
+    border-radius: 17px;
+  }
+  .route-card-head {
+    padding: 0 14px 16px;
+  }
+  .route-card-head h2 {
+    margin-bottom: 9px;
+    font-size: 22px;
+  }
+  .route-path {
+    gap: 12px;
+    font-size: 16px;
+  }
+  .distance-pill {
+    min-height: 34px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+  .map-frame {
+    height: clamp(430px, 48vh, 540px);
+  }
+  .decision-card {
+    width: 300px;
+    padding: 15px 16px 14px;
+  }
+  .decision-card span {
+    margin-bottom: 8px;
+    font-size: 11px;
+  }
+  .belief-line strong {
+    font-size: 36px;
+  }
+  .belief-line b {
+    font-size: 25px;
+  }
+  .belief-track {
+    height: 11px;
+    margin: 11px 0 12px;
+  }
+  .decision-card p {
+    font-size: 13px;
+    line-height: 1.42;
+  }
+  .metric-strip {
+    margin-bottom: 48px;
+    padding: 20px 26px;
+  }
+  .metric-strip article {
+    gap: 14px;
+    padding: 0 22px;
+  }
+  .metric-icon {
+    width: 54px;
+    height: 54px;
+    border-radius: 14px;
+  }
+  .metric-icon svg {
+    width: 28px;
+    height: 28px;
+  }
+  .metric-strip strong {
+    font-size: 21px;
+  }
+}
+@media (min-width: 1540px) {
+  .hero {
+    min-height: 660px;
+  }
+  h1 {
+    font-size: 56px;
+  }
+  .map-frame {
+    height: 535px;
+  }
+}
+/* Final visual polish: compact evidence cards and navy-teal presentation */
+:root {
+  --bg: #f7fbff;
+  --ink: #071739;
+  --muted: #18365f;
+  --soft: #eef8fb;
+  --line: #d7e6f2;
+  --line-strong: #c3d8ea;
+  --blue: #0875b8;
+  --blue-2: #13c8bd;
+  --green: #12b76a;
+  --violet: #6d4cff;
+  --shadow: 0 22px 62px rgba(6, 70, 122, .13);
+  --shadow-soft: 0 12px 30px rgba(6, 70, 122, .08);
+}
+body {
+  background:
+    radial-gradient(circle at 16% 18%, rgba(8, 117, 184, .055), transparent 34%),
+    radial-gradient(circle at 74% 24%, rgba(19, 200, 189, .055), transparent 30%),
+    var(--bg);
+}
+.brand {
+  color: #06346f;
+}
+.dashboard-link,
+.primary-action {
+  background: linear-gradient(135deg, #0867b6 0%, #0c8db7 48%, #12c8bc 100%);
+  box-shadow: 0 14px 34px rgba(8, 117, 184, .24);
+}
+.accent-text {
+  color: transparent;
+  background: linear-gradient(90deg, #0b6ec7 0%, #12c8bc 92%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+.secondary-action:hover,
+.primary-action:hover,
+.dashboard-link:hover {
+  transform: translateY(-1px);
+}
+.route-stage {
+  padding: 18px 12px 12px;
+  border-radius: 16px;
+}
+.route-card-head {
+  gap: 12px;
+  padding: 0 12px 13px;
+}
+.route-card-head h2 {
+  margin-bottom: 8px;
+  font-size: 19px;
+  line-height: 1.05;
+}
+.route-path {
+  gap: 10px;
+  font-size: 14px;
+}
+.solid-dot {
+  width: 10px;
+  height: 10px;
+}
+.ring-dot {
+  width: 14px;
+  height: 14px;
+  border-width: 3px;
+  border-color: var(--blue-2);
+}
+.arrow {
+  font-size: 19px;
+}
+.distance-pill {
+  min-height: 32px;
+  padding: 0 11px;
+  color: var(--blue);
+  font-size: 12.5px;
+}
+.distance-pill svg {
+  width: 16px;
+  height: 16px;
+}
+.map-frame {
+  border-radius: 13px;
+}
+.fallback-route-line {
+  stroke: var(--blue-2);
+}
+.fallback-node.active,
+.fallback-node.target {
+  fill: var(--blue-2);
+}
+.decision-card span {
+  color: #078b9f;
+}
+.belief-line strong {
+  color: #0898aa;
+}
+.belief-track i {
+  background: linear-gradient(90deg, #0875b8, #13c8bd);
+}
+.metric-strip {
+  margin-bottom: 38px;
+  padding: 18px 24px;
+}
+.metric-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--blue);
+}
+.metric-icon svg {
+  width: 25px;
+  height: 25px;
+}
+.metric-icon.check {
+  background: linear-gradient(135deg, #0875b8, #13c8bd);
+}
+.metric-strip strong {
+  font-size: 20px;
+}
+.section {
+  padding: 36px 0;
+}
+.section-title {
+  margin-bottom: 16px;
+}
+.section-title h2,
+.boundary-card h2 {
+  font-size: clamp(25px, 2.25vw, 34px);
+}
+.decision-section {
+  padding-top: 36px;
+  padding-bottom: 38px;
+}
+.decision-flow,
+.proof-grid,
+.boundary-columns {
+  gap: 12px;
+}
+.flow-card {
+  min-height: 148px;
+  padding: 18px;
+  border-radius: 12px;
+}
+.flow-card::before,
+.proof-card::before {
+  height: 3px;
+}
+.flow-card::before,
+.proof-card.suite::before,
+.proof-card.cctv::before {
+  background: #0875b8;
+}
+.flow-card.eliminate::before,
+.proof-card.stress::before,
+.proof-card.events::before {
+  background: #0798a9;
+}
+.flow-card.gate::before,
+.proof-card.safety::before {
+  background: #12a95a;
+}
+.proof-card.official::before {
+  background: #d36a00;
+}
+.step-row {
+  margin-bottom: 12px;
+}
+.step-number {
+  width: 30px;
+  height: 30px;
+  font-size: 13px;
+  background: linear-gradient(135deg, #0875b8, #13c8bd);
+  box-shadow: 0 10px 18px rgba(8, 117, 184, .18);
+}
+.eliminate .step-number {
+  background: linear-gradient(135deg, #078f9f, #13c8bd);
+}
+.gate .step-number {
+  background: linear-gradient(135deg, #0f9f53, #22c66d);
+}
+.flow-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--blue);
+}
+.flow-icon svg {
+  width: 25px;
+  height: 25px;
+}
+.flow-card h3 {
+  margin-bottom: 7px;
+  font-size: 18px;
+}
+.flow-card p {
+  font-size: 12.5px;
+  line-height: 1.42;
+}
+.proof-section {
+  padding-top: 34px;
+}
+.proof-card {
+  min-height: 142px;
+  padding: 15px 13px 14px;
+  border-radius: 11px;
+}
+.proof-card::after {
+  right: -46px;
+  bottom: -52px;
+  width: 170px;
+  height: 104px;
+  opacity: .32;
+  background-size: 9px 9px;
+}
+.proof-card.suite,
+.proof-card.cctv {
+  color: #0875b8;
+}
+.proof-card.stress,
+.proof-card.events {
+  color: #0798a9;
+}
+.proof-card.safety {
+  color: #12a95a;
+}
+.proof-card.official {
+  color: #d36a00;
+}
+.proof-card > span {
+  max-width: calc(100% - 44px);
+  min-height: 22px;
+  font-size: 9.5px;
+  line-height: 1.15;
+}
+.proof-card > i {
+  top: 13px;
+  right: 12px;
+  width: 34px;
+  height: 34px;
+}
+.proof-card > i svg {
+  width: 19px;
+  height: 19px;
+}
+.proof-card strong {
+  margin-top: 18px;
+  margin-bottom: 6px;
+  font-size: clamp(20px, 1.55vw, 28px);
+  line-height: 1;
+}
+.proof-card.cctv strong,
+.proof-card.official strong {
+  font-size: clamp(17px, 1.18vw, 22px);
+}
+.proof-card p {
+  max-width: 150px;
+  font-size: 11px;
+  line-height: 1.3;
+}
+.boundary-card {
+  padding: 22px;
+}
+@media (min-width: 1261px) {
+  .route-stage {
+    padding: 17px 11px 11px;
+  }
+  .route-card-head h2 {
+    font-size: 18px;
+  }
+  .map-frame {
+    height: clamp(410px, 45vh, 500px);
+  }
+  .decision-card {
+    width: 282px;
+  }
+  .belief-line strong {
+    font-size: 32px;
+  }
+  .belief-line b {
+    font-size: 23px;
+  }
+}
+@media (max-width: 1100px) {
+  .flow-card {
+    min-height: 150px;
+  }
+  .proof-card {
+    min-height: 140px;
+  }
+}
+@media (max-width: 820px) {
+  .route-card-head h2 {
+    font-size: 18px;
+  }
+  .route-path {
+    font-size: 13px;
+  }
+  .flow-card {
+    min-height: 142px;
+    padding: 16px;
+  }
+  .flow-icon {
+    width: 44px;
+    height: 44px;
+  }
+  .proof-card {
+    min-height: 132px;
+  }
+}
+/* Final proof-card shrink pass */
+.proof-section {
+  padding-top: 22px;
+}
+.proof-section .section-title.compact {
+  max-width: 560px;
+  margin-bottom: 12px;
+}
+.proof-section .eyebrow {
+  margin-bottom: 18px;
+  font-size: 11px;
+}
+.proof-section .section-title h2 {
+  max-width: 560px;
+  font-size: clamp(22px, 1.8vw, 30px);
+  line-height: 1.07;
+}
+.proof-grid {
+  gap: 10px;
+}
+.proof-card {
+  min-height: 118px;
+  padding: 12px 11px 11px;
+  border-radius: 10px;
+}
+.proof-card::before {
+  height: 3px;
+}
+.proof-card::after {
+  right: -52px;
+  bottom: -54px;
+  width: 136px;
+  height: 82px;
+  opacity: .26;
+  background-size: 8px 8px;
+}
+.proof-card > span {
+  min-height: 16px;
+  max-width: calc(100% - 34px);
+  font-size: 8.5px;
+  line-height: 1.1;
+}
+.proof-card > i {
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+}
+.proof-card > i svg {
+  width: 15px;
+  height: 15px;
+}
+.proof-card strong {
+  margin-top: 12px;
+  margin-bottom: 4px;
+  font-size: clamp(16px, 1.25vw, 23px);
+  line-height: 1;
+}
+.proof-card.cctv strong,
+.proof-card.official strong {
+  font-size: clamp(13px, .92vw, 17px);
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.proof-card p {
+  max-width: 128px;
+  font-size: 9.5px;
+  line-height: 1.25;
+}
+@media (min-width: 1261px) {
+  .proof-card {
+    min-height: 112px;
+  }
+}
+@media (max-width: 1100px) {
+  .proof-card {
+    min-height: 124px;
+  }
+  .proof-card.cctv strong,
+  .proof-card.official strong {
+    font-size: 15px;
+  }
+}
+@media (max-width: 820px) {
+  .proof-section .section-title h2 {
+    font-size: clamp(24px, 7vw, 32px);
+  }
+  .proof-card {
+    min-height: 112px;
+  }
+}
+/* Interactive checkpoint walkthrough */
+.walkthrough-section {
+  padding-top: 38px;
+  padding-bottom: 44px;
+}
+.walkthrough-title {
+  max-width: 780px;
+  margin-bottom: 18px;
+}
+.walkthrough-title p:not(.eyebrow) {
+  max-width: 690px;
+  margin: 12px 0 0;
+  color: #40526c;
+  font-size: 15px;
+  line-height: 1.55;
+  font-weight: 550;
+}
+.walkthrough-panel {
+  padding: 24px;
+  border: 1px solid var(--line-strong);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, .78);
+  box-shadow: var(--shadow-soft);
+}
+.walkthrough-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  margin-bottom: 24px;
+  color: #66758d;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.walkthrough-meta strong {
+  color: #344258;
+  font-weight: 900;
+}
+.walkthrough-meta em {
+  margin-left: auto;
+  color: #60718d;
+  font-style: normal;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.walk-track {
+  --progress-ratio: 0;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  align-items: start;
+  gap: 0;
+  min-height: 126px;
+  margin-bottom: 22px;
+}
+.walk-track::before,
+.walk-track::after {
+  content: "";
+  position: absolute;
+  left: 32px;
+  right: 32px;
+  top: 30px;
+  height: 4px;
+  border-radius: 999px;
+  background: #e3e8ef;
+}
+.walk-track::after {
+  right: auto;
+  width: calc((100% - 64px) * var(--progress-ratio));
+  background: #111827;
+  transition: width .22s ease;
+}
+.walk-node {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: #66758d;
+  font: inherit;
+  cursor: pointer;
+}
+.walk-node-dot {
+  width: 62px;
+  height: 62px;
+  display: grid;
+  place-items: center;
+  border: 4px solid #e3e7ed;
+  border-radius: 999px;
+  background: #f0f2f5;
+  color: #7b8797;
+  font-size: 17px;
+  font-weight: 900;
+  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
+}
+.walk-node-label {
+  color: #526176;
+  font-size: 12px;
+  font-weight: 800;
+  text-align: center;
+}
+.walk-node-prob {
+  min-height: 16px;
+  color: #0f9f53;
+  font-size: 11px;
+  font-weight: 800;
+}
+.walk-node.is-passed .walk-node-dot {
+  border-color: #18bf63;
+  background: #18bf63;
+  color: #ffffff;
+}
+.walk-node.is-active .walk-node-dot {
+  transform: translateY(-3px);
+  border-color: #070707;
+  background: #070707;
+  color: #ffffff;
+}
+.walk-node.is-eligible .walk-node-dot {
+  border-color: #13b8b0;
+  background: linear-gradient(135deg, #0875b8, #13c8bd);
+  color: #ffffff;
+}
+.walk-node.is-final .walk-node-dot {
+  border-color: #071739;
+  background: #071739;
+  color: #ffffff;
+}
+.walk-node.is-passed .walk-node-dot::before {
+  content: "";
+  width: 12px;
+  height: 22px;
+  border: solid #ffffff;
+  border-width: 0 4px 4px 0;
+  transform: rotate(45deg) translate(-1px, -2px);
+}
+.walk-node.is-passed .walk-node-code { display: none; }
+.walk-insight-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, .78fr) minmax(360px, 1fr);
+  gap: 20px;
+  align-items: stretch;
+}
+.confidence-box,
+.walk-card {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(6, 70, 122, .07);
+}
+.confidence-box {
+  padding: 20px;
+}
+.confidence-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 14px;
+}
+.confidence-head span {
+  color: #60718d;
+  font-size: 14px;
+  font-weight: 850;
+}
+.confidence-head strong {
+  color: #071739;
+  font-family: "Inter Tight", "Inter", sans-serif;
+  font-size: 31px;
+  line-height: 1;
+  font-weight: 900;
+}
+.walk-progress {
+  height: 18px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e6e9ee;
+}
+.walk-progress i {
+  display: block;
+  width: 18%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #2d7bff, #13c8bd);
+  transition: width .22s ease, background .22s ease;
+}
+.walk-progress.is-eligible i {
+  background: linear-gradient(90deg, #12a95a, #21c468);
+}
+.threshold-note {
+  margin: 13px 0 0;
+  color: #ef4444;
+  font-size: 12px;
+  font-weight: 800;
+}
+.walk-card {
+  min-height: 162px;
+  padding: 22px 24px;
+}
+.walk-card h3 {
+  margin: 0 0 10px;
+  color: #071739;
+  font-size: 18px;
+  line-height: 1.22;
+  font-weight: 900;
+}
+.walk-card p {
+  margin: 0;
+  color: #263956;
+  font-size: 16px;
+  line-height: 1.58;
+}
+.walk-card.is-eligible {
+  border-color: rgba(19, 200, 189, .42);
+  background: linear-gradient(135deg, #071739 0%, #0b2b45 100%);
+}
+.walk-card.is-eligible h3,
+.walk-card.is-eligible p {
+  color: #ffffff;
+}
+.walk-card.is-final {
+  border-color: rgba(18, 169, 90, .38);
+}
+.walk-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 18px;
+}
+.walk-controls button {
+  min-height: 44px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 9px;
+  background: #eef1f5;
+  color: #071739;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+}
+.walk-controls button.primary {
+  min-width: 164px;
+  background: #070707;
+  color: #ffffff;
+}
+.walk-controls button:disabled {
+  cursor: not-allowed;
+  opacity: .48;
+}
+.walk-controls span {
+  color: #60718d;
+  font-size: 13px;
+  font-weight: 750;
+}
+@media (max-width: 980px) {
+  .walk-track {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    row-gap: 22px;
+  }
+  .walk-track::before,
+  .walk-track::after { display: none; }
+  .walk-insight-grid { grid-template-columns: 1fr; }
+  .walkthrough-meta em { margin-left: 0; }
+}
+@media (max-width: 560px) {
+  .walkthrough-panel { padding: 16px; }
+  .walk-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .walk-node-dot { width: 54px; height: 54px; font-size: 15px; }
+  .confidence-head { align-items: flex-start; flex-direction: column; gap: 8px; }
+  .walk-controls button { flex: 1 1 auto; }
+}

clear.js CHANGED Viewed

@@ -1,272 +1,395 @@
-const DATA = {
-  latest: "./evidence/latest_run.json",
-  suite: "./evidence/suite_report.json",
-  extreme: "./evidence/extreme_batch_report.json",
-  cctv: "./evidence/cctv_bmd45_report.json",
-  route: "./data/orr_silk_board_whitefield_route_osrm.geojson",
-  official: "./data/official_reference_bengaluru_cmp_2020.json"
-};
-const fmt = new Intl.NumberFormat("en-IN");
-const pct = value => `${Math.round(Number(value || 0) * 100)}%`;
-const km = metres => `${(Number(metres || 0) / 1000).toFixed(1)} km`;
-const q = selector => document.querySelector(selector);
-const setText = (selector, value) => {
-  const node = q(selector);
-  if (node) node.textContent = value;
-};
-async function loadJson(url) {
-  const response = await fetch(url, { cache: "no-store" });
-  if (!response.ok) throw new Error(`${url} returned ${response.status}`);
-  const text = await response.text();
-  return JSON.parse(text.replace(/^\uFEFF/, ""));
-}
-function findAssertion(report, name) {
-  return (report.assertions || []).find(item => item.name === name) || { details: {} };
-}
-function label(id, fallback = "checkpoint") {
-  return String(id || fallback)
-    .replace(/_/g, " ")
-    .replace(/\b\w/g, char => char.toUpperCase());
-}
-function chooseDecision(latest, extreme) {
-  const cycles = latest.cycles || [];
-  const activatedCycle = cycles.find(cycle => (cycle.decisions || []).some(decision => decision.activate)) || cycles[cycles.length - 1] || {};
-  const cycleDecision = (activatedCycle.decisions || []).find(decision => decision.activate) || (activatedCycle.decisions || [])[0];
-  const aggregateDecision = ((extreme.aggregate_decisions || [])[0] || {}).decision;
-  const decision = cycleDecision || aggregateDecision || {};
-  return {
-    cycle: activatedCycle,
-    decision,
-    checkpoint: activatedCycle.observation?.junction_id || "marathahalli",
-    destination: activatedCycle.best_destination_id || decision.destination_id || "whitefield",
-    confidence: activatedCycle.best_confidence || decision.confidence || 0,
-    activate: Boolean(decision.activate)
-  };
-}
-function renderNumbers({ latest, suite, extreme, cctv, route, official }) {
-  const chosen = chooseDecision(latest, extreme);
-  const stress = extreme.metrics || {};
-  const images = findAssertion(cctv, "metadata_rows_match_coco_images").details.coco_images || 0;
-  const annotations = findAssertion(cctv, "coco_annotations_present").details.annotation_count || 0;
-  const silkBoard = (official.junction_counts || []).find(item => item.name === "Silk Board Junction") || {};
-  const doddanakundi = (official.junction_counts || []).find(item => item.name === "Doddanakundi Junction") || {};
-  const confidenceText = pct(chosen.confidence);
-  const routePointText = fmt.format(route.coordinate_count || 0);
-  setText("#route-distance", `${km(route.distance_m)} / ${routePointText} route points`);
-  setText("#belief-percent", confidenceText);
-  setText("#belief-destination", label(chosen.destination));
-  const bar = q("#belief-bar");
-  if (bar) bar.style.width = `${Math.max(0, Math.min(100, Math.round(Number(chosen.confidence || 0) * 100)))}%`;
-  setText(
-    "#hero-action",
-    chosen.activate
-      ? `At ${label(chosen.checkpoint)}, PTIS increases confidence toward ${label(chosen.destination)} based on continued route movement.`
-      : `At ${label(chosen.checkpoint)}, PTIS keeps the capacity gate on standby.`
-  );
-  setText("#route-points-metric", routePointText);
-  setText("#events-metric", fmt.format(stress.observation_count || 0));
-  setText("#confidence-metric", confidenceText);
-  setText("#safety-metric", fmt.format(stress.capacity_violation_count || 0));
-  setText("#suite-pass", `${fmt.format(suite.passed_count || 0)}/${fmt.format(suite.scenario_count || 0)}`);
-  setText("#stress-load", fmt.format(stress.vehicle_count || 0));
-  setText("#observation-count", fmt.format(stress.observation_count || 0));
-  setText("#safety-count", fmt.format(stress.capacity_violation_count || 0));
-  setText("#cctv-count", `${fmt.format(images)} / ${fmt.format(annotations)}`);
-  setText("#official-count", `${fmt.format(silkBoard.peak_hour_pcu || 0)} / ${fmt.format(doddanakundi.peak_hour_pcu || 0)} PCU`);
-}
-function routeCoordinates(route) {
-  return (((route.features || [])[0] || {}).geometry || {}).coordinates || [];
-}
-function boundsFor(coords, waypoints) {
-  const all = coords.concat((waypoints || []).map(point => [Number(point.lon), Number(point.lat)]));
-  const lons = all.map(point => Number(point[0]));
-  const lats = all.map(point => Number(point[1]));
-  return {
-    minLon: Math.min(...lons),
-    maxLon: Math.max(...lons),
-    minLat: Math.min(...lats),
-    maxLat: Math.max(...lats)
-  };
-}
-function renderFallback(route, latest, extreme) {
-  const svg = q("#fallback-map");
-  const coords = routeCoordinates(route);
-  if (!svg || coords.length === 0) return;
-  const chosen = chooseDecision(latest, extreme);
-  const width = 980;
-  const height = 620;
-  const pad = 64;
-  const bounds = boundsFor(coords, route.waypoints || []);
-  const scaleX = (width - pad * 2) / Math.max(0.000001, bounds.maxLon - bounds.minLon);
-  const scaleY = (height - pad * 2) / Math.max(0.000001, bounds.maxLat - bounds.minLat);
-  const scale = Math.min(scaleX, scaleY);
-  const offsetX = (width - (bounds.maxLon - bounds.minLon) * scale) / 2;
-  const offsetY = (height - (bounds.maxLat - bounds.minLat) * scale) / 2;
-  const project = coord => {
-    const lon = Number(Array.isArray(coord) ? coord[0] : coord.lon);
-    const lat = Number(Array.isArray(coord) ? coord[1] : coord.lat);
-    return {
-      x: offsetX + (lon - bounds.minLon) * scale,
-      y: height - offsetY - (lat - bounds.minLat) * scale
-    };
-  };
-  const d = coords.map((coord, index) => {
-    const point = project(coord);
-    return `${index === 0 ? "M" : "L"}${point.x.toFixed(1)} ${point.y.toFixed(1)}`;
-  }).join(" ");
-  const nodes = (route.waypoints || []).map(point => {
-    const projected = project(point);
-    const className = ["fallback-node"];
-    if (point.id === chosen.checkpoint) className.push("active");
-    if (point.id === chosen.destination) className.push("target");
-    const anchor = point.order > 4 ? "end" : "start";
-    const dx = anchor === "end" ? -12 : 12;
-    return `
-      <circle class="${className.join(" ")}" cx="${projected.x.toFixed(1)}" cy="${projected.y.toFixed(1)}" r="8"></circle>
-      <text class="fallback-label" x="${(projected.x + dx).toFixed(1)}" y="${(projected.y - 12).toFixed(1)}" text-anchor="${anchor}">${point.name}</text>
-    `;
-  }).join("");
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.innerHTML = `
-    <path class="fallback-route-shadow" d="${d}"></path>
-    <path class="fallback-route-line" d="${d}"></path>
-    ${nodes}
-  `;
-}
-function initMapLibre(route, latest, extreme) {
-  const frame = q(".map-frame");
-  const coords = routeCoordinates(route);
-  if (!frame || !window.maplibregl || coords.length === 0) return;
-  const chosen = chooseDecision(latest, extreme);
-  const routeGeoJson = {
-    type: "FeatureCollection",
-    features: [{
-      type: "Feature",
-      properties: { name: "Silk Board to Whitefield" },
-      geometry: { type: "LineString", coordinates: coords }
-    }]
-  };
-  const pointGeoJson = {
-    type: "FeatureCollection",
-    features: (route.waypoints || []).map(point => ({
-      type: "Feature",
-      properties: {
-        id: point.id,
-        name: point.name,
-        state: point.id === chosen.destination ? "target" : (point.id === chosen.checkpoint ? "checkpoint" : "route")
-      },
-      geometry: { type: "Point", coordinates: [Number(point.lon), Number(point.lat)] }
-    }))
-  };
-  const bounds = boundsFor(coords, route.waypoints || []);
-  const map = new maplibregl.Map({
-    container: "map",
-    style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
-    center: [(bounds.minLon + bounds.maxLon) / 2, (bounds.minLat + bounds.maxLat) / 2],
-    zoom: 10.7,
-    pitch: 0,
-    bearing: 0,
-    attributionControl: true
-  });
-  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right");
-  map.dragRotate.disable();
-  map.touchZoomRotate.disableRotation();
-  map.on("load", () => {
-    map.addSource("ptis-route", { type: "geojson", data: routeGeoJson });
-    map.addLayer({
-      id: "ptis-route-shadow",
-      type: "line",
-      source: "ptis-route",
-      paint: { "line-color": "#0f172a", "line-width": 13, "line-opacity": .18, "line-blur": 1.4 }
-    });
-    map.addLayer({
-      id: "ptis-route-line",
-      type: "line",
-      source: "ptis-route",
-      paint: { "line-color": "#13c8bd", "line-width": 6, "line-opacity": .98 }
-    });
-    map.addSource("ptis-points", { type: "geojson", data: pointGeoJson });
-    map.addLayer({
-      id: "ptis-point-halo",
-      type: "circle",
-      source: "ptis-points",
-      paint: {
-        "circle-radius": ["match", ["get", "state"], "target", 18, "checkpoint", 16, 11],
-        "circle-color": "#ffffff",
-        "circle-opacity": .95,
-        "circle-stroke-color": "#cbd5e1",
-        "circle-stroke-width": 1
-      }
-    });
-    map.addLayer({
-      id: "ptis-point-dot",
-      type: "circle",
-      source: "ptis-points",
-      paint: {
-        "circle-radius": ["match", ["get", "state"], "target", 10, "checkpoint", 9, 6],
-        "circle-color": ["match", ["get", "state"], "target", "#13c8bd", "checkpoint", "#13c8bd", "#071739"],
-        "circle-stroke-color": "#ffffff",
-        "circle-stroke-width": 2
-      }
-    });
-    map.addLayer({
-      id: "ptis-point-label",
-      type: "symbol",
-      source: "ptis-points",
-      layout: {
-        "text-field": ["get", "name"],
-        "text-size": 12,
-        "text-offset": [0, 1.8],
-        "text-anchor": "top",
-        "text-allow-overlap": false
-      },
-      paint: { "text-color": "#0f172a", "text-halo-color": "#ffffff", "text-halo-width": 1.5 }
-    });
-    map.fitBounds([[bounds.minLon, bounds.minLat], [bounds.maxLon, bounds.maxLat]], {
-      padding: { top: 74, right: 62, bottom: 98, left: 62 },
-      duration: 0,
-      bearing: 0,
-      pitch: 0
-    });
-    frame.classList.add("map-ready");
-  });
-}
-async function init() {
-  try {
-    const [latest, suite, extreme, cctv, route, official] = await Promise.all([
-      loadJson(DATA.latest),
-      loadJson(DATA.suite),
-      loadJson(DATA.extreme),
-      loadJson(DATA.cctv),
-      loadJson(DATA.route),
-      loadJson(DATA.official)
-    ]);
-    renderNumbers({ latest, suite, extreme, cctv, route, official });
-    renderFallback(route, latest, extreme);
-    initMapLibre(route, latest, extreme);
-  } catch (error) {
-    console.error(error);
-    setText("#hero-action", "Could not load local evidence files. Check the frontend server path.");
-    setText("#route-distance", "Evidence load failed");
-  }
-}
-init();

+const DATA = {
+  latest: "./evidence/latest_run.json",
+  suite: "./evidence/suite_report.json",
+  extreme: "./evidence/extreme_batch_report.json",
+  cctv: "./evidence/cctv_bmd45_report.json",
+  route: "./data/orr_silk_board_whitefield_route_osrm.geojson",
+  official: "./data/official_reference_bengaluru_cmp_2020.json"
+};
+const fmt = new Intl.NumberFormat("en-IN");
+const pct = value => `${Math.round(Number(value || 0) * 100)}%`;
+const km = metres => `${(Number(metres || 0) / 1000).toFixed(1)} km`;
+const q = selector => document.querySelector(selector);
+const setText = (selector, value) => {
+  const node = q(selector);
+  if (node) node.textContent = value;
+};
+async function loadJson(url) {
+  const response = await fetch(url, { cache: "no-store" });
+  if (!response.ok) throw new Error(`${url} returned ${response.status}`);
+  const text = await response.text();
+  return JSON.parse(text.replace(/^\uFEFF/, ""));
+}
+function findAssertion(report, name) {
+  return (report.assertions || []).find(item => item.name === name) || { details: {} };
+}
+function label(id, fallback = "checkpoint") {
+  return String(id || fallback)
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, char => char.toUpperCase());
+}
+function chooseDecision(latest, extreme) {
+  const cycles = latest.cycles || [];
+  const activatedCycle = cycles.find(cycle => (cycle.decisions || []).some(decision => decision.activate)) || cycles[cycles.length - 1] || {};
+  const cycleDecision = (activatedCycle.decisions || []).find(decision => decision.activate) || (activatedCycle.decisions || [])[0];
+  const aggregateDecision = ((extreme.aggregate_decisions || [])[0] || {}).decision;
+  const decision = cycleDecision || aggregateDecision || {};
+  return {
+    cycle: activatedCycle,
+    decision,
+    checkpoint: activatedCycle.observation?.junction_id || "marathahalli",
+    destination: activatedCycle.best_destination_id || decision.destination_id || "whitefield",
+    confidence: activatedCycle.best_confidence || decision.confidence || 0,
+    activate: Boolean(decision.activate)
+  };
+}
+function renderNumbers({ latest, suite, extreme, cctv, route, official }) {
+  const chosen = chooseDecision(latest, extreme);
+  const stress = extreme.metrics || {};
+  const images = findAssertion(cctv, "metadata_rows_match_coco_images").details.coco_images || 0;
+  const annotations = findAssertion(cctv, "coco_annotations_present").details.annotation_count || 0;
+  const silkBoard = (official.junction_counts || []).find(item => item.name === "Silk Board Junction") || {};
+  const doddanakundi = (official.junction_counts || []).find(item => item.name === "Doddanakundi Junction") || {};
+  const confidenceText = pct(chosen.confidence);
+  const routePointText = fmt.format(route.coordinate_count || 0);
+  setText("#route-distance", `${km(route.distance_m)} / ${routePointText} route points`);
+  setText("#belief-percent", confidenceText);
+  setText("#belief-destination", label(chosen.destination));
+  const bar = q("#belief-bar");
+  if (bar) bar.style.width = `${Math.max(0, Math.min(100, Math.round(Number(chosen.confidence || 0) * 100)))}%`;
+  setText(
+    "#hero-action",
+    chosen.activate
+      ? `At ${label(chosen.checkpoint)}, PTIS increases confidence toward ${label(chosen.destination)} based on continued route movement.`
+      : `At ${label(chosen.checkpoint)}, PTIS keeps the capacity gate on standby.`
+  );
+  setText("#route-points-metric", routePointText);
+  setText("#events-metric", fmt.format(stress.observation_count || 0));
+  setText("#confidence-metric", confidenceText);
+  setText("#safety-metric", fmt.format(stress.capacity_violation_count || 0));
+  setText("#suite-pass", `${fmt.format(suite.passed_count || 0)}/${fmt.format(suite.scenario_count || 0)}`);
+  setText("#stress-load", fmt.format(stress.vehicle_count || 0));
+  setText("#observation-count", fmt.format(stress.observation_count || 0));
+  setText("#safety-count", fmt.format(stress.capacity_violation_count || 0));
+  setText("#cctv-count", `${fmt.format(images)} / ${fmt.format(annotations)}`);
+  setText("#official-count", `${fmt.format(silkBoard.peak_hour_pcu || 0)} / ${fmt.format(doddanakundi.peak_hour_pcu || 0)} PCU`);
+}
+function routeCoordinates(route) {
+  return (((route.features || [])[0] || {}).geometry || {}).coordinates || [];
+}
+function boundsFor(coords, waypoints) {
+  const all = coords.concat((waypoints || []).map(point => [Number(point.lon), Number(point.lat)]));
+  const lons = all.map(point => Number(point[0]));
+  const lats = all.map(point => Number(point[1]));
+  return {
+    minLon: Math.min(...lons),
+    maxLon: Math.max(...lons),
+    minLat: Math.min(...lats),
+    maxLat: Math.max(...lats)
+  };
+}
+function renderFallback(route, latest, extreme) {
+  const svg = q("#fallback-map");
+  const coords = routeCoordinates(route);
+  if (!svg || coords.length === 0) return;
+  const chosen = chooseDecision(latest, extreme);
+  const width = 980;
+  const height = 620;
+  const pad = 64;
+  const bounds = boundsFor(coords, route.waypoints || []);
+  const scaleX = (width - pad * 2) / Math.max(0.000001, bounds.maxLon - bounds.minLon);
+  const scaleY = (height - pad * 2) / Math.max(0.000001, bounds.maxLat - bounds.minLat);
+  const scale = Math.min(scaleX, scaleY);
+  const offsetX = (width - (bounds.maxLon - bounds.minLon) * scale) / 2;
+  const offsetY = (height - (bounds.maxLat - bounds.minLat) * scale) / 2;
+  const project = coord => {
+    const lon = Number(Array.isArray(coord) ? coord[0] : coord.lon);
+    const lat = Number(Array.isArray(coord) ? coord[1] : coord.lat);
+    return {
+      x: offsetX + (lon - bounds.minLon) * scale,
+      y: height - offsetY - (lat - bounds.minLat) * scale
+    };
+  };
+  const d = coords.map((coord, index) => {
+    const point = project(coord);
+    return `${index === 0 ? "M" : "L"}${point.x.toFixed(1)} ${point.y.toFixed(1)}`;
+  }).join(" ");
+  const nodes = (route.waypoints || []).map(point => {
+    const projected = project(point);
+    const className = ["fallback-node"];
+    if (point.id === chosen.checkpoint) className.push("active");
+    if (point.id === chosen.destination) className.push("target");
+    const anchor = point.order > 4 ? "end" : "start";
+    const dx = anchor === "end" ? -12 : 12;
+    return `
+      <circle class="${className.join(" ")}" cx="${projected.x.toFixed(1)}" cy="${projected.y.toFixed(1)}" r="8"></circle>
+      <text class="fallback-label" x="${(projected.x + dx).toFixed(1)}" y="${(projected.y - 12).toFixed(1)}" text-anchor="${anchor}">${point.name}</text>
+    `;
+  }).join("");
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.innerHTML = `
+    <path class="fallback-route-shadow" d="${d}"></path>
+    <path class="fallback-route-line" d="${d}"></path>
+    ${nodes}
+  `;
+}
+function initMapLibre(route, latest, extreme) {
+  const frame = q(".map-frame");
+  const coords = routeCoordinates(route);
+  if (!frame || !window.maplibregl || coords.length === 0) return;
+  const chosen = chooseDecision(latest, extreme);
+  const routeGeoJson = {
+    type: "FeatureCollection",
+    features: [{
+      type: "Feature",
+      properties: { name: "Silk Board to Whitefield" },
+      geometry: { type: "LineString", coordinates: coords }
+    }]
+  };
+  const pointGeoJson = {
+    type: "FeatureCollection",
+    features: (route.waypoints || []).map(point => ({
+      type: "Feature",
+      properties: {
+        id: point.id,
+        name: point.name,
+        state: point.id === chosen.destination ? "target" : (point.id === chosen.checkpoint ? "checkpoint" : "route")
+      },
+      geometry: { type: "Point", coordinates: [Number(point.lon), Number(point.lat)] }
+    }))
+  };
+  const bounds = boundsFor(coords, route.waypoints || []);
+  const map = new maplibregl.Map({
+    container: "map",
+    style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+    center: [(bounds.minLon + bounds.maxLon) / 2, (bounds.minLat + bounds.maxLat) / 2],
+    zoom: 10.7,
+    pitch: 0,
+    bearing: 0,
+    attributionControl: true
+  });
+  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right");
+  map.dragRotate.disable();
+  map.touchZoomRotate.disableRotation();
+  map.on("load", () => {
+    map.addSource("ptis-route", { type: "geojson", data: routeGeoJson });
+    map.addLayer({
+      id: "ptis-route-shadow",
+      type: "line",
+      source: "ptis-route",
+      paint: { "line-color": "#0f172a", "line-width": 13, "line-opacity": .18, "line-blur": 1.4 }
+    });
+    map.addLayer({
+      id: "ptis-route-line",
+      type: "line",
+      source: "ptis-route",
+      paint: { "line-color": "#13c8bd", "line-width": 6, "line-opacity": .98 }
+    });
+    map.addSource("ptis-points", { type: "geojson", data: pointGeoJson });
+    map.addLayer({
+      id: "ptis-point-halo",
+      type: "circle",
+      source: "ptis-points",
+      paint: {
+        "circle-radius": ["match", ["get", "state"], "target", 18, "checkpoint", 16, 11],
+        "circle-color": "#ffffff",
+        "circle-opacity": .95,
+        "circle-stroke-color": "#cbd5e1",
+        "circle-stroke-width": 1
+      }
+    });
+    map.addLayer({
+      id: "ptis-point-dot",
+      type: "circle",
+      source: "ptis-points",
+      paint: {
+        "circle-radius": ["match", ["get", "state"], "target", 10, "checkpoint", 9, 6],
+        "circle-color": ["match", ["get", "state"], "target", "#13c8bd", "checkpoint", "#13c8bd", "#071739"],
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": 2
+      }
+    });
+    map.addLayer({
+      id: "ptis-point-label",
+      type: "symbol",
+      source: "ptis-points",
+      layout: {
+        "text-field": ["get", "name"],
+        "text-size": 12,
+        "text-offset": [0, 1.8],
+        "text-anchor": "top",
+        "text-allow-overlap": false
+      },
+      paint: { "text-color": "#0f172a", "text-halo-color": "#ffffff", "text-halo-width": 1.5 }
+    });
+    map.fitBounds([[bounds.minLon, bounds.minLat], [bounds.maxLon, bounds.maxLat]], {
+      padding: { top: 74, right: 62, bottom: 98, left: 62 },
+      duration: 0,
+      bearing: 0,
+      pitch: 0
+    });
+    frame.classList.add("map-ready");
+  });
+}
+const WALK_STEPS = [
+  {
+    code: "SB",
+    label: "Silk Board",
+    confidence: 18,
+    title: "Vehicle enters at Silk Board",
+    body: "PTIS starts from a prior belief. Six possible destinations remain, so the system observes without acting."
+  },
+  {
+    code: "HSR",
+    label: "HSR Layout",
+    confidence: 22,
+    title: "Passed Silk Board without turning",
+    body: "The vehicle did not exit immediately. One local possibility becomes less likely, and Whitefield belief rises to 22%."
+  },
+  {
+    code: "SW",
+    label: "Sony World",
+    confidence: 34,
+    title: "Passed HSR Layout without turning",
+    body: "Another junction is eliminated from the destination set. PTIS now has stronger evidence that the flow is continuing downstream."
+  },
+  {
+    code: "MH",
+    label: "Marathahalli",
+    confidence: 67,
+    title: "Belief crosses the action threshold",
+    body: "At Marathahalli, Whitefield belief reaches 67%. PTIS marks the connector decision as eligible, then checks receiving-road capacity before any command is allowed.",
+    eligible: true
+  },
+  {
+    code: "DK",
+    label: "Doddanekkundi",
+    confidence: 82,
+    title: "Downstream evidence keeps increasing",
+    body: "Continued movement after Marathahalli strengthens the destination belief. The capacity gate still prevents over-commanding the receiving road."
+  },
+  {
+    code: "WF",
+    label: "Whitefield",
+    confidence: 100,
+    title: "Replay destination observed",
+    body: "In this software replay, the trace reaches Whitefield. That confirms the replay path for this example, not a live field-deployment result.",
+    final: true
+  }
+];
+let walkIndex = 0;
+function renderWalkthrough(route) {
+  const track = q("#walk-track");
+  if (!track) return;
+  const routeKm = route?.distance_m ? km(route.distance_m) : "route grounded";
+  setText("#walk-route-summary", `6 junctions / ${routeKm}`);
+  track.innerHTML = WALK_STEPS.map((step, index) => `
+    <button class="walk-node" type="button" role="tab" data-walk-index="${index}" aria-selected="false">
+      <span class="walk-node-dot"><span class="walk-node-code">${step.code}</span></span>
+      <span class="walk-node-label">${step.label}</span>
+      <span class="walk-node-prob"></span>
+    </button>
+  `).join("");
+  track.addEventListener("click", event => {
+    const button = event.target.closest("[data-walk-index]");
+    if (!button) return;
+    walkIndex = Number(button.dataset.walkIndex || 0);
+    updateWalkthrough();
+  });
+  q("#walk-prev")?.addEventListener("click", () => {
+    walkIndex = Math.max(0, walkIndex - 1);
+    updateWalkthrough();
+  });
+  q("#walk-next")?.addEventListener("click", () => {
+    walkIndex = Math.min(WALK_STEPS.length - 1, walkIndex + 1);
+    updateWalkthrough();
+  });
+  q("#walk-reset")?.addEventListener("click", () => {
+    walkIndex = 0;
+    updateWalkthrough();
+  });
+  updateWalkthrough();
+}
+function updateWalkthrough() {
+  const step = WALK_STEPS[walkIndex] || WALK_STEPS[0];
+  const track = q("#walk-track");
+  if (track) {
+    const progress = WALK_STEPS.length <= 1 ? 0 : (walkIndex / (WALK_STEPS.length - 1)) * 100;
+    track.style.setProperty("--progress-ratio", String(progress / 100));
+    track.querySelectorAll(".walk-node").forEach((node, index) => {
+      const item = WALK_STEPS[index];
+      node.classList.toggle("is-passed", index < walkIndex);
+      node.classList.toggle("is-active", index === walkIndex && !item.eligible && !item.final);
+      node.classList.toggle("is-eligible", index === walkIndex && Boolean(item.eligible));
+      node.classList.toggle("is-final", index === walkIndex && Boolean(item.final));
+      node.setAttribute("aria-selected", String(index === walkIndex));
+      const prob = node.querySelector(".walk-node-prob");
+      if (prob) prob.textContent = index < walkIndex ? `${item.confidence}%` : "";
+    });
+  }
+  setText("#walk-confidence", `${step.confidence}%`);
+  const bar = q("#walk-progress-bar");
+  if (bar) bar.style.width = `${step.confidence}%`;
+  const progress = q(".walk-progress");
+  if (progress) progress.classList.toggle("is-eligible", step.confidence >= 65);
+  const card = q("#walk-card");
+  if (card) {
+    card.classList.toggle("is-eligible", Boolean(step.eligible));
+    card.classList.toggle("is-final", Boolean(step.final));
+    card.innerHTML = `<h3>${step.title}</h3><p>${step.body}</p>`;
+  }
+  setText("#walk-position", `Junction ${walkIndex + 1} / ${WALK_STEPS.length}`);
+  const prev = q("#walk-prev");
+  const next = q("#walk-next");
+  if (prev) prev.disabled = walkIndex === 0;
+  if (next) {
+    next.disabled = walkIndex === WALK_STEPS.length - 1;
+    next.textContent = walkIndex === WALK_STEPS.length - 2 ? "Finish replay" : "Next junction";
+  }
+}
+async function init() {
+  try {
+    const [latest, suite, extreme, cctv, route, official] = await Promise.all([
+      loadJson(DATA.latest),
+      loadJson(DATA.suite),
+      loadJson(DATA.extreme),
+      loadJson(DATA.cctv),
+      loadJson(DATA.route),
+      loadJson(DATA.official)
+    ]);
+    renderNumbers({ latest, suite, extreme, cctv, route, official });
+    renderWalkthrough(route);
+    renderFallback(route, latest, extreme);
+    initMapLibre(route, latest, extreme);
+  } catch (error) {
+    console.error(error);
+    setText("#hero-action", "Could not load local evidence files. Check the frontend server path.");
+    setText("#route-distance", "Evidence load failed");
+  }
+}
+init();

index.html CHANGED Viewed

@@ -1,101 +1,144 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>PTIS</title>
-    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
-    <link rel="stylesheet" href="./clear.css?v=compact-5" />
-  </head>
-  <body>
-    <header class="topbar">
-      <a class="brand" href="#top" aria-label="PTIS home">PTIS</a>
-      <nav aria-label="Page sections">
-        <a href="#route">Route</a>
-        <a href="#decision">Decision</a>
-        <a href="#proof">Proof</a>
-        <a href="#boundary">Boundary</a>
-        <a class="dashboard-link" href="./dashboard.html" aria-label="Open detailed dashboard">
-          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 16V9m5 7V5m5 11v-4M6 9l4-4 4 4 4-6" /></svg>
-          Dashboard
-        </a>
-      </nav>
-    </header>
-    <main id="top">
-      <section class="hero" aria-label="PTIS public showcase">
-        <div class="hero-copy">
-          <p class="eyebrow">Real route grounding</p>
-          <h1>Traffic systems count vehicles. <span class="accent-text">PTIS predicts where they are going.</span></h1>
-          <p class="lead">A vehicle that keeps crossing checkpoints without turning is giving destination evidence. PTIS converts those movement patterns into early destination belief, helping predict bottlenecks before they fully form.</p>
-          <div class="hero-actions">
-            <a class="primary-action" href="#route"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>Watch Route Replay</a>
-            <a class="secondary-action" href="#proof"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9m7 10V5m7 14v-7M3 19h18" /></svg>View Proof Numbers</a>
-          </div>
-          <div class="proof-ribbon" aria-label="Current proof state">
-            <span><svg viewBox="0 0 24 24"><path d="M20 7 10 17l-5-5" /></svg>Software validated</span>
-            <span><svg viewBox="0 0 24 24"><path d="M12 21s7-5.1 7-11a7 7 0 0 0-14 0c0 5.9 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg>Real route grounded</span>
-            <span><svg viewBox="0 0 24 24"><path d="m5 19 4-9 9-4-4 9-9 4Z" /><path d="m12 12 3 3" /></svg>Pilot-ready</span>
-          </div>
-        </div>
-        <section id="route" class="route-stage" aria-label="Route-grounded prediction map">
-          <div class="route-card-head">
-            <div>
-              <h2>Route-Grounded Prediction</h2>
-              <div class="route-path" aria-label="Route from Silk Board to Whitefield">
-                <span class="solid-dot"></span><strong>Silk Board</strong><span class="arrow">&rarr;</span><span class="ring-dot"></span><strong>Whitefield</strong>
-              </div>
-            </div>
-            <span id="route-distance" class="distance-pill"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9m7 10V5m7 14v-7M3 19h18" /></svg>Loading route</span>
-          </div>
-          <div class="map-frame">
-            <div id="map" class="map"></div>
-            <svg id="fallback-map" class="fallback-map" role="img" aria-label="Fallback route geometry"></svg>
-            <div class="decision-card" aria-live="polite">
-              <span>PTIS belief after checkpoint</span>
-              <div class="belief-line"><strong id="belief-percent">--</strong><b id="belief-destination">Whitefield</b></div>
-              <div class="belief-track"><i id="belief-bar"></i></div>
-              <p id="hero-action">Loading latest replay decision</p>
-            </div>
-          </div>
-        </section>
-      </section>
-      <section class="metric-strip" aria-label="Proof summary metrics">
-        <article><div class="metric-icon car"><svg viewBox="0 0 24 24"><path d="M5 16h14l-1.6-5.4A3 3 0 0 0 14.5 8h-5a3 3 0 0 0-2.9 2.6L5 16Z" /><path d="M7 16v3m10-3v3M8 19h.01M16 19h.01" /></svg></div><div><span>Route Points Analyzed</span><strong id="route-points-metric">--</strong><p>Across route geometry</p></div></article>
-        <article><div class="metric-icon check"><svg viewBox="0 0 24 24"><path d="M20 7 10 17l-5-5" /></svg></div><div><span>Observation Events</span><strong id="events-metric">--</strong><p>Processed in replay</p></div></article>
-        <article><div class="metric-icon chart"><svg viewBox="0 0 24 24"><path d="M4 19h16M7 16l4-5 3 3 5-8" /><path d="M17 6h2v2" /></svg></div><div><span>Prediction Confidence</span><strong id="confidence-metric">--</strong><p>Toward Whitefield</p></div></article>
-        <article><div class="metric-icon clock"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M12 8v5l4 2" /></svg></div><div><span>Safety Violations</span><strong id="safety-metric">--</strong><p>Capacity gate result</p></div></article>
-      </section>
-      <section id="decision" class="section decision-section" aria-label="How PTIS decides">
-        <div class="section-title"><p class="eyebrow">The idea in one flow</p><h2>Do not wait for the jam to become obvious.</h2></div>
-        <div class="decision-flow">
-          <article class="flow-card observe"><div class="step-row"><span class="step-number">1</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M6 19V9m6 10V5m6 14v-8" /><path d="M4 19h16" /></svg></span></div><h3>Observe</h3><p>Use checkpoint counts. No GPS path, no number plates, no face data.</p></article>
-          <article class="flow-card eliminate"><div class="step-row"><span class="step-number">2</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5Z" /></svg></span></div><h3>Eliminate</h3><p>Every passed junction removes one possible destination from the belief set.</p></article>
-          <article class="flow-card gate"><div class="step-row"><span class="step-number">3</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" /><path d="m9 12 2 2 4-5" /></svg></span></div><h3>Gate</h3><p>Activate only when belief is high and the connector has safe capacity.</p></article>
-        </div>
-      </section>
-      <section id="proof" class="section proof-section" aria-label="Proof numbers">
-        <div class="section-title compact"><p class="eyebrow">What is proven today</p><h2>Software proof, not field-deployment claim.</h2></div>
-        <div class="proof-grid">
-          <article class="proof-card suite"><span>Deterministic suite</span><i><svg viewBox="0 0 24 24"><path d="M8 5h8M8 12h8M8 19h5" /><path d="M6 3h12v18H6z" /></svg></i><strong id="suite-pass">--</strong><p>Scenario checks passed.</p></article>
-          <article class="proof-card stress"><span>Stress replay</span><i><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg></i><strong id="stress-load">--</strong><p>Vehicles replayed through the decision logic.</p></article>
-          <article class="proof-card events"><span>Checkpoint events</span><i><svg viewBox="0 0 24 24"><path d="M12 21s7-5.1 7-11a7 7 0 0 0-14 0c0 5.9 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg></i><strong id="observation-count">--</strong><p>Observation events processed.</p></article>
-          <article class="proof-card safety"><span>Safety violations</span><i><svg viewBox="0 0 24 24"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" /></svg></i><strong id="safety-count">--</strong><p>Capacity gate violations found.</p></article>
-          <article class="proof-card cctv"><span>CCTV audit</span><i><svg viewBox="0 0 24 24"><path d="M5 7h14v10H5z" /><circle cx="12" cy="12" r="3" /><path d="M8 17l-2 3m10-3 2 3" /></svg></i><strong id="cctv-count">--</strong><p>Images / boxes audited.</p></article>
-          <article class="proof-card official"><span>Official grounding</span><i><svg viewBox="0 0 24 24"><path d="M5 19V9m5 10V5m5 14v-7m5 7V3" /><path d="M3 19h18" /></svg></i><strong id="official-count">--</strong><p>Capacity reference basis.</p></article>
-        </div>
-      </section>
-      <section id="boundary" class="section boundary-section" aria-label="Truth boundary">
-        <div class="boundary-card"><div><p class="eyebrow">Truth boundary</p><h2>What this page is allowed to claim</h2></div><div class="boundary-columns"><article><h3>Claimed</h3><p>Replay software works on deterministic scenarios, stress load, real route geometry, public CCTV detection evidence, and official planning references.</p></article><article><h3>Not claimed yet</h3><p>No live BTP deployment, no Google Maps integration, no field-measured congestion reduction, and no agency-controlled checkpoint pilot yet.</p></article></div></div>
-      </section>
-    </main>
-    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-    <script src="./clear.js?v=compact-5"></script>
-  </body>
-</html>

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>PTIS</title>
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
+    <link rel="stylesheet" href="./clear.css?v=walkthrough-1" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="#top" aria-label="PTIS home">PTIS</a>
+      <nav aria-label="Page sections">
+        <a href="#route">Route</a>
+        <a href="#walkthrough">How it works</a>
+        <a href="#decision">Decision</a>
+        <a href="#proof">Proof</a>
+        <a href="#boundary">Boundary</a>
+        <a class="dashboard-link" href="./dashboard.html" aria-label="Open detailed dashboard">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 16V9m5 7V5m5 11v-4M6 9l4-4 4 4 4-6" /></svg>
+          Dashboard
+        </a>
+      </nav>
+    </header>
+    <main id="top">
+      <section class="hero" aria-label="PTIS public showcase">
+        <div class="hero-copy">
+          <p class="eyebrow">Real route grounding</p>
+          <h1>Traffic systems count vehicles. <span class="accent-text">PTIS predicts where they are going.</span></h1>
+          <p class="lead">A vehicle that keeps crossing checkpoints without turning is giving destination evidence. PTIS converts those movement patterns into early destination belief, helping predict bottlenecks before they fully form.</p>
+          <div class="hero-actions">
+            <a class="primary-action" href="#walkthrough"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>Watch Route Replay</a>
+            <a class="secondary-action" href="#proof"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9m7 10V5m7 14v-7M3 19h18" /></svg>View Proof Numbers</a>
+          </div>
+          <div class="proof-ribbon" aria-label="Current proof state">
+            <span><svg viewBox="0 0 24 24"><path d="M20 7 10 17l-5-5" /></svg>Software validated</span>
+            <span><svg viewBox="0 0 24 24"><path d="M12 21s7-5.1 7-11a7 7 0 0 0-14 0c0 5.9 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg>Real route grounded</span>
+            <span><svg viewBox="0 0 24 24"><path d="m5 19 4-9 9-4-4 9-9 4Z" /><path d="m12 12 3 3" /></svg>Pilot-ready</span>
+          </div>
+        </div>
+        <section id="route" class="route-stage" aria-label="Route-grounded prediction map">
+          <div class="route-card-head">
+            <div>
+              <h2>Route-Grounded Prediction</h2>
+              <div class="route-path" aria-label="Route from Silk Board to Whitefield">
+                <span class="solid-dot"></span><strong>Silk Board</strong><span class="arrow">&rarr;</span><span class="ring-dot"></span><strong>Whitefield</strong>
+              </div>
+            </div>
+            <span id="route-distance" class="distance-pill"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9m7 10V5m7 14v-7M3 19h18" /></svg>Loading route</span>
+          </div>
+          <div class="map-frame">
+            <div id="map" class="map"></div>
+            <svg id="fallback-map" class="fallback-map" role="img" aria-label="Fallback route geometry"></svg>
+            <div class="decision-card" aria-live="polite">
+              <span>PTIS belief after checkpoint</span>
+              <div class="belief-line"><strong id="belief-percent">--</strong><b id="belief-destination">Whitefield</b></div>
+              <div class="belief-track"><i id="belief-bar"></i></div>
+              <p id="hero-action">Loading latest replay decision</p>
+            </div>
+          </div>
+        </section>
+      </section>
+      <section class="metric-strip" aria-label="Proof summary metrics">
+        <article><div class="metric-icon car"><svg viewBox="0 0 24 24"><path d="M5 16h14l-1.6-5.4A3 3 0 0 0 14.5 8h-5a3 3 0 0 0-2.9 2.6L5 16Z" /><path d="M7 16v3m10-3v3M8 19h.01M16 19h.01" /></svg></div><div><span>Route Points Analyzed</span><strong id="route-points-metric">--</strong><p>Across route geometry</p></div></article>
+        <article><div class="metric-icon check"><svg viewBox="0 0 24 24"><path d="M20 7 10 17l-5-5" /></svg></div><div><span>Observation Events</span><strong id="events-metric">--</strong><p>Processed in replay</p></div></article>
+        <article><div class="metric-icon chart"><svg viewBox="0 0 24 24"><path d="M4 19h16M7 16l4-5 3 3 5-8" /><path d="M17 6h2v2" /></svg></div><div><span>Prediction Confidence</span><strong id="confidence-metric">--</strong><p>Toward Whitefield</p></div></article>
+        <article><div class="metric-icon clock"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M12 8v5l4 2" /></svg></div><div><span>Safety Violations</span><strong id="safety-metric">--</strong><p>Capacity gate result</p></div></article>
+      </section>
+      <section id="walkthrough" class="section walkthrough-section" aria-label="Interactive PTIS checkpoint walkthrough">
+        <div class="section-title walkthrough-title">
+          <p class="eyebrow">How PTIS works</p>
+          <h2>Click a junction and watch the belief change.</h2>
+          <p>Each checkpoint crossing without a turn removes one destination possibility. PTIS treats that absence as evidence, then applies a capacity gate before any software action becomes eligible.</p>
+        </div>
+        <div class="walkthrough-panel">
+          <div class="walkthrough-meta">
+            <span>Silk Board &rarr; Whitefield</span>
+            <strong id="walk-route-summary">6 junctions</strong>
+            <em>Illustrative software replay, not live traffic control.</em>
+          </div>
+          <div id="walk-track" class="walk-track" role="tablist" aria-label="PTIS checkpoint sequence"></div>
+          <div class="walk-insight-grid">
+            <div class="confidence-box">
+              <div class="confidence-head">
+                <span>Confidence: vehicle is heading to Whitefield</span>
+                <strong id="walk-confidence">18%</strong>
+              </div>
+              <div class="walk-progress" aria-hidden="true"><i id="walk-progress-bar"></i></div>
+              <p id="walk-threshold" class="threshold-note">65% threshold: connector is only eligible after the capacity gate is safe.</p>
+            </div>
+            <article id="walk-card" class="walk-card" aria-live="polite">
+              <h3>Vehicle enters at Silk Board</h3>
+              <p>PTIS starts from a prior belief. Six possible destinations remain, so the system observes without acting.</p>
+            </article>
+          </div>
+          <div class="walk-controls" aria-label="Walkthrough controls">
+            <button id="walk-prev" type="button">Back</button>
+            <button id="walk-next" class="primary" type="button">Next junction</button>
+            <button id="walk-reset" type="button">Reset</button>
+            <span id="walk-position">Junction 1 / 6</span>
+          </div>
+        </div>
+      </section>
+      <section id="decision" class="section decision-section" aria-label="How PTIS decides">
+        <div class="section-title"><p class="eyebrow">The idea in one flow</p><h2>Do not wait for the jam to become obvious.</h2></div>
+        <div class="decision-flow">
+          <article class="flow-card observe"><div class="step-row"><span class="step-number">1</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M6 19V9m6 10V5m6 14v-8" /><path d="M4 19h16" /></svg></span></div><h3>Observe</h3><p>Use checkpoint counts. No GPS path, no number plates, no face data.</p></article>
+          <article class="flow-card eliminate"><div class="step-row"><span class="step-number">2</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5Z" /></svg></span></div><h3>Eliminate</h3><p>Every passed junction removes one possible destination from the belief set.</p></article>
+          <article class="flow-card gate"><div class="step-row"><span class="step-number">3</span><span class="flow-icon"><svg viewBox="0 0 24 24"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" /><path d="m9 12 2 2 4-5" /></svg></span></div><h3>Gate</h3><p>Activate only when belief is high and the connector has safe capacity.</p></article>
+        </div>
+      </section>
+      <section id="proof" class="section proof-section" aria-label="Proof numbers">
+        <div class="section-title compact"><p class="eyebrow">What is proven today</p><h2>Software proof, not field-deployment claim.</h2></div>
+        <div class="proof-grid">
+          <article class="proof-card suite"><span>Deterministic suite</span><i><svg viewBox="0 0 24 24"><path d="M8 5h8M8 12h8M8 19h5" /><path d="M6 3h12v18H6z" /></svg></i><strong id="suite-pass">--</strong><p>Scenario checks passed.</p></article>
+          <article class="proof-card stress"><span>Stress replay</span><i><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg></i><strong id="stress-load">--</strong><p>Vehicles replayed through the decision logic.</p></article>
+          <article class="proof-card events"><span>Checkpoint events</span><i><svg viewBox="0 0 24 24"><path d="M12 21s7-5.1 7-11a7 7 0 0 0-14 0c0 5.9 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg></i><strong id="observation-count">--</strong><p>Observation events processed.</p></article>
+          <article class="proof-card safety"><span>Safety violations</span><i><svg viewBox="0 0 24 24"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" /></svg></i><strong id="safety-count">--</strong><p>Capacity gate violations found.</p></article>
+          <article class="proof-card cctv"><span>CCTV audit</span><i><svg viewBox="0 0 24 24"><path d="M5 7h14v10H5z" /><circle cx="12" cy="12" r="3" /><path d="M8 17l-2 3m10-3 2 3" /></svg></i><strong id="cctv-count">--</strong><p>Images / boxes audited.</p></article>
+          <article class="proof-card official"><span>Official grounding</span><i><svg viewBox="0 0 24 24"><path d="M5 19V9m5 10V5m5 14v-7m5 7V3" /><path d="M3 19h18" /></svg></i><strong id="official-count">--</strong><p>Capacity reference basis.</p></article>
+        </div>
+      </section>
+      <section id="boundary" class="section boundary-section" aria-label="Truth boundary">
+        <div class="boundary-card"><div><p class="eyebrow">Truth boundary</p><h2>What this page is allowed to claim</h2></div><div class="boundary-columns"><article><h3>Claimed</h3><p>Replay software works on deterministic scenarios, stress load, real route geometry, public CCTV detection evidence, and official planning references.</p></article><article><h3>Not claimed yet</h3><p>No live BTP deployment, no Google Maps integration, no field-measured congestion reduction, and no agency-controlled checkpoint pilot yet.</p></article></div></div>
+      </section>
+    </main>
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+    <script src="./clear.js?v=walkthrough-1"></script>
+  </body>
+</html>