/* Johto Data home v9: path buttons, labeled sections, one next step each */
html{scroll-padding-top:84px}
.hero9{padding-bottom:20px}
.hero9 .promise5{margin:8px auto 24px}
.paths9{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto}
.path9{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:200px;line-height:1.15}
.path9-k{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c9ced6}
.next9{display:flex;justify-content:center;margin-top:28px}
.sub9{margin:32px 0 12px;font-size:1.15rem;letter-spacing:-.01em}
.feeds9{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.feeds9 li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid #e2e5ea;border-radius:14px;background:linear-gradient(180deg,#fff,#f4f5f7)}
.live9{background:#dff4ff;color:#0a0a0a}
.ico9{display:block;width:28px;height:28px;margin-bottom:10px}
.tech9{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-width:720px;margin-inline:auto}
.tech9 li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px solid #e2e5ea;border-radius:14px;background:#fff}
.sample9{text-align:center;margin:18px 0 0}
.steps9{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:900px}
.steps9 li{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #e2e5ea;border-radius:16px;background:linear-gradient(180deg,#fff,#f4f5f7)}
.steps9 b{font-size:1.1rem}
.api9 h3{margin-top:0}
@media (max-width:600px){.path9{width:100%}.paths9{flex-direction:column}}
.data10{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* inc3c t572u: holographic world map in the Data section */
.map10{position:relative;margin:24px auto 0;max-width:980px;padding:clamp(14px,3vw,28px);border-radius:24px;background:radial-gradient(ellipse 70% 80% at 30% 35%,rgba(124,212,255,.14),transparent 60%),linear-gradient(180deg,#0b0d10 0%,#050607 100%);border:1px solid #2a3038;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(124,212,255,.08),0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden}
.map10::after{content:"";position:absolute;inset:0;background:url(/assets/grain.svg);background-size:160px 160px;opacity:.1;mix-blend-mode:screen;pointer-events:none}
.map10 img{display:block;width:100%;height:auto}
.map10 figcaption{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin-top:12px;text-align:left}
.map10-k{color:#7cd4ff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.map10-l{color:#e6ebf0;font-size:.95rem;line-height:1.4}
/* t208u: map is clearly visible on phones: wider bleed, scrollable when narrow */
@media (max-width:600px){.map10{margin-left:-8px;margin-right:-8px;padding:10px 0 14px;border-radius:16px}.map10-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.map10-scroll::-webkit-scrollbar{display:none}.map10-scroll img{width:640px;max-width:none}.map10 figcaption{padding:0 14px}}