/* =============================================================================
   YesBOS 2.0 — Knowledge page: "How a Digital Employee understands your business."
   About TRUST, not "learning". The Enterprise Secretary is the knowledge hub:
   your scattered business knowledge → quietly organised → shared by the whole
   Digital Workforce. Signature = a scroll-driven three-stage flow.
   Recurring line: Not internet knowledge. Your business knowledge.
   Builds on design-system.css.
   ============================================================================= */

/* --- Intro (trust) --- */
.kn-intro { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.kn-intro__head { max-width: 46rem; }
.kn-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.07; max-width: 20ch; }
.kn-intro .lead { margin-top: var(--sp-5); max-width: 38rem; font-size: var(--fs-h4); font-weight: 500; color: var(--ink); }
.kn-cue { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-6); font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); }
.kn-cue svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .kn-cue svg { animation: knBob 2.4s ease-in-out infinite; } @keyframes knBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } } }

/* --- The flow (signature) --- */
.kn-flow { position: relative; background: var(--forest-wash); }

/* Static fallback (reduced-motion / no-JS): show the resolved end state, no pin */
.kn-flow.is-static { padding-block: var(--section-y); }
.kn-flow.is-static .kn-flow__sticky { position: static; height: auto; }
.kn-flow.is-static .kn-books { position: static; opacity: 1; transform: none; margin-inline: auto; justify-content: center; }
.kn-flow.is-static .kn-book { opacity: 1; transform: none; }
.kn-flow.is-static .kn-hub, .kn-flow.is-static .kn-workforce { position: static; opacity: 1; transform: none; margin-top: var(--sp-7); }
.kn-flow.is-static .kn-stem, .kn-flow.is-static .kn-bus { display: none; }
.kn-flow.is-static .kn-cap { position: static; opacity: 1; }
.kn-flow.is-static .kn-cap[data-cap="1"], .kn-flow.is-static .kn-cap[data-cap="2"] { display: none; }

/* Live (scroll-scrubbed) — pinned viewport over a tall track */
.kn-flow.is-live { min-height: 300vh; }
.kn-flow.is-live .kn-flow__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.kn-flow__inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* Stage stepper */
.kn-stages { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6); }
.kn-stages li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); letter-spacing: -0.01em; transition: color .4s var(--ease); }
.kn-stages__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .4s var(--ease), transform .4s var(--ease); }
.kn-stages li.is-on { color: var(--ink); }
.kn-stages li.is-on .kn-stages__dot { background: var(--emerald); transform: scale(1.15); }

/* The scene — three spatial bands: books (top) → hub (centre) → workforce (bottom) */
.kn-scene { position: relative; width: 100%; max-width: 720px; height: clamp(340px, 52vh, 460px); margin-inline: auto; }

/* Stage 1 — scattered business knowledge (book spines) */
.kn-books { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); width: 100%; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.kn-book { display: inline-block; padding: .55rem 1rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); opacity: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); }
/* pre-organised scatter (tilts) — cleared at stage 1 */
.kn-book:nth-child(1) { transform: rotate(-6deg) translateY(6px); }
.kn-book:nth-child(2) { transform: rotate(4deg) translateY(-6px); }
.kn-book:nth-child(3) { transform: rotate(-3deg) translateY(4px); }
.kn-book:nth-child(4) { transform: rotate(6deg) translateY(-4px); }
.kn-book:nth-child(5) { transform: rotate(-5deg) translateY(5px); }

