/* Homepage guide navigation, with the Binance connection as the starting point. */
.learn-home { padding-block:96px; scroll-margin-top:24px }
.learn-home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px }
.learn-home-heading>div { max-width:690px }
.learn-home-eyebrow { margin:0 0 14px; color:var(--blue); font-size:12px; font-weight:600; letter-spacing:.1em }
.learn-home h2 { max-width:21ch; font-size:clamp(34px,4.8vw,50px); line-height:1.1 }
.learn-home-intro { max-width:52ch; margin:18px 0 0; color:var(--mute); font-size:18px; line-height:1.5 }
.learn-home-all { display:inline-flex; flex-shrink:0; align-items:center; gap:12px; min-height:44px; color:var(--blue); font-size:16px; font-weight:500; text-decoration:none }
.learn-home-all:hover { text-decoration:underline; text-underline-offset:4px }
.learn-home-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px }
.learn-home-layout a { text-decoration:none }
.learn-home-feature { display:flex; flex-direction:column; align-items:flex-start; padding:36px; border:1px solid #254c78; border-radius:28px; background:radial-gradient(ellipse at 100% 0,#153c6655,transparent 75%),#0a1422 }
.learn-home-feature:hover { border-color:var(--blue) }
.learn-home-feature-top { display:flex; align-items:center; flex-wrap:wrap; gap:16px; width:100%; margin-bottom:30px }
.learn-home-logo { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; background:#161b25; border:1px solid #334153; border-radius:19px }
.learn-home-logo img { display:block; width:40px; height:40px; object-fit:contain }
.learn-home-badge { padding:7px 13px; border:1px solid #285280; border-radius:999px; background:#102b47; color:#abd4ff; font-size:13px; font-weight:600; line-height:1.4 }
.learn-home-feature h3 { max-width:17ch; margin:0; font-size:clamp(28px,3.8vw,38px); line-height:1.14; letter-spacing:-.035em }
.learn-home-feature>p { margin:18px 0 30px; color:#b2bdcc; font-size:17px; line-height:1.6 }
.learn-home-primary-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; max-width:100%; min-height:48px; margin-top:auto; padding:13px 20px; border-radius:999px; background:var(--blue-d); color:#fff; font-size:16px; font-weight:500; line-height:1.4 }
.learn-home-primary-cta>span,.learn-home-text-cta>span { flex-shrink:0 }
.learn-home-feature:hover .learn-home-primary-cta { background:var(--button-hover) }
.learn-home-secondary { display:grid; grid-template-rows:repeat(2,1fr); gap:18px; min-width:0 }
.learn-home-guide { display:flex; align-items:flex-start; gap:18px; padding:27px; border:1px solid #282b30; border-radius:24px; background:var(--tile) }
.learn-home-guide:hover { border-color:#506a89 }
.learn-home-guide>div { min-width:0 }
.learn-home-icon { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:12px; background:#1a283a; color:#81beff }
.learn-home-icon svg { width:24px; height:24px }
.learn-home-guide h3 { margin:2px 0 0; font-size:23px; line-height:1.22; letter-spacing:-.025em }
.learn-home-guide p { margin:12px 0 17px; color:var(--mute); font-size:15px; line-height:1.55 }
.learn-home-text-cta { display:inline-flex; align-items:center; gap:12px; color:var(--blue); font-size:14px; font-weight:500; line-height:1.5 }
.learn-home a:focus-visible { outline:3px solid #8fc9ff; outline-offset:5px }
@media(max-width:820px) {
  .learn-home { padding-block:76px }
  .learn-home-heading { align-items:flex-start; flex-direction:column; gap:15px; margin-bottom:26px }
  .learn-home-layout { grid-template-columns:1fr }
  .learn-home-feature h3 { max-width:24ch }
  .learn-home-feature>p { max-width:56ch }
  .learn-home-secondary { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto }
  .learn-home-guide { flex-direction:column; gap:14px; padding:25px }
}
@media(max-width:560px) {
  .learn-home { padding-block:64px }
  .learn-home-intro { font-size:17px }
  .learn-home-feature { padding:26px; border-radius:24px }
  .learn-home-feature-top { margin-bottom:24px }
  .learn-home-feature>p { font-size:16px; margin-bottom:26px }
  .learn-home-primary-cta { gap:14px; font-size:15px }
  .learn-home-secondary { grid-template-columns:1fr; gap:14px }
  .learn-home-guide { flex-direction:row; gap:16px; padding:24px }
  .learn-home-guide h3 { font-size:21px }
}
@media(max-width:360px) {
  .learn-home-feature { padding:22px }
  .learn-home-guide { flex-direction:column }
}