/* The still phone in the /mute hero: Mute's session-active screen, drawn in
   HTML so it stays sharp at any size. Nothing on it moves. */

.mute-screen {
  background: #0A0A0A;
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 0 56px; box-sizing: border-box;
  color: #F5F0E8; font-family: 'DM Sans', sans-serif; font-stretch: 100%;
}
.ms-wordmark {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 20px;
  letter-spacing: .45em; text-indent: .45em;
}
.ms-ring { position: relative; width: 180px; height: 180px; margin-top: 72px; display: grid; place-items: center; }
.ms-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ms-track { fill: none; stroke: #1A1A1A; stroke-width: 3; }
.ms-arc {
  fill: none; stroke: #E8C170; stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(232, 193, 112, .25));
}
.ms-time { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 44px; line-height: 1; }
.ms-status { margin-top: 40px; font-size: 13px; letter-spacing: .2em; color: #8F877D; }
.ms-pct { margin-top: 10px; font-size: 14px; color: #8F877D; }
.ms-end {
  margin-top: auto; height: 44px; padding: 0 28px; box-sizing: border-box;
  display: flex; align-items: center; border-radius: 999px;
  border: 1px solid rgba(232, 193, 112, .4);
  font-size: 13px; letter-spacing: .12em; color: #8F877D;
}