/* Enterprise Secretary hub — centre */
.kn-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); display: flex; flex-direction: column; align-items: center; gap: .5rem; width: min(260px, 78%); padding: var(--sp-5); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-md); text-align: center; opacity: .45; transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); }
.kn-hub__avatar { width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--forest-tint); display: grid; place-items: center; }
.kn-hub__avatar svg { width: 24px; height: 27px; overflow: visible; }
.kn-hub__avatar .stem { stroke: var(--grey); stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kn-hub__avatar .check { stroke: var(--emerald); stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kn-hub__name { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.kn-hub__state { font-size: var(--fs-sm); font-weight: 600; color: var(--forest); opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s; }

/* Digital Workforce — bottom band */
.kn-workforce { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(10px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); width: 100%; opacity: 0; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.kn-de { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); box-shadow: var(--shadow-xs); transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.kn-de::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--line); transition: background .4s var(--ease); }

/* Distribution connectors (hub → workforce), drawn in stage 3 */
.kn-stem { position: absolute; left: 50%; top: 50%; width: 2px; height: clamp(46px, 12vh, 84px); background: color-mix(in srgb, var(--forest) 40%, var(--line)); transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.kn-bus { position: absolute; left: 12%; width: 76%; bottom: clamp(52px, 8vh, 74px); height: 2px; background: color-mix(in srgb, var(--forest) 40%, var(--line)); transform: scaleX(0); transform-origin: center; transition: transform .5s var(--ease) .12s; }

/* --- Stage transitions driven by [data-stage] on the section --- */
/* Stage 1: books organise (tilts clear), hub dim, workforce hidden */
.kn-flow[data-stage="1"] .kn-book { opacity: 1; transform: none; }

/* Stage 2 & 3: books absorbed into the hub; hub activates */
.kn-flow[data-stage="2"] .kn-book,
.kn-flow[data-stage="3"] .kn-book { opacity: 0; }
.kn-flow[data-stage="2"] .kn-book:nth-child(1), .kn-flow[data-stage="3"] .kn-book:nth-child(1) { transform: translate(40px, 150px) scale(.4); }
.kn-flow[data-stage="2"] .kn-book:nth-child(2), .kn-flow[data-stage="3"] .kn-book:nth-child(2) { transform: translate(18px, 150px) scale(.4); }
.kn-flow[data-stage="2"] .kn-book:nth-child(3), .kn-flow[data-stage="3"] .kn-book:nth-child(3) { transform: translate(0, 150px) scale(.4); }
.kn-flow[data-stage="2"] .kn-book:nth-child(4), .kn-flow[data-stage="3"] .kn-book:nth-child(4) { transform: translate(-18px, 150px) scale(.4); }
.kn-flow[data-stage="2"] .kn-book:nth-child(5), .kn-flow[data-stage="3"] .kn-book:nth-child(5) { transform: translate(-40px, 150px) scale(.4); }

.kn-flow[data-stage="2"] .kn-hub,
.kn-flow[data-stage="3"] .kn-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); border-color: color-mix(in srgb, var(--forest) 55%, var(--line)); box-shadow: var(--shadow-lg); }
.kn-flow[data-stage="2"] .kn-hub__state,
.kn-flow[data-stage="3"] .kn-hub__state { opacity: 1; transform: none; }

/* Stage 3: workforce shares it */
.kn-flow[data-stage="3"] .kn-workforce { opacity: 1; transform: translateX(-50%) translateY(0); }
.kn-flow[data-stage="3"] .kn-de { color: var(--ink); border-color: color-mix(in srgb, var(--forest) 40%, var(--line)); }
.kn-flow[data-stage="3"] .kn-de::before { background: var(--emerald); }
.kn-flow[data-stage="3"] .kn-stem { transform: translateX(-50%) scaleY(1); }
.kn-flow[data-stage="3"] .kn-bus { transform: scaleX(1); }

/* Captions — crossfade per stage (overlaid) */
.kn-caps { position: relative; width: 100%; max-width: 42rem; min-height: 3.5em; text-align: center; }
.kn-cap { position: absolute; inset: 0; margin: 0; font-size: var(--fs-lead); color: var(--text-muted); opacity: 0; transition: opacity .5s var(--ease); text-wrap: pretty; }
.kn-cap b { color: var(--ink); font-weight: 700; }
.kn-flow[data-stage="1"] .kn-cap[data-cap="1"],
.kn-flow[data-stage="2"] .kn-cap[data-cap="2"],
.kn-flow[data-stage="3"] .kn-cap[data-cap="3"] { opacity: 1; }

/* --- Memorable line --- */
.kn-statement { background: var(--surface); }
.kn-statement .container { text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.kn-statement p { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); text-wrap: balance; max-width: 22ch; margin-inline: auto; }
.kn-statement p .accent { color: var(--emerald); }

/* --- How it understands --- */
.kn-explain { background: var(--forest-wash); border-block: 1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
.kn-explain__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 820px) { .kn-explain__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.kn-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-xs); }
.kn-panel__k { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.kn-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.kn-list li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); color: var(--ink); }
.kn-list li::before { position: absolute; left: 0; top: -0.05em; font-size: 1rem; font-weight: 700; }
.kn-list--yes li::before { content: "✓"; color: var(--forest); }
.kn-list--no li { color: var(--text-muted); }
.kn-list--no li::before { content: "—"; color: var(--text-soft); }
.kn-panel--grow p { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* --- Philosophy (recurring line) --- */
.kn-philo { background: var(--night); color: #fff; }
.kn-philo .container { text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.kn-philo p { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: #fff; text-wrap: balance; }
.kn-philo p .soft { color: var(--emerald); }

/* --- Close --- */
.kn-close { text-align: center; }
.kn-close__inner { max-width: 42rem; margin-inline: auto; }
.kn-close h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.kn-close p { margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-lead); max-width: 36rem; margin-inline: auto; }
.kn-close .btn { margin-top: var(--sp-7); }