/* TransferKu Round 2 (local preview): corridor map, tabs, illustrative API mockup, "Built together" timeline, bullets.
   Vanilla CSS. Final state always rendered; motion only under html.tk-motion + prefers-reduced-motion: no-preference. */

/* ---------- bullets replace the old dash markers ---------- */
.tk-card li::before, .tk-list li::before, .tk-jr-st ul li::before {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tk-primary);
  box-shadow: 0 0 0 3px var(--tk-surface-blue); top: .62em;
}
.tk-list, .tk-card ul { list-style: none; padding-left: 0; }
.tk-list li, .tk-card ul li { position: relative; padding-left: 1.35rem; margin-bottom: .45rem; }
.tk-list li::before, .tk-card ul li::before { content: ""; position: absolute; left: 2px; }

/* ---------- tabs ---------- */
.tk-tablist { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--tk-line); margin-bottom: 1.5rem; padding-bottom: 0; -webkit-overflow-scrolling: touch; }
.tk-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1rem; font: inherit; font-weight: 600;
  color: var(--tk-muted); white-space: nowrap; cursor: pointer; border-radius: 8px 8px 0 0; transition: color .2s, background-color .2s, border-color .2s; }
.tk-tab:hover { color: var(--tk-ink); background: var(--tk-surface-blue); }
.tk-tab[aria-selected="true"] { color: var(--tk-primary-dark); border-bottom-color: var(--tk-primary); }
.tk-tab:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: -3px; }
.tk-tab i, .tk-tab .tk-svg { width: 18px; height: 18px; font-size: 16px; }
.tk-tabpanel:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: 4px; border-radius: 12px; }
.tk-tp-title { font-size: 1.15rem; margin-bottom: .6rem; }
/* JS off: panels stacked, each with its heading */
.tk-tabpanels { display: grid; gap: 1rem; }
.tk-tabs-on .tk-tabpanels { display: block; }
.tk-tabs-on .tk-tabpanel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.tk-motion .tk-tabs-on .tk-tabpanel:not([hidden]) { animation: tkTabIn .32s ease both; }
}
@keyframes tkTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* segment panels */
.tk-tabs-seg .tk-tabpanel { background: #fff; border: 1px solid var(--tk-line); border-radius: 16px; padding: 1.75rem; }
.tk-segp { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: start; }
.tk-segp-main h3 { margin: .75rem 0 .4rem; }
.tk-segp-wbt { background: var(--tk-surface-blue); border-radius: 14px; padding: 1.4rem; }
.tk-segp-wbt h4 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; color: var(--tk-primary-dark); }
.tk-segp-wbt .tk-svg { width: 20px; height: 20px; }
.tk-segp-wbt .tk-btn { margin-top: .5rem; }
@media (max-width: 767px) { .tk-segp { grid-template-columns: 1fr; gap: 1.25rem; } .tk-tabs-seg .tk-tabpanel { padding: 1.25rem; } }
/* capabilities / compliance / beliefs */
.tk-tabs-cap .tk-tabpanel, .tk-tabs-comp .tk-tabpanel, .tk-tabs-bel .tk-tabpanel { background: #fff; border: 1px solid var(--tk-line); border-radius: 14px; padding: 1.5rem; }
.tk-tabs-cap .tk-tabpanels { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tk-tabs-cap.tk-tabs-on .tk-tabpanel { min-height: 140px; }
.tk-capp { display: flex; gap: 1.25rem; align-items: flex-start; }
.tk-icon-lg { width: 64px; height: 64px; font-size: 26px; flex: 0 0 64px; }
.tk-tabs-bel .tk-tabpanel { background: var(--tk-surface); border: 0; }
.tk-tabs-bel .tk-tab { padding: .7rem .75rem; }

/* ---------- corridor map ---------- */
.tk-map { background: #fff; border: 1px solid var(--tk-line); border-radius: 18px; padding: 1.25rem; margin: 2rem 0; }
.tk-map-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tk-map-top:empty { display: none; }
.tk-map-dir { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.tk-map-pause { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--tk-line); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; color: var(--tk-text); cursor: pointer; }
.tk-map-pause .tk-svg { width: 14px; height: 14px; }
.tk-map-pause .tk-pf-iplay { display: none; }
.tk-map.is-paused .tk-map-pause .tk-pf-iplay { display: inline; }
.tk-map.is-paused .tk-map-pause .tk-pf-ipause { display: none; }
.tk-map-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.tk-map-canvas { align-self: stretch; display: flex; align-items: center; overflow-x: auto; border-radius: 12px; background: var(--tk-surface); -webkit-overflow-scrolling: touch; }
.tk-map-svg { display: block; width: 100%; min-width: 680px; height: auto; }
.tk-map-bg { fill: url(#tk-dots); }
#tk-dots circle, .tk-map-svg pattern circle { fill: #D7DEEA; }
.tk-arch ellipse, .tk-arch path, .tk-arch circle { fill: #DCE5FB; stroke: #BFD0F6; stroke-width: 1; }
.tk-fl path { fill: none; stroke-linecap: round; }
.tk-fl-base { stroke-width: 2.2; opacity: .55; }
.tk-fl-run { stroke-width: 3; stroke-dasharray: 6 26; opacity: 0; }
.tk-fl.t0 path { stroke: #12A06A; } .tk-fl.t1 path { stroke: #345DE8; } .tk-fl.t2 path { stroke: #D98A00; } .tk-fl.t3 path { stroke: #6B7585; }
.tk-fl.soon path { stroke: #9AA3B2; } .tk-fl.soon .tk-fl-base { stroke-dasharray: 7 7; opacity: .9; } .tk-fl.soon .tk-fl-run { display: none; }
.tk-mn { cursor: pointer; }
.tk-mn text { font: 600 18px Inter, system-ui, sans-serif; fill: var(--tk-ink); paint-order: stroke; stroke: rgba(245,247,251,.95); stroke-width: 5px; stroke-linejoin: round; }
.tk-mn .tk-mn-sub { font-size: 14px; font-weight: 500; fill: var(--tk-muted); }
.tk-mn-dot { stroke: #fff; stroke-width: 2.5; }
.tk-mn-halo { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill .2s, stroke .2s; }
.tk-mn.t0 .tk-mn-dot { fill: #12A06A; } .tk-mn.t1 .tk-mn-dot { fill: #345DE8; } .tk-mn.t2 .tk-mn-dot { fill: #D98A00; } .tk-mn.t3 .tk-mn-dot { fill: #6B7585; }
.tk-mn.soon .tk-mn-dot { fill: #fff; stroke: #9AA3B2; stroke-dasharray: 3 3; }
.tk-mn:hover .tk-mn-halo, .tk-mn:focus .tk-mn-halo, .tk-mn.is-sel .tk-mn-halo { fill: rgba(52,93,232,.12); stroke: var(--tk-primary); }
.tk-mn:focus { outline: none; }
.tk-mn:focus-visible .tk-mn-halo { stroke: var(--tk-accent); stroke-width: 3; }
.tk-hub-dot { fill: var(--tk-primary); stroke: #fff; stroke-width: 3; }
.tk-hub-ring { fill: none; stroke: var(--tk-primary); stroke-width: 2; opacity: .35; }
.tk-hub-pulse { fill: rgba(52,93,232,.18); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tk-mn .tk-hub-l { font-size: 19px; font-weight: 700; }
.tk-mn.is-dim, .tk-fl.is-dim { opacity: .2; }
.tk-mn, .tk-fl { transition: opacity .25s; }
/* inbound layer */
.tk-map-in { opacity: 0; }
.tk-in-run { fill: none; stroke: var(--tk-primary); stroke-width: 2.5; stroke-dasharray: 6 14; opacity: .7; }
.tk-in-l { font: 600 17px Inter, system-ui, sans-serif; fill: var(--tk-primary-dark); }
.tk-map.is-in .tk-map-out { opacity: .1; }
.tk-map.is-in .tk-map-in { opacity: 1; }
.tk-map.is-in .tk-mn:not(.tk-hub) { opacity: .25; pointer-events: none; }
.tk-map-out, .tk-map-in { transition: opacity .35s; }
/* side cards */
.tk-map-side { display: grid; gap: 1rem; }
.tk-map-card p { font-size: .9rem; }
.tk-map-card { border: 1px solid var(--tk-line); border-radius: 14px; padding: 1.1rem 1.2rem; background: #fff; transition: box-shadow .25s, border-color .25s, opacity .25s; }
.tk-map-h { font-size: 1rem; margin-bottom: .5rem; }
.tk-map-info { font-size: .92rem; min-height: 5.2em; }
.tk-map-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; }
.tk-map-info dt { color: var(--tk-muted); font-weight: 500; } .tk-map-info dd { margin: 0; color: var(--tk-ink); }
.tk-map-info strong { display: block; color: var(--tk-ink); font-size: 1.05rem; margin-bottom: .35rem; }
.tk-map-legend { list-style: none; padding: 0; margin: .9rem 0 .5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; font-size: .85rem; }
.tk-map-legend li { display: flex; align-items: center; gap: .45rem; }
.tk-lg { width: 22px; height: 0; border-top: 3px solid; display: inline-block; flex: 0 0 22px; }
.tk-lg.t0 { border-color: #12A06A; } .tk-lg.t1 { border-color: #345DE8; } .tk-lg.t2 { border-color: #D98A00; } .tk-lg.soon { border-color: #9AA3B2; border-top-style: dashed; }
.tk-map-note { font-size: .78rem; color: var(--tk-muted); margin: 0; }
.tk-rails { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .88rem; }
.tk-rails li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--tk-line); }
.tk-rail-n { color: var(--tk-ink); font-weight: 600; }
.tk-rail-s { font-size: .76rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; text-align: right; align-self: center; }
.tk-rail-s.t0 { background: #E9F8F1; color: #0B6B45; } .tk-rail-s.t1 { background: var(--tk-surface-blue); color: var(--tk-primary-dark); }
.tk-map-incard .tk-card-link { font-size: .9rem; }
.tk-map.is-js .tk-map-incard { opacity: .78; }
.tk-map.is-js.is-in .tk-map-incard { opacity: 1; border-color: var(--tk-primary); box-shadow: 0 8px 24px rgba(52,93,232,.14); }
.tk-map.is-js.is-in .tk-map-outcard { opacity: .78; }
@media (max-width: 991px) { .tk-map-body { grid-template-columns: 1fr; } .tk-map-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tk-map { padding: .75rem; } .tk-map-side { grid-template-columns: 1fr; } .tk-map-svg { min-width: 640px; } }
@media (prefers-reduced-motion: no-preference) {
  html.tk-motion .tk-map.is-js:not(.is-paused) .tk-fl-run { opacity: .95; animation: tkFlow 2.6s linear infinite; }
  html.tk-motion .tk-map.is-js:not(.is-paused) .tk-fl.t1 .tk-fl-run { animation-duration: 4s; }
  html.tk-motion .tk-map.is-js:not(.is-paused) .tk-fl.t2 .tk-fl-run { animation-duration: 6s; }
  html.tk-motion .tk-map.is-js:not(.is-paused) .tk-in-run { animation: tkFlow 2.4s linear infinite; }
  html.tk-motion .tk-map.is-js:not(.is-paused) .tk-hub-pulse { animation: tkPulse 2.4s ease-out infinite; }
}
@keyframes tkFlow { to { stroke-dashoffset: -64; } }
@keyframes tkPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------- developers section + illustrative mockup ---------- */
#developers .tk-list li { color: var(--tk-text); }
.tk-mock { background: var(--tk-dark); border-radius: 18px; padding: 1.1rem 1.25rem 1.4rem; color: #C9D3E3; box-shadow: 0 20px 48px rgba(11,18,32,.22); }
.tk-mock-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tk-mock-badge { background: #FFF1DB; color: #8A4B00; font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; }
.tk-mock-note { font-size: .8rem; color: #93A0B5; }
.tk-mock .tk-tablist { border-bottom-color: #253049; }
.tk-mock .tk-tab { color: #93A0B5; }
.tk-mock .tk-tab:hover { background: #172036; color: #fff; }
.tk-mock .tk-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--tk-accent); }
.tk-mock .tk-tp-title { color: #fff; font-size: 1rem; }
.tk-mock .tk-tabpanels { gap: 1.5rem; }
.tk-code { background: #0F1A2E; border: 1px solid #1E2A44; border-radius: 12px; padding: 1rem 1.1rem; margin: 0; font: 13px/1.6 "SFMono-Regular", Menlo, Consolas, monospace; color: #DCE4F2; overflow-x: auto; white-space: pre; }
.tk-code .m { color: #47ACFB; font-weight: 700; } .tk-code .h { color: #93A0B5; } .tk-code .k { color: #9CC3FF; } .tk-code .s { color: #8BE0B5; }
.tk-code-res { margin-top: .9rem; }
.tk-code-l { display: block; font-size: .8rem; color: #93A0B5; margin-bottom: .35rem; }
.tk-st-code, .tk-st-desc { transition: color .3s; }
[data-status-anim].is-pending .tk-st-code .s, [data-status-anim].is-pending .tk-st-desc .s { color: #F5C77E; }
.tk-portal { background: #fff; border-radius: 12px; overflow: hidden; color: var(--tk-text); }
.tk-portal-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: var(--tk-surface); border-bottom: 1px solid var(--tk-line); font-size: .85rem; }
.tk-portal-bar span { width: 9px; height: 9px; border-radius: 50%; background: #D7DEEA; }
.tk-portal-bar strong { margin-left: .5rem; color: var(--tk-ink); }
.tk-portal-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .75rem .9rem; }
.tk-portal-exp { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--tk-primary-dark); border: 1px solid #C9D6F8; border-radius: 8px; padding: .3rem .6rem; }
.tk-portal-exp .tk-svg { width: 15px; height: 15px; }
.tk-pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--tk-surface); color: var(--tk-text); border: 1px solid var(--tk-line); }
.tk-pill.sel { background: var(--tk-surface-blue); color: var(--tk-primary-dark); border-color: #C9D6F8; }
.tk-pill.ok { background: #E9F8F1; color: #0B6B45; border-color: #A9E4C8; }
.tk-pill.pend { background: #FFF7E6; color: #8A5300; border-color: #F3D49A; }
.tk-portal-t { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tk-portal-t th { text-align: left; font-weight: 600; color: var(--tk-muted); padding: .55rem .9rem; border-bottom: 1px solid var(--tk-line); white-space: nowrap; }
.tk-portal-t td { padding: .6rem .9rem; border-bottom: 1px solid var(--tk-line); white-space: nowrap; }
.tk-portal-t code { color: var(--tk-ink); background: none; font-size: .82rem; }
@media (min-width: 992px) { #developers .col-lg-4 { padding-right: 2rem; } }

/* ---------- "Built together" case timeline ---------- */
.tk-bt-list { list-style: none; padding: 0; margin: 1.1rem 0 0; position: relative; }
.tk-bt-st:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--tk-primary), var(--tk-accent)); transform-origin: top; }
.tk-bt-st { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding-bottom: 1.1rem; position: relative; }
.tk-bt-st:last-child { padding-bottom: 0; }
.tk-bt-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--tk-primary); color: var(--tk-primary); position: relative; z-index: 1; }
.tk-bt-st[data-i="1"] .tk-bt-ic { border-color: #D98A00; color: #8A5300; }
.tk-bt-st[data-i="3"] .tk-bt-ic { border-color: #12A06A; color: #0B6B45; background: #E9F8F1; }
.tk-bt-n { font-size: .75rem; font-weight: 700; color: var(--tk-muted); letter-spacing: .06em; }
.tk-bt-st h4 { font-size: 1rem; margin: .1rem 0 .3rem; }
.tk-bt-st p { font-size: .93rem; }
.tk-bt-card .tk-x { stroke: #C2410C; }
@media (prefers-reduced-motion: no-preference) {
  html.tk-motion .tk-bt-list .tk-bt-st::before { transform: scaleY(0); transition: transform .6s ease .3s; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st::before { transform: scaleY(1); }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st[data-i="2"]::before { transition-delay: .9s; }
  html.tk-motion .tk-bt-list .tk-bt-st { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st { opacity: 1; transform: none; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st[data-i="2"] { transition-delay: .6s; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st[data-i="3"] { transition-delay: 1.2s; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st[data-i="1"] .tk-x { animation: tkShake .5s ease .5s 2; transform-box: fill-box; transform-origin: center; }
  html.tk-motion .tk-bt-list.is-in .tk-bt-st[data-i="3"] .tk-bt-ic { animation: tkPop .5s ease 1.6s both; }
}
@keyframes tkShake { 0%,100% { transform: none; } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes tkPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

.tk-c2c { margin-top: 1.25rem; }
.tk-dev { background: #fff; }
/* narrow columns: wrap tabs instead of scrolling */
@media (min-width: 768px) { .tk-tabs-comp .tk-tablist, .tk-tabs-bel .tk-tablist { flex-wrap: wrap; overflow: visible; } }
/* JS off: stacked panels must not grow past the viewport (wide code blocks scroll inside) */
.tk-tabpanels { grid-template-columns: minmax(0, 1fr); }
.tk-tabs-cap .tk-tabpanels { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.tk-tabpanel { min-width: 0; }
@media (max-width: 991px) { .tk-map-body { grid-template-columns: minmax(0, 1fr); } }