/* All four desktop facts stay on one row. Phone/tablet rules remain unchanged. */
@media(min-width:1024px){
 .home-page .hero-bottom .home-token-facts{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0}
 .home-page .hero-bottom .home-token-facts>div{display:grid;grid-row:1 / 4;grid-template-rows:subgrid;min-width:0;padding-inline:6px;border-left:1px solid #ffe43030}
 .home-page .hero-bottom .home-token-facts>div:first-child{border-left:0}
 .home-page .hero-bottom .home-token-facts dt,.home-page .hero-bottom .home-token-facts dd,.home-page .hero-bottom .home-token-facts a{overflow-wrap:anywhere}
 /* Shared tracks absorb wrapping in any fact without staggering the others. */
 .home-page .hero-bottom .home-token-facts dt{align-items:flex-start}
 .home-page .hero-bottom .home-token-facts dd{align-self:stretch}
 .home-page .hero-bottom .home-token-facts a{align-items:flex-start;padding-top:8px;box-sizing:border-box}
 /* Flatten only the grouping divs in browsers without subgrid. Each semantic
    term, value and link still occupies the same shared track and column. */
 @supports not (grid-template-rows:subgrid){
  .home-page .hero-bottom .home-token-facts>div{display:contents}
  .home-page .hero-bottom .home-token-facts>div>*{padding-inline:6px;border-left:1px solid #ffe43030}
  .home-page .hero-bottom .home-token-facts>div:first-child>*{border-left:0}
  .home-page .hero-bottom .home-token-facts>div:nth-child(1)>*{grid-column:1}
  .home-page .hero-bottom .home-token-facts>div:nth-child(2)>*{grid-column:2}
  .home-page .hero-bottom .home-token-facts>div:nth-child(3)>*{grid-column:3}
  .home-page .hero-bottom .home-token-facts>div:nth-child(4)>*{grid-column:4}
  .home-page .hero-bottom .home-token-facts dt{grid-row:1}
  .home-page .hero-bottom .home-token-facts dd{grid-row:2}
  .home-page .hero-bottom .home-token-facts a{grid-row:3}
 }

}
/* When the invitation and four readable facts cannot share the same band,
   retain the right-hand column and give each its own row. */
@media(min-width:1024px) and (max-width:1599px){
 .home-page .hero-bottom>.hero-introduction{grid-area:1 / 1}
 .home-page .hero-bottom>.home-token-summary{grid-area:2 / 1;width:100%;transform:none}
 .home-page .hero-bottom>.home-market{grid-area:3 / 1}
}