Spaces:
Running
Running
| @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; } | |
| } | |