/* KrisVen Learn: resources page. Loaded after insights.css and uses its tokens, header and footer. */
.learn-head{padding-block:72px 32px;display:grid;gap:14px;max-width:780px}
.learn-head h1{font-size:clamp(34px,4.4vw,52px);line-height:1.05;font-weight:600;letter-spacing:-0.03em}
.learn-head p{color:var(--ink-2);font-size:17.5px;max-width:40em;margin:0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.jump a{font:500 13px/1 var(--f-mono);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none}
.jump a:hover{border-color:var(--accent);color:var(--accent-ink)}

.l-sec{padding-block:44px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 12px)}
.l-sec > h2{font-size:clamp(24px,2.8vw,32px);font-weight:600;line-height:1.15;margin-bottom:10px}
.l-sec > .sub{color:var(--ink-2);font-size:16.5px;max-width:44em;margin:0 0 24px}
.k{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}

.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vid{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.vid video{display:block;width:100%;aspect-ratio:16/9;height:auto;max-width:100%;background:#050D1C}
.vid .body{padding:16px 18px 18px;display:grid;gap:6px}
.vid h3{font-size:18px;font-weight:600}
.vid p{margin:0;font-size:14.5px;color:var(--ink-2)}

.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;min-width:0}
.path h3{font-size:18px;font-weight:600;margin:6px 0 4px}
.path p{margin:0 0 12px;font-size:14.5px;color:var(--ink-2)}
.path ol{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-2);display:grid;gap:6px}
.path a{color:var(--accent-ink);text-decoration:none}
.path a:hover{text-decoration:underline;text-underline-offset:3px}

.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:grid;gap:8px;align-content:start;min-width:0}
.guide.new{background:linear-gradient(180deg,var(--surface) 0%,var(--wash) 100%)}
.guide.new::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:14px 14px 0 0;background:var(--grad)}
.guide-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.guide h3{font-size:20px;font-weight:600;line-height:1.25}
.guide p{margin:0;font-size:15px;color:var(--ink-2)}
.guide ul{margin:2px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink-2);display:grid;gap:4px}
.guide .more{font-size:14.5px;font-weight:500;color:var(--accent-ink);text-decoration:none;margin-top:4px}
.guide .more:hover{text-decoration:underline;text-underline-offset:3px}
.st{font:600 11.5px/1.6 var(--f-mono);padding:2px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.st.sandbox{background:var(--teal-bg);color:var(--teal-ink)}
.st.soon{background:#FEF3C7;color:#92400E}
.st.planned{background:var(--soft);color:var(--muted);border-color:var(--line)}
.st.new{background:var(--wash);color:var(--accent-ink)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--accent-ink);font-weight:600}
.steps h3{font-size:16.5px;font-weight:600;margin-bottom:3px}
.steps p{margin:0;font-size:14.5px;color:var(--ink-2)}
.steps .who{font:500 12px/1.4 var(--f-mono);color:var(--muted);margin-top:6px;display:block}
.steps code,.guide code,.faq code{font-family:var(--f-mono);font-size:.88em;background:var(--soft);padding:1px 5px;border-radius:4px}

.boundary{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 14px 12px;overflow-x:auto}
.boundary svg{display:block;width:100%;height:auto;min-width:640px}
.boundary + p{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:64ch}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.split > div{border-radius:12px;padding:16px 18px;min-width:0}
.split .stay{background:var(--wash)} .split .cross{background:#FEF3C7}
.split h3{font-size:16px;font-weight:600;margin-bottom:6px}
.split ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-2);display:grid;gap:4px}

.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.gloss div{padding:14px 0;border-bottom:1px solid var(--line)}
.gloss dt{font-weight:600;font-size:15.5px;margin-bottom:3px}
.gloss dd{margin:0;font-size:14.5px;color:var(--ink-2)}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px}
.faq p{margin:10px 0 2px;font-size:15px;color:var(--ink-2)}

.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.learn-close{margin:16px 0 72px;padding:28px 30px;border-radius:16px;background:#050D1C;color:#EAF0FA;display:grid;gap:10px}
.learn-close .line{font:500 21px/1.45 var(--f-display);margin:0;text-wrap:pretty}
.learn-close p{margin:0;color:#93A4BF;font-size:15.5px}
.learn-close a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid #5B8DF5}

@media (max-width:900px){.paths,.more-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.videos,.guides,.split,.gloss{grid-template-columns:minmax(0,1fr)}}