/* Product colours belong to their cards; Priviot violet belongs to navigation. */
.roadmap-main {
  background:
    radial-gradient(ellipse at 75% 0%, rgba(124,53,255,.13), transparent 38rem),
    radial-gradient(circle, rgba(174,153,212,.09) 1px, transparent 1px),
    #0b0a10;
  background-size: auto, 28px 28px, auto;
}
.roadmap-products { position:relative; padding:clamp(3.5rem,7vw,6rem) 0 6rem; }
.roadmap-products__inner { width:min(100% - 2.5rem,72rem); margin-inline:auto; }
.roadmap-products__title { margin:0; color:var(--oh-ink,#f7f4ff); font-size:clamp(3rem,6vw,4.5rem); font-weight:650; letter-spacing:-.055em; line-height:1.05; }
.roadmap-products__lead { max-width:40rem; margin:1.2rem 0 0; color:var(--oh-muted,#b5b0be); font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.65; }
.roadmap-filters { display:inline-flex; max-width:100%; gap:.2rem; margin-top:2.4rem; padding:.3rem; overflow-x:auto; border:1px solid rgba(180,151,235,.22); border-radius:.9rem; background:#14111c; scrollbar-width:none; }
.roadmap-filters::-webkit-scrollbar { display:none; }
.roadmap-filter { min-height:2.75rem; padding:.6rem 1rem; border:1px solid transparent; border-radius:.6rem; background:transparent; color:#b5afbf; font:inherit; font-size:.9rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:color .18s ease,background .18s ease,border-color .18s ease; }
.roadmap-filter:hover { color:#f7f4ff; background:rgba(255,255,255,.05); }
.roadmap-filter.is-active { color:#f7f4ff; border-color:rgba(124,53,255,.8); background:rgba(124,53,255,.22); }
.roadmap-filter:focus-visible { outline:2px solid #7c35ff; outline-offset:3px; }
.roadmap-filter-result { min-height:1.2rem; margin:1rem 0 2rem; color:#b5afbf; font-size:.8rem; }
.roadmap-groups { display:grid; gap:4rem; }
.roadmap-group[hidden],.roadmap-card[hidden] { display:none; }
.roadmap-group__header { display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem 1.4rem; margin-bottom:1.4rem; }
.roadmap-group__eyebrow { display:none; }
.roadmap-group__header h2 { margin:0; color:var(--oh-ink,#f7f4ff); font-size:clamp(1.6rem,2.7vw,2rem); font-weight:620; letter-spacing:-.035em; line-height:1.18; }
.roadmap-group__header>p:last-child { max-width:38rem; margin:0; color:#b5afbf; font-size:.9rem; line-height:1.5; }
.roadmap-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:1.25rem; }
.roadmap-grid--extensions { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:calc(66.666% - .42rem); }
.roadmap-card { --roadmap-accent:124,53,255; display:flex; min-width:0; min-height:23rem; padding:1.6rem; flex-direction:column; border:1px solid rgba(var(--roadmap-accent),.5); border-radius:1.25rem; background:radial-gradient(ellipse at 0% 0%,rgba(var(--roadmap-accent),.10),transparent 75%),#15121c; transition:border-color .2s ease,box-shadow .2s ease; }
.roadmap-card:hover,.roadmap-card:focus-within { border-color:rgba(var(--roadmap-accent),.85); box-shadow:0 8px 28px rgba(0,0,0,.16); }
.roadmap-card__top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
.roadmap-card__icon { display:grid; width:4rem; height:4rem; flex:none; overflow:hidden; place-items:center; border-radius:.9rem; }
.roadmap-card__icon img { width:100%; height:100%; object-fit:contain; transform:scale(var(--roadmap-icon-scale,1)); }
.roadmap-card__status { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border:1px solid rgba(255,255,255,.15); border-radius:.5rem; background:rgba(255,255,255,.035); color:#d2cadc; font-size:.7rem; font-weight:600; line-height:1.35; }
.roadmap-card__status::before { width:.35rem; height:.35rem; flex:none; border-radius:50%; background:#aaa1b5; content:''; }
.roadmap-card--available .roadmap-card__status { color:#95e3bf; border-color:rgba(101,206,170,.25); background:rgba(101,206,170,.06); }
.roadmap-card--available .roadmap-card__status::before { background:#65ceaa; }
.roadmap-card--integrated .roadmap-card__status { color:#d1bcff; border-color:rgba(185,154,255,.3); }
.roadmap-card--integrated .roadmap-card__status::before { background:#7c35ff; }
.roadmap-card--development .roadmap-card__status { color:#e8c989; border-color:rgba(232,201,137,.25); background:rgba(232,201,137,.04); }
.roadmap-card--development .roadmap-card__status::before { background:#e8c989; }
.roadmap-card__content { flex:1; margin-top:1.7rem; }
.roadmap-card__content h3 { margin:0; color:#f7f4ff; font-size:1.5rem; font-weight:620; letter-spacing:-.03em; line-height:1.25; overflow-wrap:anywhere; }
.roadmap-card__content>p { margin:.8rem 0 0; color:#c5bfce; font-size:.95rem; line-height:1.65; }
.roadmap-card__details { margin-top:1.1rem; border-top:1px solid rgba(var(--roadmap-accent),.24); }
.roadmap-card__details>summary { display:flex; width:100%; align-items:center; justify-content:space-between; box-sizing:border-box; min-height:3rem; gap:.8rem; padding:.55rem 0; background:transparent; color:#e1d3fb; font-size:.9rem; font-weight:600; list-style:none; cursor:pointer; }
.roadmap-card__details>summary::-webkit-details-marker { display:none; }
.roadmap-card__details>summary::after { width:1.65rem; height:1.65rem; flex:none; border:1px solid rgba(185,154,255,.55); border-radius:50%; background:linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat; content:''; }
.roadmap-card__details[open]>summary::after { background:linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat; }
.roadmap-card__details>summary:hover { color:#fff; }
.roadmap-card__details>summary:focus-visible { outline:2px solid #7c35ff; outline-offset:3px; border-radius:2px; }
.roadmap-card__details>p { margin:.4rem 0 0; color:#c5bfce; font-size:.9rem; line-height:1.65; }
.roadmap-card__details>p+p { margin-top:.8rem; }
.roadmap-card__action { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(var(--roadmap-accent),.24); color:#e1d3fb; font-size:.9rem; font-weight:600; text-decoration:none; }
.roadmap-card__action:hover { color:#fff; }
.roadmap-card__action:focus-visible { outline:2px solid #7c35ff; outline-offset:4px; border-radius:2px; }
.roadmap-card__action span:last-child { font-size:1.12rem; }
.roadmap-card.is-filter-entering { animation:roadmap-card-enter .22s ease-out both; }
@keyframes roadmap-card-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(min-width:901px) { .roadmap-card { min-height:24rem; } }
@media(max-width:900px) { .roadmap-grid,.roadmap-grid--extensions { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .roadmap-products__inner { width:min(100% - 2rem,72rem); }
  .roadmap-products__title { font-size:clamp(2.7rem,11vw,3.5rem); }
  .roadmap-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; box-sizing:border-box; overflow:visible; }
  .roadmap-filter { padding-inline:.6rem; }
  .roadmap-group__header { display:block; }
  .roadmap-group__header>p:last-child { margin-top:.6rem; }
  .roadmap-grid,.roadmap-grid--extensions { grid-template-columns:1fr; }
  .roadmap-card { min-height:0; padding:1.4rem; }
  .roadmap-card__status { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { .roadmap-filter,.roadmap-card { transition:none; } .roadmap-card.is-filter-entering { animation:none; } }