/* JoyFit wordmark. The typography is the brand, the dot carries the accent. */
:root {
  --brand-ink: #24272c;
  --brand-accent: #ff9257;
  --brand-stage: #1d2026;
}
:root[data-theme="dark"] { --brand-ink: #f7f6f2; }

.jf-brand {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  white-space: nowrap;
  line-height: 1.2;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important;
  font-size: var(--brand-size, 32px);
  font-weight: 800!important;
  letter-spacing: -.055em!important;
  color: var(--brand-ink);
  text-transform: none!important;
}
.jf-brand .jf-brand-letter {
  display: inline-block;
  color: inherit!important;
  transform-origin: 50% 85%;
}
.jf-brand .jf-brand-dot {
  display: inline-block;
  color: var(--brand-accent)!important;
  transform-origin: 50% 85%;
}
#login #lg0 {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 24px;
  overflow: visible;
  background: transparent!important;
  border-radius: 0;
}
#login #lg0 .jf-brand { --brand-size: 52px!important; }
#nav .jf-nav-brand { color: #faf8f4; }
#nav .jf-nav-brand .jf-brand {
  color: #faf8f4;
  --brand-size: 36px!important;
}
.ob-brand .jf-brand { color: var(--brand-ink)!important; }
.ob-brand .jf-brand .jf-brand-letter { color: inherit!important; }

#intro:not(:has(.ob-shell)) {
  background: var(--brand-stage)!important;
  color: #faf8f4;
}
#intro:not(:has(.ob-shell)) .ob-brand .jf-brand {color:#faf8f4!important}
#intro:not(:has(.ob-shell))>p {color:#c3c6cc!important}
#intro.jf-brand-splash {
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
}
#intro.jf-brand-splash .jf-brand {
  color: #faf8f4;
  font-size: clamp(64px, 18vw, 108px);
  padding-right: .1em;
}
/* First joy, then the growing smile, then fit and its accent. */
.jf-brand-y {position:relative;width:.61em;letter-spacing:0!important}
.jf-brand-y .jf-brand-y-text {visibility:hidden}
.jf-brand-y svg {
  position:absolute;
  width:.64em;
  height:.86em;
  left:-.015em;
  top:.36em;
  fill:currentColor;
  overflow:visible;
}
.jf-brand--animated .jf-brand-letter {
  animation:brand-reveal 400ms cubic-bezier(.22,1,.36,1) both;
}
.jf-brand--animated .jf-brand-letter:nth-child(2) {animation-delay:70ms}
.jf-brand--animated .jf-brand-y {
  animation:brand-smile 950ms cubic-bezier(.22,1,.36,1) 100ms both;
  transform-origin:50% 90%;
}
.jf-brand--animated .jf-brand-letter:nth-child(n+4) {
  animation:brand-fit 500ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(900ms + (var(--letter-index) - 3) * 65ms);
}
.jf-brand--animated .jf-brand-dot {
  animation:brand-dot 400ms cubic-bezier(.22,1,.36,1) 1250ms both;
}
.jf-notice-dot {width:9px;height:9px;border-radius:50%;background:var(--brand-accent);display:block}
@keyframes brand-reveal {
  from {opacity:0;transform:translateY(.18em)}
  to {opacity:1;transform:translateY(0)}
}
@keyframes brand-smile {
  0% {opacity:0;transform:translateY(.1em) scale(.85,.78)}
  25% {opacity:1;transform:translateY(0) scale(.92,.88)}
  64% {opacity:1;transform:translateY(-.025em) scale(1.07,1.16)}
  83% {transform:translateY(0) scale(.99,.97)}
  100% {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes brand-fit {
  from {opacity:0;transform:translateX(-.12em) translateY(.08em)}
  to {opacity:1;transform:translateX(0) translateY(0)}
}
@keyframes brand-dot {
  0% {opacity:0;transform:translateY(-.75em) scale(.55)}
  55% {opacity:1;transform:translateY(.025em) scale(1.15,.85)}
  80% {transform:translateY(-.06em) scale(.95,1.05)}
  100% {opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce) {
  .jf-brand--animated .jf-brand-letter,.jf-brand--animated .jf-brand-dot {
    animation:none!important;
    opacity:1;
    transform:none;
  }
}


/* A single wordmark belongs to the form. The photo introduces the product. */
#login .jf-e1-auth-story {justify-content:flex-end}
#login .jf-e1-auth-story-main {margin-bottom:clamp(12px,2vh,24px)}
#login #auth-intro {margin:0 0 24px;color:var(--t2)!important;line-height:1.5;font-size:14px}