/* A loose collection of future features. The thread implies no dates or order. */
.roadmap-main { --text: #f2f2f2; width: min(1280px, calc(100% - 56px)); margin-inline: auto; padding: 104px 0 38px; }
.roadmap-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.roadmap-eyebrow { margin: 0 0 10px; color: #aaa; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.roadmap .roadmap-heading h1 { font-size: 2.7rem; text-transform: none; letter-spacing: -.02em; }
.roadmap-heading > p { max-width: 490px; margin: 0; color: #c8c8c8; font-size: .95rem; line-height: 1.65; }
.roadmap-board { position: relative; border-radius: 26px; background: #ffffff03; box-shadow: 0 24px 60px #0002; }
.roadmap-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px 0; }
.roadmap-toolbar p { margin: 0; color: #eee; font-size: .9rem; font-weight: 500; }
.roadmap-toolbar > span { color: #aaa; font-size: .76rem; }
.roadmap-priorities { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; padding: 32px 26px 42px; overflow: hidden; }
.roadmap-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; fill: none; stroke: #ffffff29; stroke-width: 1; }
.roadmap-card { min-width: 0; position: relative; }
.roadmap-card:nth-of-type(4n + 2) { transform: translateY(12px) rotate(.5deg); }
.roadmap-card:nth-of-type(4n + 3) { transform: translateY(-4px) rotate(-.4deg); }
.roadmap-card:nth-of-type(4n) { transform: translateY(8px); }
.roadmap-card__glass { position: relative; height: 100%; min-height: 142px; padding: 20px; border-radius: 18px; background: linear-gradient(125deg, #ffffff0e, #ffffff02 60%), #252525ad; backdrop-filter: blur(22px) saturate(0%); -webkit-backdrop-filter: blur(22px) saturate(0%); box-shadow: 0 8px 22px #0004; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
.roadmap .roadmap-card h2 { position: relative; margin: 0 0 9px; color: #f2f2f2; font-size: 1.06rem; font-weight: 600; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.roadmap-card p { position: relative; margin: 0; color: #c4c4c4; font-size: .86rem; line-height: 1.55; }
@media (hover: hover) { .roadmap-card:hover .roadmap-card__glass { transform: translateY(-4px); background-color: #303030e0; box-shadow: 0 14px 26px #0005; } }
.roadmap-board__bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 0 26px 24px; }
.roadmap-board__bottom p { max-width: 670px; margin: 0; color: #aaa; font-size: .78rem; line-height: 1.6; }
.roadmap-margin-note { flex-shrink: 0; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; color: #d2d2d2; transform: rotate(-3deg); }
.roadmap-ongoing { display: grid; grid-template-columns: 1.05fr repeat(3, 1fr); gap: 28px; padding: 30px 26px; }
.roadmap .roadmap-ongoing h2, .roadmap .roadmap-ongoing h3 { margin: 0 0 6px; font-size: .86rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.roadmap .roadmap-ongoing h2 { font-family: Georgia, serif; font-style: italic; font-size: 1.05rem; }
.roadmap-ongoing p { margin: 0; color: #aaa; font-size: .8rem; line-height: 1.6; }
.roadmap-note { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 26px; padding: 22px 26px 0; border-top: 1px solid #ffffff0e; }
.roadmap .roadmap-note h2 { font-size: .86rem; font-weight: 500; line-height: 1.6; text-transform: none; letter-spacing: 0; color: #ddd; }
.roadmap-note p { max-width: 850px; margin: 0; color: #aaa; font-size: .85rem; line-height: 1.7; }
@media (max-width: 1100px) {
  .roadmap-priorities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .roadmap-main { width: calc(100% - 32px); padding-top: 90px; }
  .roadmap-heading { display: block; margin-bottom: 20px; }
  .roadmap .roadmap-heading h1 { font-size: 2.4rem; }
  .roadmap-heading > p { margin-top: 16px; max-width: 560px; font-size: .93rem; }
  .roadmap-priorities { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 16px 32px; gap: 24px 16px; }
  .roadmap-toolbar { padding-inline: 16px; }
  .roadmap-card__glass { padding: 18px; }
  .roadmap-board__bottom { align-items: start; flex-direction: column; gap: 15px; padding-inline: 16px; }
  .roadmap-ongoing { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 26px 16px; gap: 24px; }
  .roadmap-note { grid-template-columns: 1fr; gap: 7px; padding: 20px 16px 0; }
}
@media (max-width: 480px) {
  .roadmap-priorities { grid-template-columns: 1fr; gap: 16px; }
  .roadmap-card:nth-of-type(n) { transform: none; }
  .roadmap-card:nth-of-type(odd) { margin-right: 10px; }
  .roadmap-card:nth-of-type(even) { margin-left: 10px; }
  .roadmap-card__glass { min-height: 0; }
  .roadmap .roadmap-card h2 { font-size: 1.06rem; }
  .roadmap-card p { font-size: .9rem; }
  .roadmap-ongoing { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-card__glass { transition: none; }
  .roadmap-card:hover .roadmap-card__glass { transform: none; }
}
@supports not (backdrop-filter: blur(1px)) { .roadmap-card__glass { background-color: #292929; } }
