/* Folding feature cards on phones (see m-fold.js). Only applies once the script tags the page. */
.m-fold .fold { position: relative; overflow: hidden; cursor: pointer; }
.m-fold .fold:not(.open) .fold-rest { display: none !important; }
.m-fold .fold h3 { padding-right: 52px; }
.m-fold .fold-btn {
  position: absolute; top: 50%; right: 16px; z-index: 3; display: grid; place-items: center;
  width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid rgba(15, 42, 74, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #0f1623; cursor: pointer;
}
.m-fold .fold-btn { transition: top 380ms cubic-bezier(.22, 1, .36, 1), margin-top 380ms cubic-bezier(.22, 1, .36, 1), transform 380ms cubic-bezier(.22, 1, .36, 1), background 200ms; }
.m-fold .fold-btn[aria-expanded="true"] { top: 22px; margin-top: 0; transform: rotate(180deg); }
.m-fold .fold-btn::before, .m-fold .fold-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.8px; margin: -.9px 0 0 -6.5px;
  border-radius: 2px; background: currentColor; transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 200ms;
}
.m-fold .fold-btn::after { transform: rotate(90deg); }
.m-fold .fold-btn[aria-expanded="true"]::after { transform: rotate(0deg); opacity: 0; }
.m-fold .fold-btn:focus:not(:focus-visible) { outline: none; }
.m-fold .fold { transition: transform 160ms ease; }
.m-fold .fold:active:not(.open) { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .m-fold .fold-btn, .m-fold .fold { transition: none; } }
/* Home bento: folded cards size to their title (the design gives them a 300px floor). */
.m-fold .bento .bc.fold:not(.open) { min-height: 0 !important; gap: 0 !important; }