.header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: #0967db;
  transform-origin: left;
  transform: scaleX(var(--reading-progress, 0));
  pointer-events: none;
}
.header.is-scrolled {box-shadow: 0 4px 22px #15335109}
.header nav a {position:relative;transition:color .2s}
.header nav a[aria-current="location"] {color:#0967db}
.header nav a:not(.login)::after {
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  right:0;
  height:2px;
  background:#0967db;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.header nav a[aria-current="location"]::after,
.header nav a:focus-visible::after {transform:scaleX(1)}
.button {position:relative;isolation:isolate;overflow:hidden}
.button > span {display:inline-block;transition:transform .25s ease}
.button:focus-visible > span {transform:translate(3px,-2px)}
.primary::after,.light::after {
  content:'';
  position:absolute;
  inset:-60% auto -60% -45%;
  width:22%;
  background:#ffffff25;
  transform:skewX(-20deg) translateX(0);
  pointer-events:none;
}
.product-preview {
  transform:perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:transform .28s ease-out,box-shadow .28s,border-color .28s;
}
.product-preview:focus-within {border-color:#93bdf0;box-shadow:0 20px 44px #194b8514}
.workflow>button {transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.workflow>button:focus-visible {transform:translateY(-3px)}
.principles article {transition:border-color .25s}
.principles article h3,.steps li h3 {transition:color .2s,transform .25s}
.steps li>span {transition:transform .28s,box-shadow .28s}
.choices label {transition:background .2s,border-color .2s,box-shadow .2s}
.choices label:has(input:checked) {box-shadow:inset 3px 0 #0967db}
.choices label:focus-within {border-color:#0967db}
.faq summary {transition:color .2s}
.faq details[open] summary {color:#0967db}
.faq details[open] {border-bottom-color:#9fc4ee}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .header nav a:hover::after {transform:scaleX(1)}
  .button:hover > span {transform:translate(3px,-2px)}
  .primary:hover::after,.light:hover::after {animation:button-sheen .65s ease-out}
  .product-preview:hover {box-shadow:0 24px 46px #194b851a;border-color:#adcaf0}
  .workflow>button:hover {transform:translateY(-4px);box-shadow:0 6px 14px #1742780c}
  .principles article:hover {border-color:#0967db}
  .principles article:hover h3,.steps li:hover h3 {color:#0967db;transform:translateY(-3px)}
  .steps li:hover>span {transform:scale(1.09);box-shadow:0 6px 18px #0967db30}
  .choices label:hover {box-shadow:0 4px 12px #1d50850b}
  .faq summary:hover {color:#0967db}
}
@keyframes button-sheen {to{left:130%}}
@media(max-width:900px) {.header nav a:not(.login)::after{bottom:4px;left:12px;right:12px}}
@media(prefers-reduced-motion:reduce) {
  .product-preview {transform:none!important}
  .button>span,.workflow>button,.steps li>span,.principles article h3,.steps li h3 {transform:none!important}
  .primary::after,.light::after {display:none}
  *,*::before,*::after {animation:none!important;transition:none!important}
}