/* JalaLens pages (home, product, about, contact). Loaded after site.css; colours are BRAND.lock tokens only. */
.nav-cta { white-space: nowrap; }
.wrap-narrow { max-width: 760px; }

/* ---------- Hero ---------- */
.jl-hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px); }
.jl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.jl-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: .9rem; }
.jl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--banana); box-shadow: 0 0 0 3px var(--mist); }
.jl-hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 20px; }
.jl-lede { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 36em; margin: 0 0 28px; }
.jl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jl-actions .btn-ghost { color: var(--leaf); }
.jl-actions .btn-ghost:hover { background: var(--mist); }

/* Hero map: hexagon grid of one sub-division, ranked leads */
.jl-map { position: relative; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 12px; }
.jl-map svg { display: block; width: 100%; height: auto; }
.jl-map .hx { fill: var(--mist); stroke: var(--card); stroke-width: 2; }
.jl-map .hx.old { fill: var(--line); }
.jl-map .hx.hot { fill: var(--banana); }
.jl-map .pipe { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.jl-map .pipe.thin { stroke-width: 1.6; opacity: .5; }
.jl-map .rank { fill: var(--ink); font: 700 15px/1 var(--display); text-anchor: middle; dominant-baseline: central; }
.jl-map .ring { fill: var(--banana); stroke: var(--ink); stroke-width: 2; }
.jl-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.jl-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: .9rem; line-height: 1.4; }
.jl-list b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--banana); color: #10241A; font: 700 .85rem/1 var(--display); }
.jl-list span { color: var(--muted); }
.jl-list strong { color: var(--ink); font-weight: 600; }
.jl-cap { margin: 10px 2px 0; font-size: .8rem; color: var(--muted); }
.jl-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--band); color: var(--on-band); font-size: .72rem; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }

@media (prefers-reduced-motion: no-preference) {
  .jl-map .hot { animation: jl-pulse 2.8s ease-in-out 1s 2 both; }
  .jl-map .hot:nth-of-type(2n) { animation-delay: 1.25s; }
}
@keyframes jl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Sections ---------- */
.jl-sec { padding-block: clamp(56px, 9vw, 112px); }
.jl-sec > .container > h2 { max-width: 20ch; }
.jl-intro { color: var(--muted); max-width: 40em; font-size: 1.1rem; }
.jl-band { background: var(--band); color: var(--on-band); }
.jl-band h2, .jl-band h3 { color: var(--on-band); }
.jl-band .jl-intro, .jl-band p { color: var(--on-band-muted); }
.jl-band a { color: var(--banana); }
.jl-tint { background: var(--mist); }

/* Problem numbers */
.jl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cb-line, rgba(255,255,255,.18)); }
.jl-facts li { padding: 22px 24px 4px 0; min-width: 0; }
.jl-facts li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.18); }
.jl-facts .n { display: block; font: 700 clamp(2.2rem, 5vw, 3.4rem)/1 var(--display); letter-spacing: -0.03em; color: var(--banana); margin-bottom: 10px; }
.jl-facts p { margin: 0 0 6px; color: var(--on-band); }
.jl-facts .src { font-size: .82rem; color: var(--on-band-muted); }

/* Steps: a real sequence, so numbered */
.jl-steps { counter-reset: step; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.jl-steps li { counter-increment: step; position: relative; padding-top: 64px; min-width: 0; }
.jl-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: var(--on-band); font: 700 1.2rem/1 var(--display); }
.jl-steps li:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 58px; right: -12px; height: 2px; background: var(--line); }
.jl-steps h3 { margin-bottom: 8px; }
.jl-steps p { color: var(--muted); margin: 0; }

/* Who it is for */
.jl-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.jl-who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.jl-who li { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.jl-who li strong { display: block; font-family: var(--display); font-size: 1.12rem; margin-bottom: 4px; }
.jl-who li span { color: var(--muted); }

/* Honest status table */
.jl-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.jl-state > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; min-width: 0; }
.jl-state h3 { font-size: 1.15rem; }
.jl-state ul { margin: 0; padding-left: 1.1em; color: var(--muted); }
.jl-state li { margin-bottom: 8px; }

/* Other lines */
.jl-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.jl-lines a { display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; min-width: 0; }
.jl-lines a:hover { border-color: var(--leaf); }
.jl-lines strong { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: 4px; color: var(--leaf); }
.jl-lines span { color: var(--muted); font-size: .95rem; }

/* CTA band */
.jl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.jl-cta h2 { margin: 0 0 6px; }
.jl-cta p { margin: 0; }
.jl-mail { font: 600 clamp(1.05rem, 2.4vw, 1.35rem)/1.2 var(--display); overflow-wrap: anywhere; }

/* Product page */
.jl-mod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.jl-mod article { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; min-width: 0; }
.jl-mod article.wide { grid-column: 1 / -1; }
.jl-mod h3 { margin-bottom: 6px; }
.jl-mod .tag { display: inline-block; margin-bottom: 10px; color: var(--leaf); font-weight: 600; font-size: .9rem; }
.jl-mod p, .jl-mod li { color: var(--muted); }
.jl-mod ul { margin: 0; padding-left: 1.1em; }
.jl-dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 28px 0 0; border-top: 1px solid var(--line); }
.jl-dl dt, .jl-dl dd { padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
.jl-dl dt { font-weight: 600; padding-right: 16px; }
.jl-dl dd { color: var(--muted); overflow-wrap: anywhere; }
.jl-kpis { margin: 18px 0 0; padding-left: 1.1em; color: var(--muted); }
.jl-src { font-size: .9rem; color: var(--muted); }
.jl-src ol { padding-left: 1.3em; }
.jl-src a { overflow-wrap: anywhere; }

/* About */
.jl-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; list-style: none; padding: 0; }
.jl-team li { padding: 24px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.jl-team strong { display: block; font: 700 1.3rem/1.2 var(--display); margin-bottom: 6px; }
.jl-team span { color: var(--muted); }

/* Contact */
.jl-contact-card { display: grid; gap: 6px; padding: clamp(22px, 4vw, 36px); border-radius: 18px; background: var(--band); color: var(--on-band); margin-top: 24px; }
.jl-contact-card p { color: var(--on-band-muted); margin: 0; }
.jl-contact-card a { color: var(--banana); }

@media (max-width: 960px) {
  .jl-hero-grid, .jl-who { grid-template-columns: 1fr; }
  .jl-steps { grid-template-columns: 1fr; gap: 24px; }
  .jl-steps li { padding: 0 0 0 64px; min-height: 46px; }
  .jl-steps li:not(:last-child)::after { top: 54px; left: 22px; right: auto; width: 2px; height: calc(100% - 38px); }
  .jl-lines { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .jl-facts { grid-template-columns: 1fr; }
  .jl-facts li, .jl-facts li + li { padding: 18px 0 6px; border-left: 0; }
  .jl-facts li + li { border-top: 1px solid rgba(255,255,255,.18); }
  .jl-state, .jl-mod, .jl-team { grid-template-columns: 1fr; }
  .jl-dl { grid-template-columns: 1fr; }
  .jl-dl dt { border-bottom: 0; padding-bottom: 0; }
  .jl-dl dd { padding-top: 4px; }
  .jl-actions .btn-primary, .jl-actions .btn-ghost { flex: 1 1 100%; }
}