/* Unrote - site styles, part 3 of 3: the end of components.css in a file of its own - the motion that settles
   and reveals pieces, hover, prefers-reduced-motion and the phone layout (760 px and narrower). Right after
   components.css, before motion.css and a page's own stylesheet: the cascade is the one of the single file. A
   change here: bump ?v= of this file in every page. */
.settle {
  animation: settle 250ms cubic-bezier(.23,1,.32,1) both;
}
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.soft {
  transition: opacity 150ms cubic-bezier(.23,1,.32,1),transform 150ms cubic-bezier(.23,1,.32,1);
}
@starting-style {
  .soft {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes rv {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@supports (animation-timeline: view()) {
  .rv {
    animation: rv linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
  .rl .row {
    animation: rv linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }
  .rl .row:nth-child(3) {
    animation-range: entry 16% entry 46%;
  }
  .rl .row:nth-child(4) {
    animation-range: entry 22% entry 52%;
  }
  .rl .row:nth-child(5) {
    animation-range: entry 28% entry 58%;
  }
  .rl .row:nth-child(6) {
    animation-range: entry 34% entry 64%;
  }
  .rl .row:nth-child(7) {
    animation-range: entry 40% entry 70%;
  }
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover {
    background: #1c46b8;
    color: #ffffff;
    text-decoration: none;
  }
  .btn2:hover {
    background: #2b2a26;
    color: #e8e8e3;
  }
  .btn3:hover {
    background: #dcdcd6;
    color: #181715;
  }
  .nav .links a:not(.btn):hover {
    text-decoration: underline;
  }
  .chip:hover {
    background: #ffffff;
  }
  .chip.on:hover {
    background: #2b2a26;
  }
  .seg button:hover {
    background: #ffffff;
  }
  .seg button.on:hover {
    background: #2b2a26;
  }
  .tier:hover {
    background: #ffffff;
  }
  .tier.on:hover {
    background: #181715;
  }
  .ex:hover {
    color: #181715;
  }
}
@media (prefers-reduced-motion:reduce) {
  .settle, .rv, .rl .row {
    animation: none;
  }
  .soft {
    transition: none;
  }
  .btn:active, .chip:active {
    transform: none;
  }
  details::details-content {
    transition: none;
  }
}
@media (max-width:760px) {
  .w {
    padding: 0 16px;
  }
  .w {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .w .w {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .row2 {
    grid-template-columns: minmax(0,1fr);
    gap: 24px;
    padding: 48px 0;
  }
  .stage {
    padding: 16px;
  }
  .stack-m {
    flex-direction: column;
    align-items: flex-start;
  }
  .grid2, .grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .tabb {
    min-width: 0;
    flex: 1 1 150px;
  }
  .nav .links > a:not(.btn) {
    display: none;
  }
  .menu {
    display: block;
  }
  .nav .btn.sm {
    display: none;
  }
}