:root {
    --bkg-orange: #FFFAF0;
    --bkg-yellow: #FFFFF1;
    --bkg-green: #ECFFF4;
    --bkg-teal: #E0FFFA;
    --bkg-blue: #E7F9FF;
    --bkg-indigo: #E8F5FF;
    --bkg-purple: #FBF5FF;
    --bkg-pink: #FFD4E2;
    --bkg-gray: #ECF2F7;
  
    --orange: #EF5C24;
    --yellow: #E29732;
    --green: #00A46A;
    --teal: #049B94;
    --blue: #0089CD;
    --indigo: #536DD7;
    --purple: #865ED4;
    --pink: #FFF4F7;
    --gray: #6D8196;
  
    --block-shadow: 0 4px 6px -1px rgb(0 0 0/0.1), 0 2px 4px -2px rgb(0 0 0/0.1);
}

#roadmap-wrapper {
    width: 100%;
    margin: 0 0 3rem 0;
    background: var(--bkg-gray);
    padding: 1rem 0;
  }
  
  #roadmap-container {
    /* border: var(--b); */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1600px;
    min-height: 30rem;
    padding: 2rem 1rem 1rem 1rem;
    margin: 0 auto;
    font-size: .8rem;
    font-weight: 400;
  }
  
  #roadmap-container > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    box-shadow: var(--block-shadow);
    border-radius: 10px;
    position: relative;
  }
  
  #roadmap-container div > * {
    padding: .5rem;
  }
  
  #group-headers > * {
    background: white;
  }
  
  #group-headers div {
    display: grid;
    place-items: center;
    text-align: center;
  }
  
  /* stages row */
  #roadmap-container header {
    height: 6rem;
    display: grid;
    place-items: center;
    padding: 1rem 0;
  }
  
  #roadmap-container h4 {
    font-size: 1.2rem;
    margin: 0 0 0 0;
    font-weight: 600;
  }
  
  header time {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1rem;
  }
  
  /* releases row */
  .releases {
    text-align: center;
    height: 10rem;
    display: grid;
    place-items: center;
    gap: 0;
  }
  #roadmap-container .releases {
    padding: 1rem .5rem;
  }
  .releases > * {
    /* border: var(--b); */
    line-height: 1rem;
    height: fit-content;
    margin: 0 0 0 0;
  }
  .releases time {
    font-weight: 400;
    font-size: .9rem;
  }
  #roadmap-container .releases div,
  #roadmap-container .releases span {
    font-weight: 600;
    font-size: .9rem;
    padding: 0;
    text-align: center;
  }
  
  /* arrows */
  span.arrow {
    display: grid;
    place-items: center;
    height: 43px;
    width: 130px;
    margin-top: -2px;
    color: white;
  }
  .arr-gray { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%236D8196'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-orange { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23EF5C24'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-teal { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23049B94'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-indigo { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23536DD7'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-green { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%2300A46A'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-yellow { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23E29732'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-pink { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23E8248C'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-blue { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%230089CD'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  .arr-purple { 
    background: transparent url("data:image/svg+xml,%3Csvg width='128px' height='41px' viewBox='0 0 128 41' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-2348, -349)' fill='%23865ED4'%3E%3Cpath d='M2451.5,349 L2475.5,369.5 L2451.5,390 L2451.5,382.9 L2348,382.9 L2348,355.9 L2451.5,355.9 L2451.5,349 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  }
  
  /* touchpoints row */
  .touchpoints {
    height: 9rem;
  }
  #roadmap-container ul.touchpoints {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    height: 9rem;
    padding: 0 1rem;
    position: relative;
  }
  #roadmap-container li {
    font-size: .8rem;
    line-height: 1rem;
  }
  #roadmap-container ul.touchpoints li {
    list-style-type: none;
    margin: 0;
    padding: .2rem 0;
    background: #FFFFFFCC;
    text-align: center;
    border-radius: 3px;
  }
  
  
  /* major release items row */
  
  .major {
    height: 16rem;
  }
  
  .prose--responsive #roadmap-container ul.major {
    padding-left: 1.5rem;
    padding-top: 1rem;
    margin: 0 0 0 0;
  }
  .prose--responsive ul.major li {
    padding-left: 0;
  }
  ul.major li::marker {
      color: #60606060;
      font-size: 1rem;
  }
  
 
  
  .current-stage {
    outline: 3px dashed #d33a2c;
    outline-offset: 4px;
  }
  
  .orange {color: var(--orange);}
  .yellow {color: var(--yellow);}
  .green {color: var(--green);}
  .teal {color: var(--teal);}
  .blue {color: var(--blue);}
  .indigo {color: var(--indigo);}
  .purple {color: var(--purple);}
  .pink {color: var(--pink);}
  .gray {color: var(--gray);}
  
  i.icon_annual_review {
  display: block;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eannual_review%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-1230.000000, -2061.000000)'%3E%3Cg id='dark' transform='translate(703.000000, 2060.999793)'%3E%3Cg id='annual_review' transform='translate(527.000148, 0.000000)'%3E%3Cpath d='M36.0000127,18.0000595 C36.0000127,27.9411813 27.9411813,36.000119 17.9999532,36.000119 C8.0588314,36.000119 0,27.9411813 0,18.0000595 C0,8.05893774 8.0588314,0 17.9999532,0 C27.9411813,0 36.0000127,8.05893774 36.0000127,18.0000595' id='circle' fill='%23FB073F'%3E%3C/path%3E%3Cpath d='M26.5892012,12.0244569 L22.6992012,15.9134569 L19.1642012,12.3774569 L23.0532012,8.48845693 C20.6268369,7.49097253 17.8387127,8.04958941 15.9839086,9.90483074 C14.1291045,11.7600721 13.5711449,14.5483279 14.5692012,16.9744569 L8.29320116,23.2494569 C8.1054848,23.4368544 8,23.6912113 8,23.9564569 C8,24.2217025 8.1054848,24.4760595 8.29320116,24.6634569 L10.4152012,26.7854569 C10.6025986,26.9731733 10.8569556,27.0786581 11.1222012,27.0786581 C11.3874468,27.0786581 11.6418037,26.9731733 11.8292012,26.7854569 L18.1042012,20.5094569 C20.530574,21.5083094 23.3195455,20.9505939 25.1752012,19.0954569 C27.0295952,17.2394038 27.5872149,14.4509109 26.5892012,12.0244569 L26.5892012,12.0244569 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: 2rem;
    position: absolute;
    bottom: 2.5rem;
    right: -1.5rem;
  }
  
  i.icon_tech_symposium {
  display: block;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Etech_symposium%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-968.000000, -2061.000000)'%3E%3Cg id='dark' transform='translate(703.000000, 2060.999793)'%3E%3Cg id='tech_symposium' transform='translate(265.000000, 0.000207)'%3E%3Cpath d='M36,18 C36,27.9411849 27.9410555,36 18,36 C8.05881507,36 0,27.9411849 0,18 C0,8.05881507 8.05881507,0 18,0 C27.9410555,0 36,8.05881507 36,18' id='circle' fill='%230089CD'%3E%3C/path%3E%3Cpath d='M27.0000001,15.897 L27.0000001,12.922 C27.0000001,11.8174305 26.1045698,10.922 25.0000001,10.922 L19.0000001,10.922 L19.0000001,9.61 C19.3050003,9.336 19.5000001,8.942 19.5000001,8.5 C19.5000001,7.67157288 18.8284274,7 18.0000001,7 C17.1715732,7 16.5000001,7.67157288 16.5000001,8.5 C16.5000001,8.942 16.6950003,9.336 17.0000001,9.61 L17.0000001,10.922 L11.0000001,10.922 C9.89543078,10.922 9.00000014,11.8174305 9.00000014,12.922 L9.00000014,15.92 L8.92800028,15.925 C8.40494181,15.9622685 7.99972407,16.3976156 8.00000014,16.922 L8.00000014,18.922 C8.00000014,19.4742847 8.44771553,19.922 9.00000014,19.922 L9.00000014,24.922 C9.00000014,26.0265695 9.89543078,26.922 11.0000001,26.922 L25.0000001,26.922 C26.1045698,26.922 27.0000001,26.0265695 27.0000001,24.922 L27.0000001,19.922 C27.552285,19.922 28.0000001,19.4742847 28.0000001,18.922 L28.0000001,16.984 C28.0115892,16.8288029 27.9869405,16.6730365 27.9280003,16.529 C27.7260003,16.041 27.2930003,15.924 27.0000001,15.897 Z M13.0000003,16.922 C13.0000003,15.818 13.6720003,14.922 14.5000003,14.922 C15.3280003,14.922 16.0000003,15.818 16.0000003,16.922 C16.0000003,18.026 15.3280003,18.922 14.5000003,18.922 C13.6720003,18.922 13.0000003,18.026 13.0000003,16.922 Z M21.9980003,22.922 C20.9970003,22.919 14.0010003,22.922 14.0000003,22.922 L14.0000003,20.922 C14.0000003,20.922 21.0010003,20.92 22.0020003,20.922 L21.9980003,22.922 Z M21.5000003,18.922 C20.6720003,18.922 20.0000003,18.026 20.0000003,16.922 C20.0000003,15.818 20.6720003,14.922 21.5000003,14.922 C22.3280003,14.922 23.0000003,15.818 23.0000003,16.922 C23.0000003,18.026 22.3280003,18.922 21.5000003,18.922 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: 2rem;
    bottom: 0;
    right: -1.5rem;
    position: absolute;
  }
  
  i.icon_user_symposium {
  display: block;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Euser_symposium%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='elements' transform='translate(-703.000000, -2063.000000)'%3E%3Cg id='dark' transform='translate(703.000000, 2060.999793)'%3E%3Cg id='user_symposium' transform='translate(0.000000, 2.000207)'%3E%3Cpath d='M36,18 C36,27.9411849 27.9410555,36 18,36 C8.05881507,36 0,27.9411849 0,18 C0,8.05881507 8.05881507,0 18,0 C27.9410555,0 36,8.05881507 36,18' id='circle' fill='%2300BE79'%3E%3C/path%3E%3Cpath d='M18,18.832 C21.309,18.832 24,21.523 24,24.832 L24,24.832 L24,25.832 L9,25.832 L9,24.832 C9,21.523 11.691,18.832 15,18.832 L15,18.832 Z M21.552,9 C23.18,10.079 24.176,11.656 24.355,13.44 C24.4760665,14.6373085 24.2130469,15.8420855 23.604,16.88 C27.044,18.547 28,22.043 28,23.832 L28,23.832 L26,23.832 C26,23.789 25.951,19.533 21.719,18.293 L21.719,18.293 L20.101,17.818 L21.293,16.626 C22.0814476,15.8426847 22.4751906,14.7459342 22.365,13.64 C22.247,12.465 21.566,11.408 20.447,10.666 L20.447,10.666 Z M16.5,9.832 C18.706,9.832 20.5,11.626 20.5,13.832 C20.5,16.038 18.706,17.832 16.5,17.832 C14.294,17.832 12.5,16.038 12.5,13.832 C12.5,11.626 14.294,9.832 16.5,9.832 Z'  fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: 2rem;
    bottom: 0;
    right: -1.5rem;
    position: absolute;
  }
  
  [class*="icon_"] {
    z-index: 100;
    height: 2rem;
    width: 2rem;
    /* box-shadow: var(--block-shadow); */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 1rem;
    /* border: var(--b); */
  }
  
  #roadmap-legend {
    margin: 1rem auto;
    width: fit-content;
    /* border: var(--b); */
    display: flex;
    align-items: center;
    gap: 3rem;
  }
  
  #roadmap-legend i[class*="icon_"] {
    position: static;
    box-shadow: none;
  }
  
  #roadmap-legend > div {
    display: flex;
    width: fit-content;
    gap: .5rem;
    font-size: .8rem;
    align-items: center;
    font-weight: 400;
  }
  
  .date-last-edit {
    margin: 2rem auto 1rem;
    font-size: .9rem;
    opacity: .9;
    text-align: center;
    display: block;
    font-weight: 400;
  }

  /* Responsive behaviour */
  
  @media all and (max-width: 1024px) {
    #roadmap-container > div#group-headers {display: none;}
    #roadmap-container ul.touchpoints {height: 11rem;}
    .major {height: 19rem;}
    .touchpoints i[class*="icon_"] {right: -1rem;}
  }
  
  @media all and (max-width: 768px) {
    #roadmap-container {display: flex; flex-direction: column;}
    #roadmap-container > div {grid-template-columns: repeat(3, 1fr);}
    #roadmap-container header {
      display: flex; flex-direction: column; gap: 1rem; height: fit-content; justify-content: center; 
    }
    .prose--responsive #roadmap-container ul.major {display: none;}
    #roadmap-container header, .releases {height: 11rem;}
    .touchpoints i[class*="icon_"] {right: -.5rem;}
    .touchpoints i.icon_annual_review {bottom: 6rem;}
    .touchpoints i.icon_user_symposium, .touchpoints i.icon_tech_symposium {bottom: 3.5rem;}
    #roadmap-legend {margin: 2rem auto 1rem;}
  }
  
  @media all and (max-width: 428px) {
    #roadmap-container > div {grid-template-columns: repeat(2, 1fr);}
    #roadmap-container ul.touchpoints {display: none;}
    #roadmap-legend {display: none;}
  }